To improve LCP (Largest Contentful Paint), you need to reduce the time it takes to render the largest visible element on the screen: optimize images, deliver critical CSS inline, and improve server response time. A LCP below 2.5 seconds is the goal set by Google.
LCP is one of the three Core Web Vitals metrics Google uses as a ranking signal. If your page loads slowly "to the eye," visitors bounce and your rankings drop. This article covers exactly what slows it down and how to fix it.
What Counts as the LCP Element?
Before optimizing, identify which element is being measured. Common candidates include:
- Images — the most common case: hero images, banners, product photos.
- Large text blocks — a paragraph or headline occupying the largest visible area.
- CSS background images — if the largest visual block uses
background-image. - Videos — the poster frame of the video element.
You can identify the LCP element in Chrome DevTools: open the Performance tab, record a page load, and look for the "LCP" marker on the timeline. It also appears in the PageSpeed Insights report and in Lighthouse.
The 4 Main Causes of a Slow LCP
Google groups the culprits into four categories. Fixing the highest-impact ones first produces the biggest score jump.
1. Slow server response time (high TTFB)
If the server takes more than 600 ms to respond, LCP climbs even if everything else is optimized. Check your TTFB with WebPageTest or a professional web performance service.
Quick wins:
- Enable full-page caching (WordPress: WP Rocket or W3 Total Cache).
- Use a CDN to serve responses from nodes close to your visitors.
- Identify slow database queries with
EXPLAINand optimize them.
2. Render-blocking resources
The browser cannot paint anything until it finishes downloading and processing synchronous CSS and JavaScript in the <head>. Every millisecond spent there delays LCP.
- Add
deferorasyncto all non-critical scripts. - Extract the CSS needed for above-the-fold content and inject it as inline
<style>(critical CSS). - Load the rest of your CSS with
rel="preload"plus a smallonloadtrick.
3. Slow resource load times
If the LCP element is an image, its file size and format matter enormously.
| Action | Estimated impact |
|---|---|
| Convert JPG/PNG to WebP or AVIF | 30–50% smaller file size |
| Resize to actual display dimensions | Variable; can be 2–5× |
| Compress with a visually lossless tool | Additional 10–30% |
Add fetchpriority="high" to the LCP element |
Prioritized download |
You can also use <link rel="preload" as="image"> so the browser downloads the LCP image before the parser reaches the <img> tag in the HTML.
4. Client-side rendering
Sites that rely on JavaScript to paint the main content (SPAs, React, Vue without SSR) have their LCP delayed until JS finishes executing. Solutions: server-side rendering (SSR), static-site generation (SSG), or HTML streaming.
Image Optimization: The Biggest LCP Win
Because the hero image is the LCP element on most sites, let's go deeper here.
- Never add
loading="lazy"to your LCP image: that attribute deliberately delays the download of the element you need most urgently. - Use responsive images with
srcsetandsizesso mobile gets a small version and desktop gets a large one. - Serve the file from the same domain or a CDN with HTTP/2 to eliminate connection latency to an external domain.
- On WordPress, enable automatic WebP conversion in your image plugin and verify that
fetchpriority="high"is applied to the featured image.
Critical CSS: How to Do It Without a Build Pipeline
If you don't have a Node.js build pipeline, you can extract critical CSS manually or with online services like Critical CSS Generator. The workflow:
- Paste your page URL into the generator.
- Copy the resulting CSS (usually 5–15 KB).
- Paste it inside a
<style>tag in the<head>, before any<link>tags. - Load the full stylesheet in a non-blocking way:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>With this setup, the browser paints visible content using only the inline CSS while downloading the rest in parallel without blocking.
Quick Diagnostic Checklist
- Run PageSpeed Insights on your page URL and note the LCP on mobile and desktop.
- Identify the LCP element in the report ("Diagnostics > Largest Contentful Paint element").
- If the element is an image, check its format, file size, and confirm it does NOT have
loading="lazy". - Measure TTFB in the DevTools Network tab (first line of the document).
- Look for synchronous scripts and blocking stylesheets in the
<head>. - Apply the highest-impact fixes first, then re-measure.
Key takeaways
- LCP measures when the largest visible element finishes loading; the target is < 2.5 s.
- The main causes are high TTFB, render-blocking resources, heavy images, and client-side JS rendering.
- Never use
loading="lazy"on the hero image; usefetchpriority="high"instead. - Inline critical CSS eliminates render blocking without losing styles.
- A CDN and full-page cache are the fastest wins for TTFB.
Ready to have a specialist team review and fix your LCP? Request a web performance audit and get a concrete action plan tailored to your site.
FAQ
What LCP value does Google consider "good"?
Google rates LCP as "good" when it's under 2.5 seconds, "needs improvement" between 2.5 and 4 seconds, and "poor" above 4 seconds.
Does LCP affect Google rankings?
Yes. LCP is part of the Page Experience signals Google uses in its ranking algorithm. A poor LCP can hurt your position against competitors with faster pages.
How do I measure real-user LCP (field data)?
In PageSpeed Insights, the "field data" section comes from the Chrome User Experience Report (CrUX) and shows real LCP from recent visits. For ongoing monitoring, use the web-vitals.js API or Google Search Console (Core Web Vitals report).
Is mobile LCP different from desktop LCP?
Yes, and it's almost always worse on mobile due to slower connections, less powerful CPUs, and smaller screens that may display different elements. Since Google prioritized mobile-first indexing, mobile LCP carries more weight in rankings.
Compare providers
Other providers and guides worth comparing:
