Largest Contentful Paint explained: what it measures and how to improve it

Fibvo editorial · 16 December 2022 · 5 min read

Largest Contentful Paint measures how long it takes for the largest visible content element — typically a hero image, a large block of text, or a background image — to fully render within the viewport after a page starts loading. It is one of Google's three Core Web Vitals and the metric most directly tied to how fast a page feels to load.

Google's scoring thresholds

Google considers an LCP of 2.5 seconds or less 'good', between 2.5 and 4 seconds 'needs improvement', and anything above 4 seconds 'poor'. These thresholds are measured at the 75th percentile of real user visits, meaning three out of four visits need to meet the 'good' threshold for a URL to pass overall.

• Good: 2.5 seconds or less.
• Needs improvement: 2.5 to 4 seconds.
• Poor: more than 4 seconds.

What typically causes a poor LCP score

The most common causes are slow server response times, render-blocking JavaScript and CSS that delay when the browser can start displaying content, unoptimised or improperly sized images, and client-side rendering that requires JavaScript to execute before the main content even appears.

• Slow server response time (Time to First Byte) before any content can begin loading.
• Render-blocking resources — large CSS or JavaScript files loaded before content can display.
• Oversized, uncompressed images used as the largest content element.
• Client-side rendered content that requires JavaScript execution before appearing.

The fastest LCP win for most sites is identifying and directly optimising the specific largest element — not making general, unfocused performance improvements across the whole page.

Practical fixes, in priority order

Identify your actual LCP element using Chrome DevTools or PageSpeed Insights first — do not guess. Then compress and properly size that specific image, ensure it is not lazy-loaded (lazy loading the LCP element itself often hurts, not helps), and remove or defer render-blocking resources that delay it. Our broader page speed optimisation guide covers additional related fixes.

• Identify the exact LCP element using PageSpeed Insights.
• Compress and correctly size that specific image or content block.
• Preload the LCP image if it is not immediately obvious to the browser.
• Remove or defer CSS and JavaScript that blocks rendering before the LCP element appears.

Measuring your own site

Google Search Console's Core Web Vitals report shows real, field-collected LCP data across your actual visitors, which better reflects real-world conditions than a single lab test. Google's technical documentation on web.dev covers the full measurement methodology.

Frequently asked questions

If your LCP scores need work and you want a technical review, contact our team.

---

Written by Fibvo — Bengaluru and Erode, India — working with clients in other time zones. Questions, or think we have it wrong? Tell us.