Resource hints like preload, preconnect, and early hints are essential tools for improving web performance, particularly when optimizing for metrics like LCP (Largest Contentful Paint) and TTFB (Time to First Byte). In this article, we walk through real-world examples, demonstrating the measurable impact of each hint.
Baseline: No Resource Hint
HTML File: no-preload.html
JavaScript File: loader.js
This setup loads an HTML file, which loads a JavaScript file, which then loads an image. Each step incurs its own latency.
Impact: Each asset waits for the previous to load before it begins, compounding latency.
Client-Side Preload
HTML File: client-preload.html
By adding a <link rel="preload"> tag, we instruct the browser to fetch the image early—even before the JS requests it.
Impact: The browser downloads the image in parallel with the JS file, saving one round-trip time.
Early Hints Preload
HTML File: eh-preload.html
This version moves the preload hint to the server using an HTTP 103 Early Hints response:
Impact: Resources start loading before the full response even arrives, outperforming client-side preload.
Client-Side Preconnect
HTML File: client-preconnect.html
JavaScript File: cdn-loader.js
In cases where only the domain of a resource is known, use preconnect:
Impact: Reduces DNS, TCP, and TLS setup times for third-party resources, typically saving 100–300ms.
Early Hints Preconnect
HTML File: eh-preconnect.html
Move the preconnect instruction to the server to get the benefits even earlier:
Impact: Provides the most aggressive latency reduction for third-party connections.
Key Takeaways
Focus your resource hints on LCP-contributing elements like large images, web fonts, or hero banners, and wherever possible, leverage Early Hints for the best performance. These optimizations not only improve load time and user experience but also contribute to higher search engine rankings. Just remember, more isn’t always better. Target only the assets that impact the initial user experience to avoid unnecessary overhead.
.jpg)
.png){kind=icon}
