How do you optimize Largest Contentful Paint (LCP)?
guide // , 5 min read, by Darthwares
To optimize Largest Contentful Paint (LCP), you must ensure your main content element is discoverable directly in the HTML source and rendered without unnecessary delay. Websites should strive to achieve an LCP of 2.5 seconds or less to provide a good user experience. You accomplish this by placing main image tags in raw HTML, setting appropriate resource priority attributes, and avoiding scripts or lazy loading on critical hero elements.
On this page // 5 sections
The short version
- Strive to maintain a Largest Contentful Paint render time of 2.5 seconds or less for your pages.
- Make the primary content element discoverable directly within the initial raw HTML source code.
- Never set lazy loading on an LCP image, and assign high fetch priority to critical hero assets.
- Serve modern image formats and responsive dimensions to shorten resource download durations.
What is Largest Contentful Paint and how is it measured?
Largest Contentful Paint measures the time from when a user initiates loading a page until the largest image, text block, or video is rendered within the viewport. Chrome for Developers documentation notes that this metric approximates when the main content of a page becomes visible to site visitors. MDN Web Docs explains that images and text blocks are among the elements evaluated when determining render time recorded from initial page load. To provide a good user experience, sites should strive to have a Largest Contentful Paint of 2.5 seconds or less.
The W3C specification details how the LargestContentfulPaint API provides visibility into page loading and rendering. The underlying algorithm keeps track of content seen so far as loading progresses, creating a new performance entry whenever a larger content element is found. For image carousels, content remains recognized as the largest element even if it is removed from the page. To maintain low performance overhead, changes to an element's size or position do not generate new candidate entries.
Measurement terminates immediately when a user interacts with the page through a tap, scroll, or keypress event. Because user interactions frequently change what is visible on screen, the browser stops reporting new entries upon input. In addition, Google tools that measure LCP do not report this metric if the page was loaded in the background, as it does not reflect user-perceived load time. W3C notes that pages loaded initially off-screen, such as in background tabs or through prerendering technology, report larger values than expected because they measure time from load until paint. The Web Vitals initiative recommends using identical thresholds across all devices based on mobile criteria.
Why do image elements delay LCP performance?
When images load slowly, they can make your LCP time longer, which hurts Core Web Vitals scores and overall user experience. MDN Web Docs points out that loading images using JavaScript delays when the browser begins downloading the image because JavaScript has to run first. To eliminate unnecessary resource load delay, web.dev guidelines specify that your LCP resource must be discoverable directly from the initial HTML source.
Images located below the viewport can load later, saving bandwidth for more important resources. However, primary LCP assets inside the viewport require immediate resource discovery. Using modern image formats helps reduce image file sizes while maintaining quality, which positively impacts the resource download time subpart of LCP. Combining modern formats with responsive images helps serve the right size for each screen, saving bandwidth and processing time.
How do you diagnose LCP bottlenecks on a page?
Diagnosing LCP performance requires examining real user experience alongside lab metrics. As web.dev notes, looking at what real users experience provides an accurate understanding of performance, whereas lab-based tools like Lighthouse provide synthetic testing. Chrome for Developers explains that Lighthouse extracts LCP data from Chrome's tracing tool. Knowing which subparts take the longest helps you optimize LCP.
The LargestContentfulPaint API enables developers to gain visibility into the loading and rendering process of web pages. For analytics analysis, web.dev recommends reporting only the most recently dispatched PerformanceEntry to your service. Logging the final entry ensures your diagnostic records accurately identify the true LCP element on the page.
- 01Check real user measurement data to verify if your LCP render times meet the 2.5 second target threshold.
- 02Inspect performance entries from the LargestContentfulPaint API to identify the specific element reported as the largest.
- 03Analyze subpart breakdowns to determine whether delays stem from HTML discovery, network download duration, or render delay.
| Symptom | Diagnostic check | Recommended fix |
|---|---|---|
| Hero image fetch begins late | Check if the img tag is present in the initial raw HTML source | Move the element markup directly into the HTML source |
| Resource load delay on LCP image | Check for loading lazy attributes or fetchpriority settings | Remove loading=lazy and set fetchpriority=high on the img tag |
| Long resource download duration | Inspect network panel for file format and asset dimensions | Serve modern image formats and implement responsive image markup |
| Render delay from external assets | Review stylesheet size and render-blocking resources | Inline small stylesheets into the HTML document head |
How do you optimize resource loading for LCP elements?
Optimizing HTML resource discovery is essential for reducing LCP render times. web.dev documents that developers should set fetchpriority="high" on an <img> element if they think it is likely to be the page's LCP element. Setting this attribute helps prioritize network requests for key visual content.
You should never lazy-load your LCP image. Setting lazy loading on the primary image always leads to unnecessary resource load delay and will have a negative impact on LCP. In addition, inlining your style sheet is generally only recommended if your style sheet is small, because inlined content in the HTML cannot benefit from browser caching in subsequent page loads.
Common questions
What is Largest Contentful Paint?
Largest Contentful Paint (LCP) measures the time from when a user navigates to a page until the largest image, text block, or video in the viewport is rendered.
What is a good LCP score?
To provide a good user experience, websites should strive to achieve a Largest Contentful Paint of 2.5 seconds or less.
Should you lazy-load your primary LCP image?
No, you should never lazy-load an LCP image. Lazy loading causes unnecessary resource load delay, which directly harms your LCP performance.
How does setting fetchpriority high improve LCP?
Setting fetchpriority="high" on an <img> element indicates to the browser that the asset is critical, helping to eliminate unnecessary resource load delay.
How do background tab page loads affect LCP reporting?
Google tools do not report LCP for pages loaded in the background, while W3C documentation notes that background tabs measure load to paint and report larger values than expected.
Primary sources and further reading
This article was researched and written by an AI model and published automatically. It was written from sentences that were checked to appear on the pages below, but a person has not reviewed the text. If something is wrong, tell us at chibivikramathithan@darthwares.com and we will correct it.