LCP Optimization: Fix Largest Contentful Paint

Check your site performance freeAnalyze My Site Free

Step 1: Find your LCP element

In Chrome DevTools, open the Performance tab and run a recording. Look for the LCP marker in the timeline. Or use PageSpeed Insights - it shows the LCP element in the Opportunities section. Common LCP elements: hero image, above-fold heading text (H1), large background image, video poster frame. On mobile and desktop, the LCP element may be different.

Step 2: Optimize images (most common fix)

Unoptimized images are the number one LCP cause. Fix: compress images to the display size (no point serving a 3000px image in a 800px container), convert to WebP or AVIF format (30-50% smaller than JPEG at equivalent quality), add explicit width and height attributes to prevent layout shifts, and add fetchpriority=high attribute to your LCP image element. In Next.js, use the Image component - it handles all of this automatically.

Step 3: Preload the LCP resource

If your LCP element is an image or font, preload it in the HTML head: link rel=preload as=image href=/hero.webp. This tells the browser to fetch the resource immediately during HTML parsing rather than waiting for the render tree. For background images set via CSS, preloading is especially important since they are discovered late in the loading process. Preloading the wrong resource wastes bandwidth - only preload your confirmed LCP element.

Step 4: Eliminate render-blocking resources

JavaScript and CSS files in the document head block the browser from rendering anything until they are downloaded and parsed. Move non-critical scripts to the bottom of the body or add defer and async attributes. Inline critical CSS (the styles needed for above-fold content) directly in the HTML head. Use link rel=preload for critical CSS files. Every 100ms of render-blocking delay adds to your LCP.

Step 5: Improve server response time (TTFB)

LCP cannot start until the server sends the HTML. If your Time to First Byte (TTFB) is over 600ms, it directly increases LCP. Fix TTFB by: using a CDN to serve pages from edge nodes near users, enabling full-page caching, upgrading server hardware, and optimizing database queries on page generation. A TTFB under 200ms gives LCP the best chance of hitting the 2.5 second target.

Step 6: Measure in field data, not just lab tests

PageSpeed Insights lab scores can differ significantly from real-user field data. Google ranks pages based on Chrome User Experience Report (CrUX) field data - real measurements from actual Chrome users on your site. Check your field data LCP in Google Search Console under Core Web Vitals. A page can pass lab tests but fail in field data due to slow user devices, network conditions, or content personalization that the lab test does not simulate.

Find your Core Web Vitals issues

Free analysis in 60 seconds

Analyze My Site Free