Performance

How to Improve Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible content element (usually a hero image, video, or text block) to render. Under 2.5s = good. Over 4s = poor. Most slow LCPs come from one of three causes: slow server, slow image delivery, or render-blocking resources.

Try our Speed test

Identify the LCP element

In Lighthouse or DevTools Performance panel find the 'Largest Contentful Paint' marker — it shows which DOM element triggered LCP. Usually a hero image or H1.

Optimize the LCP image

Convert to WebP/AVIF (50-70% smaller) serve at the actual displayed size (not a 4K source for a 600px slot) and add fetchpriority= high to the tag. Preload it with.

Eliminate render-blocking

Defer non-critical CSS (use media queries to load print or large screens lazily) defer non-critical JS and inline critical CSS for above-the-fold content.

Improve TTFB

If your TTFB is over 600ms the LCP fix is upstream. Use a CDN enable HTTP/2 or HTTP/3 cache aggressively and consider edge rendering for HTML.

Want to verify your setup?

Run the check now