Resource Hints Explained | Preload, Preconnect, and Early Hints

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/html

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:

<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 OK

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.

Click Below to Get the Code