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.
<!-- no-preload.html -->
<html>
<head></head>
<body>
<script src="../javascript/loader.js"></script>
</body>
</html>
// loader.js
const img = new Image();
img.src = "../images/background.png";
document.body.appendChild(img);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.
<link rel="preload" as="image" href="../images/background.png" />
<script src="../javascript/loader.js"></script>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:
HTTP/1.1 103 Early Hints
Link: </images/background.png>; rel=preload; as=image
HTTP/1.1 200 OK
Content-Type: text/htmlImpact: 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:
<link rel="preconnect" href="https://cdn.example.com" />
<script src="https://cdn.example.com/cdn-loader.js"></script>// cdn-loader.js
const img = new Image();
img.src = "https://img.example.com/background.png";
document.body.appendChild(img);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:
HTTP/1.1 103 Early Hints
Link: <https://cdn.example.com>; rel=preconnect
Link: <https://img.example.com>; rel=preconnect
HTTP/1.1 200 OKImpact: 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)
%20(1).png){kind=icon}
.png){kind=icon}
.png){kind=icon}