Largest Contentful Paint (LCP)

Largest Contentful Paint, LCP, is the time from page load start until the largest image or text block in the viewport is rendered. Good is up to 2.5 seconds, poor is above 4 seconds, as of 2026.

Chrome calculates field performance from real user data. It uses the 75th percentile of page loads over 28 days, by URL or by origin. That is the number that counts for Core Web Vitals.

For a small site, LCP is usually an image in the hero, a headline, or a poster image on a video. Fixing one template often fixes many pages at once.

• PageSpeed Insights: shows field data from Chrome User Experience Report when available, plus one Lighthouse lab run.
• Lighthouse: lab data from a simulated mid range phone on throttled 4G. One run, scores vary between runs.
• Search Console: the Core Web Vitals report groups URLs by status over the last 28 days when your site has enough data.

In Lighthouse v10 and later, the Performance score weights LCP at 25 percent. Total Blocking Time and Cumulative Layout Shift also weigh heavily. Do not chase a round score. Fix what users feel first.

• Large hero images on /, /pricing, or blog posts, served uncompressed or oversized for mobile.
• Slow server time to first byte on first request, no CDN or cache.
• Render blocking CSS and JS in the head, long critical path before first paint.
• Web fonts blocking text render, no preconnect or font display swap.
• Client side rendering of above the fold content, hydration delays push LCP out.
• The LCP element is a background image hidden in CSS, so the browser picks a large text block later.

Typical bad page: /pricing loads a 2400 px JPG hero, two CSS files and three JS bundles before first render. LCP shows at 4.1 seconds on mobile.

1. 1

   Find the LCP element on a slow page

   Open PageSpeed Insights or Lighthouse. Expand the LCP audit. Note which element is marked and on which device type.

2. 2

   Serve the right image fast

   Compress and resize the hero for mobile and desktop. Use modern formats. Add width and height. Preload the exact LCP image URL if it is critical.

3. 3

   Cut render blocking work

   Inline critical CSS for the above the fold. Defer non critical CSS and JS. Remove unused scripts from the head.

4. 4

   Speed up the first byte

   Enable CDN caching for HTML where possible. Optimise server processing and database calls. Keep TLS and redirects lean.

5. 5

   Make fonts non blocking

   Preconnect to the font host. Preload the used font files. Set font-display: swap so text paints quickly.

6. 6

   Render critical HTML on the server

   If you use a client framework, server render the hero and headline. Avoid waiting for hydration to show the main content.

A fixed page paints the hero text and image within 2.3 seconds on mobile with a stable layout and minimal JS before render.

• Mobile and desktop have separate field data. Fix mobile first. It is usually worse.
• The largest element can change with layout or A B tests. Re check which element is counted after changes.
• Background images in CSS are not LCP candidates. If the hero uses CSS backgrounds, the LCP may become a text block and render later.
• Lab wins can hide server latency. A CDN near you will not match far users. Trust the field.
• The 28 day window smooths results. You may need a few weeks to see the pass rate improve.