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

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 measure Largest Contentful Paint?

Google's Chrome User Experience Report (CrUX) includes real user data on Largest Contentful Paint, collected by Chrome users visiting your site. The easiest and fastest way to check Google's Chrome User Experience Report dataset is with Calibre's Free Core Web Vitals checker tool.

Get a free Core Web Vitals report for your site, and see how it performs against Google's Core Web Vitals metrics.

In Calibre you can monitor all pages of your website, or a series of websites using CrUX Dashboard. This allows you to track performance over time, compare against competitors and understand how your site is performing in the wild.

Calibre also allows you to monitor Largest Contentful Paint in synthetic tests. You can run tests on your site from multiple locations around the world, and monitor performance over time.

Google offers Core Web Vitals data in Chrome User Experience Report, PageSpeed Insights, Search Console, Lighthouse and web-vitals.js.

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.

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.