Largest Contentful Paint

---

Largest Contentful Paint (LCP) is a landmark timing based metric that reports when the largest above-the-fold element was rendered. LCP is a Core Web Vital metric.

To locate the largest contentful element, LCP considers the following:

• Visible <img>, <video> or <svg><image></svg> elements
• Size of element on the screen
• Elements with background images. E.g: background-image: url()
• Block level elements containing text

How to measure Largest Contentful Paint?

The quickest and easiest way to see LCP performance for your site is to use our free Core Web Vitals test tool (or the form below). The data is sourced from Google’s CrUX dataset, which is used by Google to evaluate Core Web Vitals performance and overall page experience.

Monitoring LCP and other Core Web Vitals at scale

Calibre has dedicated CrUX Dashboards to monitor LCP and overall website performance for all your sites. You can track performance over time, compare against competitors and understand how your site is performing in the wild for customers.

You can also monitor LCP using synthetic tests, which run on a schedule and provide a baseline of LCP performance. Synthetic tests are useful for testing pages that are a work in progress, or do not receive enough traffic to be included in Google’s CrUX dataset.

What are LCP subparts?

LCP subparts refer to the individual timing elements that contribute to the Largest Contentful Paint measurement. By breaking down LCP into its subparts, you can gain a better understanding of what is causing LCP to be slow, and how to improve it.

LCP subparts describe image loading performance in detail:

• Time to First Byte: How long it takes for the server to respond with the first-byte of HTML
• Image Load Delay: Delay before image starts loading
• Image Load Duration: How long it takes for the image to load
• Image Render Delay: Delay before the image is rendered

A slow LCP subpart timing will slow down overall LCP. Using subparts, you can identify which part is causing delay and take steps to improve it. For more information on LCP subparts, see Web.dev's LCP Breakdown Guide.

What is a good Largest Contentful Paint measurement?

Google defines Largest Contentful Paint as a Core Web Vital metric, used within Page Experience signals for search ranking.

In order to be considered fast, pages should reach Largest Contentful Paint within 2.5s or less to avoid being penalized. LCP over 4 seconds is considered slow.

How to improve Largest Contentful Paint?

Improving Largest Contentful Paint can be achieved in a few straight-forward steps:

1. Identify the LCP element on your page

Use Chrome devtools to locate the LCP element on your page. You can do this by:

• Opening Chrome DevTools
• Navigating to the Performance panel
• Create a new performance recording by clicking the reload button
• Clicking the "LCP" event in the waterfall chart to highlight the LCP element
• Inspecting the LCP element by hovering over "Related Node" in the Summary panel

2. Optimise the LCP element

The required optimisations will depend on the type of LCP element on your page. Image, video or text elements can be optimised in the following ways:

• Optimise images: Use modern image formats like JPEG XL, WebP or AVIF, and compress images to reduce file size. Consider using a combination of responsive images and image CDNs to deliver images efficiently.
• Optimise video: Use optimised Poster images to visually complete video elements quickly. Consider using a video CDN to do it for you.
• Optimise text: Use compressed webfonts like WOFF2, reduce the number of webfonts used on the page, and experiment with font-display property to control how fonts are loaded and displayed.
• Use CDNs to deliver content: Use a Content Delivery Network (CDN) to deliver content closer to the user.
• Use resource hints: Use priority hints and preload to prioritise loading of critical resources.
• Never lazy load LCP elements: Lazy-loading LCP elements will delay their rendering. Use lazy-loading only for non-LCP images that are below the fold.

All of the above tips will positively impact LCP performance and overall user experience, so be sure to complete all of them where possible.

3. Optimise general page load performance

In addition to optimising the LCP element, you should also consider general page load performance improvements that may be delaying LCP from rendering:

• Optimise server response time: Ensure that main document HTML responses are fast. A slow HTML response time delays the start of the LCP element render.
• Minimise render-blocking resources: Optimise CSS and JavaScript that block rendering.
• Lazy load off-screen images: Load non-LCP images only when they are in the viewport using the loading="lazy" attribute.

4. Monitor performance over time

Making a once off improvement is a great start, but to maintain performance over time, you should:

• Use Calibre to monitor LCP: Monitor LCP over time using CrUX Dashboard and synthetic tests.
• Compare Page LCP within your Site: Compare LCP across different pages on your site to identify pages that need the most improvement.
• Use performance budgets to observe LCP: Set performance budgets for LCP and other Core Web Vitals metrics to ensure that performance does not regress over time.

Further reading

• How To Improve Largest Contentful Paint for Faster Load Times
• The Critical Request: How to Prioritise Requests to Improve Speed
• Chrome Speed: Largest Contentful Paint Changelog posts updates when there are changes to LCP in Chrome.