How to Fix Largest Contentful Paint (LCP)
Largest Contentful Paint measures how long the biggest visible element takes to render. Here is how to diagnose slow LCP and bring it under the 2.5-second threshold.
What Lighthouse Is Telling You
When Lighthouse flags Largest Contentful Paint, it means the biggest visible element in the viewport took too long to render. LCP carries a weight of 25 in the Lighthouse Performance score — the second-heaviest metric after Total Blocking Time. A slow LCP drags the entire Performance category.
The LCP element is usually a hero image, a large heading, or a video poster frame. Lighthouse tells you which element it picked and how long it took to paint.
Why LCP Is Slow
LCP breaks down into four phases:
- Time to First Byte (TTFB) — How long the server takes to respond to the initial HTML request
- Resource load delay — Time between TTFB and when the browser starts loading the LCP resource
- Resource load duration — How long the LCP resource (image, font, etc.) takes to download
- Element render delay — Time between when the resource finishes loading and when the element actually paints
Most LCP failures fall into one of these:
- Oversized hero images — A 3 MB JPEG that should be 200 KB as a WebP
- Late-discovered images — The LCP image is loaded via CSS
background-imageor JavaScript, so the browser’s preload scanner cannot find it - Render-blocking resources — CSS and synchronous scripts block rendering before the LCP element can paint
- Lazy-loaded hero images —
loading="lazy"on an above-the-fold image delays its download
The Old Way to Fix It
- Open Chrome DevTools and run a Lighthouse audit
- Find the “Largest Contentful Paint element” diagnostic
- Identify which image or element Lighthouse flagged
- Switch to your editor, find the component that renders that element
- Compress the image manually or convert it to WebP/AVIF using a tool like Squoosh or ImageMagick
- Add
fetchpriority="high"to the<img>tag - Add a
<link rel="preload">tag in the<head>for the image - Remove
loading="lazy"if present on the hero image - Re-run Lighthouse in DevTools to check if LCP improved
- Repeat until the score moves
This loop involves constant context switching between DevTools, the editor, and image compression tools. Each cycle takes minutes, and you often need three or four iterations.
The Frontman Way
Tell Frontman to fix your Lighthouse issues. That is the entire workflow.
Frontman has a built-in Lighthouse tool. It runs the audit, reads the failing scores, fixes the underlying code, and re-runs the audit to verify the score went up. If issues remain, it keeps going — iterating through fixes and re-checks until the metrics pass. You do not copy scores, translate audit names into code changes, or switch tabs. You say “fix the Lighthouse issues on this page” and Frontman handles the rest.
Key Fixes for LCP
- Preload the LCP image — Add
<link rel="preload">withas="image"in<head>so the browser discovers it immediately - Use
fetchpriority="high"— Tells the browser to prioritize this image over other resources - Serve modern formats — WebP is 25–35% smaller than JPEG. AVIF is 50% smaller. Use
<picture>with fallbacks - Remove lazy loading on hero images —
loading="lazy"on above-the-fold images delays LCP - Inline critical CSS — Render-blocking CSS delays the first paint, which delays LCP
- Reduce server response time — A slow TTFB delays everything downstream. Target under 200 ms
People Also Ask
What counts as the LCP element?
The LCP element is the largest image, video poster, or block-level text element visible in the viewport at load time. The browser updates the LCP candidate as the page renders — the final value is the last largest element before user interaction.
How does LCP differ from FCP?
First Contentful Paint measures when any content appears on screen. LCP measures when the largest content element finishes rendering. FCP might fire when a small loading spinner appears; LCP fires when the hero image finishes painting.
Does font loading affect LCP?
Yes. If the LCP element is a text block rendered with a web font, the browser waits for the font to download before painting the text. Use font-display: swap or font-display: optional to avoid invisible text during font loading.
Is LCP a Core Web Vital?
LCP is one of the three Core Web Vitals used by Google as a ranking signal. The other two are Cumulative Layout Shift and Interaction to Next Paint.
You can use Frontman to automatically fix this and any other Lighthouse issue. Frontman runs the audit, reads the results, applies the fixes, and verifies the improvement — all inside the browser you are already working in. Get started with one install command.