Fetchpriority=”highest” for Better LCP Score

Optimizing LCP with Fetchpriority=”highest”: An In-Depth Guide

Introduction

Largest Contentful Paint (LCP) is one of the key metrics Google uses to measure user experience on a website. It represents the time it takes for the largest content element in the viewport to become visible. This could be an image, a video, or even a block of text. The lower the LCP, the better the perceived performance of your website.

One way to optimize your LCP score is by using the Fetch API’s fetchpriority="highest" attribute. This attribute allows you to prioritize the fetching of specific resources, ensuring that they load faster and thus improve your LCP score.

Understanding Fetch Priority

Fetch priority is a concept introduced in HTTP/2 and further refined in HTTP/3. It allows developers to assign a priority level to each resource request, determining the order in which resources are fetched from the server.

The fetchpriority attribute can take one of several values: lowest, low, default, high, and highest. By setting fetchpriority="highest", you’re telling the browser that this resource is critical and should be fetched before others.

How Fetchpriority=”highest” Improves LCP

Setting fetchpriority="highest" for critical resources can significantly improve your LCP score. Here’s how:

1. Prioritized Loading: By prioritizing the loading of the largest content elements, you ensure that these elements are displayed to the user as quickly as possible.
   
2. Reduced Blocking: Critical resources often block the rendering of other elements on the page. By loading these resources first, you reduce the amount of time other elements are blocked, improving overall page load time.
   
3. Improved Resource Utilization: Prioritizing resource fetching allows the browser to make better use of its limited resources, ensuring that critical resources are loaded first.
   

Implementing Fetchpriority=”highest”

To implement fetchpriority="highest" in your js code, you simply need to add the attribute to your fetch requests, like so:

fetch('https://example.com/large-image.jpg', { fetchpriority: 'highest' })
  .then(response => response.blob())
  .then(images => {
    // Your code here
  });

In this example, the large-image.jpg resource is set to the highest priority, ensuring that it’s loaded before any other resources.

HTML tags Implementations:
Images (<img> tag)

The fetchPriority property is useful when applied to <img> elements to signal high or low priority image fetches. For example:

<img src="large-image.jpg" fetchpriority="highest">

Scripts (<script> tag)

You can also use fetchpriority with <script> tags to control the loading of JavaScript files. For example:

<script src="app.js" fetchpriority="lowest"></script>

Note: This feature might not be supported by all build tools like Webpack.

Links (<link> tag)

For stylesheets and other linked resources, use fetchpriority in the <link> tag. For example:

<link rel="stylesheet" href="styles.css" fetchpriority="highest">

Iframes (<iframe> tag)

fetchpriority can also be used with iframes to prioritize their loading. For example:

<iframe src="video.html" fetchpriority="low"></iframe>

Picture tags

To use priority hints with picture tags, add the fetchpriority attribute to the img element inside the picture tag. For example:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg" fetchpriority="highest">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg" fetchpriority="high">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;" fetchpriority="default">
</picture>

Hack around HTML tags

Fetchpriority tag can also be used with HTML tags such as <div> <p> <article> <span> <h1> tags, here is an experiment I did to prove it.

In this screenshot you can see after adding Fetchpriority=”highest” to the h1 tag, lcp score went down to 2.52s

Conclusion

Improving your LCP score is crucial for providing a good user experience and can also positively impact your site’s SEO. By understanding and utilizing the fetchpriority="highest" attribute, you can ensure that your most important content loads quickly, leading to improved performance and happier users.

Please note that fetchpriority is still an experimental feature and may not be supported by all browsers. Always test thoroughly and consider using feature-detection techniques to provide fallbacks for unsupported browsers.

By making small but impactful changes like these, you can ensure that your website not only ranks well in search engines but also provides an exceptional user experience.