Optimize the LCP Resource Load Delay

Optimize the LCP Resource Load Delay

Largest Contentful Paint (LCP) is a crucial web performance metric that measures how quickly the largest contentful element becomes visible within the viewport. The resource load delay is a sub-part of the LCP that indicates how much time is lost between the actual and the optimal time the LCP resource was queued for download. Let's dive deep into the resource load delay aspect of LCP and explore its importance and optimization strategies.

LCP TIP: most of the time the LCP will be much worse when the LCP is not a text element. That is why, when debugging the LCP it makes sense to log all LCP elements and their type!

What is Resource Load Delay in LCP?

Resource Load delay, also known as Load Delay, is the time it takes for the browser to discover and start downloading the LCP element after receiving the initial server response. This delay occurs between the Time to First Byte (TTFB) and the actual loading of the LCP resource.

For image-based LCP elements, the load delay represents the time between when the HTML document starts loading and when the browser identifies and begins downloading the image. If the LCP element is not an image (e.g., a text block), the load delay is typically 0 milliseconds.

Why Load Delay Matters

Load delay plays an important role in determining your LCP score and by that definition: your website's performance. Improving load delay means loading site's resources in the optimal order. This has several benefits.

• User Experience: A shorter load delay means users can see the main content faster, improving their perception of your site's speed and responsiveness.
  
• SEO Impact: As part of the Core Web Vitals, LCP affects your website's search engine rankings. Reducing load delay can help improve your LCP score and potentially boost your SEO performance
• Conversion & Bounce Rates: The load for ecommerce sites usually means the time between first presentation and the main product image. Sites with fast  product images tend to have higher conversion rates. By minimizing load delay, you increase the chances of engaging users before they lose interest.

How to detect resource load delay

There are 2 easy ways to detect resource load delay.

Network Inspection in Chrome DevTools: Use the Ctrl + Shift + I shortcut to open Chrome's Developer Tools, then select the "Network" tab and reload the page. Look at the loading sequence. Your LCP resource should be one of the first items queued for download. If it's lagging behind other elements, there is a resource load delay problem. Below is an example of a site where the resource load delay hasn’t been optimized.

Leverage Real User Monitoring (RUM) Data: Real User Monitoring tools often log LCP attribution data. With RUM, you can visualize the breakdown of LCP sub-parts (over time or by page), giving you a clear picture of the load delay for LCP elements across your entire site or per page. The example below shows a global LCP breakdown along with the corresponding load delay.

How to Improve Load Delay

A resource load delay happens when the download order and timing of resources aren't optimal. There are, in essence,  two straightforward ways to fix this: prioritize the LCP resource or de-prioritize Non-LCP resources. Lets explore some common patterns:

LCP Tip: Understand the Preload Scanner: Modern browsers use a mechanism called the preload scanner, which rapidly scans the HTML and queues resources for download. If a resource can't be queued by the preload scanner, it will have to wait for the slower DOM parser, resulting in delays. Ensuring your LCP resources are discoverable by the preload scanner can make a big difference in reducing load delay.

1. Optimize the HTML Structure

The browser (or the preload scanner) processes your HTML from top to bottom, queuing resources in the order they appear This means the higher the LCP resource appears in the HTML, the sooner it gets enqueued. To to optimize this remove or defer unneeded resources from the top of the HTM:

• Lazy-Load Unimportant or hidden Images: Sometimes images (for example flags for language specific versions of your site or images in the menu) are found on the very top of your site's HTML. These images are nowhere near as important as the LCP element. By lazy-loading these images they are skipped by the preload scanner and enqueued a little bit later during the load process.
  
• Move unimportant scripts to the bottom of the page: Move scripts that are absolutely unimportant for the initial load to the bottom of the page to prevent them from delaying critical resources. For example a chat widget. No-one in the history of the internet every has needed to chat before the page was visible!

2. Avoid background images.

Background images are invisible to the preload scanner, meaning they will always be queued by the much slower DOM parser. To avoid this delay, use a regular <img> tag instead, combined with the CSS property object-fit: cover to mimic the appearance of a background image. This way, the preload scanner can detect and enqueue the image immediately.

3. Use Fetch Priority

Add the fetchpriority="high" attribute to your LCP element to hint to the browser that it should prioritize this resource right from the start. Normally, images load with a default low or medium priority. During the layout phase, the browser upgrades visible elements to high priority. By setting fetchpriority="high" the download begins immediately at high priority, ensuring faster LCP. 

Fetchpriority is usually less intrusive (and less effective) then preloading because it set's the relative priority of an element (in this case the image is relatively more important then other images) but it does not make it more important then for example stylesheets or non-blocking scripts

<img src="hero-image.jpg" alt="Hero Image" fetchpriority="high">

4. Implement Preloading

Preloading changes the order in which the preload scanner enqueues files. Place the <link rel="preload"> tag in the head of the page to instruct the browser to fetch critical resources, such as the LCP image, as early as possible. Preloads can be used to preload resources that are referenced later in the html (and therefore are enqueued later) or even to preload resources that are not yet referenced in the html (as with some sliders). For maximum effectiveness it is recommended to place preloads after stylesheets and before scripts in the head of the page 

<link rel="preload" as="image" href="hero-image.jpg">

5. Optimize styles

Stylesheets are normally enqueued before the LCP resource and that is with a good cause. Without stylesheets the browser will not know how the page will look and cannot start the rendering phase.However excessive CSS size of and exserssive number of stylesheets will compete witht he LCP resrouce for early bandwifth.

6. Implement Efficient Lazy-Loading

The loading attribute can be a double-edged sword. Use loading="eager" (or simply omit the attribute since "eager" is the browser default) for your LCP resource, while applying loading="lazy" for offscreen images.

• Eager Load the LCP Element: If the LCP element is lazy-loaded, it won’t be queued by the preload scanner and will load much later, negatively impacting performance.
• Lazy-Load Viewport Images: For images that are in the visible viewport but are not LCP resources, use loading="lazy" to queue them for download slightly later. This reduces bandwidth competition with the LCP resource.
• Avoid Lazy Loading Offscreen Images: Images that aren’t in the visible viewport won’t trigger a download at all, completely eliminating bandwidth competition.

7. Browser Caching

Browser caching allows you to skip network requests for resources that have already been stored locally on the user's device. While it won't speed up the first page view, it will improve load times for subsequent pageviews and returning visitors. Here is how browser caching helps with resource load delay:

• Cache Competing Resources: While caching the LCP resource itself is a great strategy, browser caching improves LCP resource load delays by storing network resources that might compete with or delay the LCP resource, such as scripts, stylesheets, and images.
  
• Reduce Server Load: Caching decreases the number of requests sent to your server, which can improve the performance of other resources by freeing up bandwidth and reducing server CPU cycles.
  

8. Use speculation rules

Speculation Rules enables browsers to prefetch or prerender web pages based on predicted user navigation. Prefetching effectively eliminates the Time to First Byte sub-part of the LCP and has no impact in the resource load delay. Prerendering renders the next page in a hidden tab and downloads all the page resources.  This eliminated all load delays for the LCP element as shown in this example LCP breakdown of a prerendered page.

9. Avoid Client side rendering