### Summarize Key Points

**Instructions:**

1. **Comprehension:** Carefully read and understand the text enclosed within the `<TEXT>` tags. Identify its main themes, arguments, and supporting details.

2. **Extraction:** Determine the most critical points by considering the following:
   - **Relevance:** How essential is this information to the overall understanding of the text?
   - **Impact:** Does this point significantly influence the main argument or narrative?
   - **Uniqueness:** Is this information distinct and not repetitive of other points?

3. **Summarization:** Convert these critical points into concise bullet points, ensuring each:
   - Clearly conveys a single idea.
   - Is self-explanatory without needing additional context.
   - Maintains the original meaning and intent of the text.

4. **Organization:** Arrange the bullet points logically, reflecting the structure of the original text or grouping similar ideas together for coherence.

5. **Review:** Reassess the bullet points to ensure:
   - All major points are covered without unnecessary details.
   - There is no redundancy.
   - The summary provides a clear and accurate representation of the original text.

<TEXT>


How To Preload Your Largest Contentful Paint Image
January 8, 2025 · 6 min read
Conor McCarthy
Conor McCarthy
Customer Support Engineer at DebugBear
In this article, we'll explore how preloading your Largest Contentful Paint (LCP) image can enhance your page's performance.

Preloading the LCP image ensures the browser prioritizes loading the image early. This reduces delays and delivers a faster experience for your visitors, as well as improving your Core Web Vitals score.

Why preloading the LCP image can fix your LCP score
The LCP image is important for the visitor experience, so it should start loading as soon as possible.

However, in some cases the browser is unable to detect the LCP image early. This often happens when the LCP image loads indirectly through a CSS or JavaScript request.

For example, in this watefall view we can see that the LCP image only starts loading after a stylesheet.

LCP image discovery chain

The preload resource hint allows you to tell the browser to load content that's required for the initial render before that content is naturally discovered.

Ideally, Chrome's built-in preload scanner would be able to scan the top of the HTML for images and other resources it needs to load, even before the HTML parser has reached them. However, this doesn't work if the LCP image is referenced in another file.

Preloads resolve this issue by allowing you to inform the browser about the image and its priority early. This can be achieved by adding a preload hint near the top of the HTML or in an HTTP header. Another option is to send the resource ahead of the response headers using Early Hints.

How to preload your LCP image
To preload your LCP image, add a preload tag to the HTML header with the image href and the fetchpriority=”high” attribute.

<link rel="preload" href="example-image.webp" as="image" fetchpriority="high" />

Let's look at an example page with an LCP score of 5.87 seconds. By reviewing the request waterfall we can see the request is discovered by the browser later on in the page load. The request starts at 3.87 seconds and a priority change occurs 4.04 seconds after the initial navigation to the website.

A good LCP score has to be under 2.5 seconds and we can use preloading to pass this threshold.

Request waterfall showing LCP late request start time and priority change

With DebugBear, it's possible to test out optimizations with the experiments feature. One of the available experiments is preloading the LCP image using fetchpriority="high".

Clicking the Run Experiment button will take you to the experiments page.

LCP preload recommendation

On the experiments page, select the Preload LCP image with high priority suggestion. The link will be added to the <head>. Then click Run Experiment.

Preload LCP experiment

After running the experiment, we can see the image has now been preloaded with high priority. The request now happens much earlier.

Preload experiment result

By preloading the LCP image, the score has improved by 3.38 seconds, going from a poor score of 5.87 seconds to a good score of 2.5 seconds.

LCP score change

How to identify the LCP image on your website
One of the easiest ways to identify the LCP image on a page is to run the free DebugBear website speed test. After running the test you can click on the Largest Contentful Paint metric to see the LCP image URL.

DebugBear free website speed test result LCP analysis

Other important information is also provided in the LCP analysis section. For example, the LCP request URL, request priority and a breakdown of the LCP Sub-parts.

The request waterfall is also included in the test result. It provides a filmstrip of the page rendering process next to information about all the important requests.

DebugBear free website speed test request waterfall

The LCP element will likely not be equal for all visitors. This difference is due to various factors such as device size. To view an overview of the most common LCP images for a page, you can use DebugBear Real User Monitoring. This tool provides recent data on how real visitors are experiencing your website.

Below we can see that 92% of visitors to this page have the LCP element as an image. However, for 8% of visitors the LCP element is a text banner.

DebugBear RUM LCP elements

How to preload background images
Background images in CSS rely on the browser parsing and rendering the CSS first. This creates a request chain that can delay the LCP image's rendering.

Including the background image in the HTML with a preload tag removes the wait for the CSS request to finish before the image can begin to load.

<link
  rel="preload"
  href="/background-image.webp"
  as="image"
  fetchpriority="high"
/>

What to do if preloading your LCP image isn't enough to fix your LCP score
If preloading the LCP image doesn't have the desired improvement on the LCP score, there could be other factors to investigate. Here are some common examples which may be negating the results of preloading the LCP image.

Is there a poor server response time or Time to First Byte?
Slow server response times and high TTFB (Time to First Byte) can delay preloading the LCP image. This is because the browser cannot start loading resources before the initial HTML response. Delayed server responses and high TTFB delay prevent the other resources from being fetched, resulting in the LCP image being rendered later.

Are render-blocking resources delaying rendering?
Content can only render on a page once all the render-blocking requests have finished. If a page has many render-blocking requests, then preloading the LCP image may result in Render Delay.

Render Delay is one of the four LCP Sub-parts. This is the time between the request finishing and the image rendering on the page. Each DebugBear lab test provides a breakdown of the LCP Sub-parts.

LCP image with high Render Delay

Is the LCP image element only created once JavaScript has executed?
If the LCP image is generated dynamically via JavaScript then the image won't appear until this code has been loaded and run. In this case preloading the image may not help very much, as the code execution may cause a much bigger delay.

Conclusion
Preloading your LCP image can help the browser detect and render the LCP image as soon as possible.

If preloading doesn't improve the LCP score there could be other factors preventing the image from rendering. Such as, slow server response times, high TTFB, render-blocking resources, or images loaded late by JavaScript.

DebugBear is a page speed testing tool that helps you keep track of your website performance in the lab and with real-user analytics.

Start your free 14-day trial and start optimizing today.
</TEXT>