What is a good LCP score?

A good LCP score is under 2.5 seconds. Scores between 2.5 and 4.0 seconds need improvement, and anything over 4.0 seconds is considered poor. These thresholds apply to both mobile and desktop, though mobile scores are typically slower due to device and network constraints.

What element does LCP measure?

LCP measures the render time of the largest visible element in the viewport. This is usually a hero image, a background image, a video poster, or a large block of text. The browser identifies the largest element automatically. You can check which element is your LCP in Chrome DevTools under the Performance tab.

Does LCP affect Google rankings?

Yes, LCP is one of the three official Core Web Vitals that Google uses as a ranking signal. Pages with good LCP scores (under 2.5 seconds) have a ranking advantage over pages with poor scores. LCP is often considered the most impactful Core Web Vital because it directly correlates with perceived load speed.

How long does it take for LCP improvements to affect rankings?

Google uses a rolling 28-day average of real user data from the Chrome User Experience Report (CrUX). After you deploy LCP improvements, it typically takes 28 days for the data to fully reflect your changes, and then additional time for Google to re-crawl and re-evaluate your pages. Most site owners see ranking changes within 1 to 2 months.

Back to Blog

Performance

How to Improve Your LCP Score: A Step-by-Step Guide

LCP (Largest Contentful Paint) is the most important Core Web Vital. Learn exactly how to measure and improve it with practical code examples.

FixRoast TeamApril 9, 202612 min read

Largest Contentful Paint (LCP) is the single most important Core Web Vital for perceived page speed. It measures how long it takes for the biggest visible element on your page to render. Google considers it a direct ranking factor, and users consider it the moment your page "feels" loaded.

If your LCP is above 2.5 seconds, you are losing both search rankings and visitors. This guide walks you through every common cause of slow LCP and exactly how to fix each one.

Step 1: Identify Your LCP Element

Before you can fix LCP, you need to know what element the browser is measuring. Here is how to find it:

Using Chrome DevTools:

Open your page in Chrome
Press F12 to open DevTools
Go to the Performance tab
Click the reload button to record a page load
Look for the "LCP" marker in the timeline
Click it to see which element was measured

Using FixRoast:

Run your URL through the FixRoast Page Speed Test. The results will identify your LCP element and tell you exactly what is slowing it down, with plain English explanations.

Common LCP elements include:

Hero images or banners
Background images set via CSS
Video poster images
Large text blocks (if no images are above the fold)

Step 2: Fix Slow Server Response (TTFB)

Nothing on your page can render until the server responds. If your Time to First Byte (TTFB) is slow, your LCP will be slow regardless of everything else.

How to check: Your TTFB should be under 800ms. You can see it in the FixRoast speed test results or in Chrome DevTools under the Network tab.

Fixes:

Enable server-side caching. Use Redis or Memcached to cache database queries and API responses.
Use a CDN. Services like Cloudflare, Fastly, or AWS CloudFront serve your content from edge locations closer to users.
Upgrade your hosting. Shared hosting often has slow response times. Consider a VPS or managed hosting platform.
Optimize database queries. Slow queries are a common TTFB bottleneck. Add indexes and reduce query complexity.

# Example: Enable caching in Nginx
location ~* \.(js|css|png|jpg|jpeg|gif|ico|webp|avif)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Step 3: Optimize Your LCP Image

If your LCP element is an image (which it is on most pages), image optimization is the single biggest lever you have.

Serve Modern Formats

Switch from PNG and JPEG to WebP or AVIF. These formats are 25-50% smaller with no visible quality loss.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

You can compress your images for free using the FixRoast Image Optimizer, which converts to WebP and AVIF while maintaining quality.

Right-Size Your Images

Never serve a 4000px wide image to a 1200px wide container. Use the srcset attribute to serve different sizes for different screen widths.

<img
  src="hero-1200.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Hero image"
  width="1200"
  height="600"
>

Preload the LCP Image

By default, the browser discovers images only when it parses the HTML and encounters the <img> tag. Preloading tells the browser to start downloading the image immediately.

<head>
  <link rel="preload" as="image" href="hero.webp" type="image/webp">
</head>

This alone can shave 200-500ms off your LCP.

Never Lazy-Load the LCP Image

Lazy loading defers image downloads until they are near the viewport. This is great for images below the fold, but it is terrible for your LCP image because it adds delay.

<!-- DO NOT do this for your hero image -->
<img src="hero.webp" loading="lazy" alt="Hero">

<!-- DO this instead -->
<img src="hero.webp" loading="eager" fetchpriority="high" alt="Hero">

The fetchpriority="high" attribute tells the browser to prioritize this image over other resources.

Step 4: Eliminate Render-Blocking Resources

CSS and JavaScript files in the <head> block rendering until they finish downloading and parsing. This delays everything, including your LCP element.

Inline Critical CSS

Extract the CSS needed for above-the-fold content and inline it directly in the HTML. Defer the rest.

<head>
  <style>
    /* Critical CSS for above-the-fold content */
    .hero { background: #1a1a2e; padding: 4rem 2rem; }
    .hero h1 { font-size: 3rem; color: white; }
  </style>
  <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
</head>

Defer Non-Critical JavaScript

Move non-essential scripts to the bottom of the page or use the defer attribute.

<!-- Analytics and tracking scripts should not block rendering -->
<script src="analytics.js" defer></script>

<!-- Third-party widgets can load after the page -->
<script src="chat-widget.js" defer></script>

Step 5: Optimize Web Fonts

Custom fonts can cause invisible text (FOIT) or text reflash (FOUT), both of which delay LCP when text is the largest element.

<head>
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
  <style>
    @font-face {
      font-family: 'CustomFont';
      src: url('font.woff2') format('woff2');
      font-display: swap; /* Shows fallback text immediately */
    }
  </style>
</head>

Use font-display: swap so text renders immediately with a fallback font, then swaps to the custom font once it loads.

Step 6: Measure and Verify

After making changes, measure your LCP again to confirm the improvement.

Tools to measure LCP:

FixRoast Page Speed Test for AI-powered analysis with prioritized fixes
Chrome DevTools Performance tab for local testing
Google Search Console Core Web Vitals report for field data
web.dev/measure for a quick Lighthouse scan

Remember that lab data (tools running the test) and field data (real user measurements) can differ. Field data, which comes from the Chrome User Experience Report, is what Google actually uses for ranking.

Common LCP Mistakes to Avoid

Lazy-loading everything. Only lazy-load images below the fold.
Using CSS background images for the hero. The browser discovers <img> tags earlier than CSS backgrounds. Use an <img> tag for your LCP element when possible.
Loading too many fonts. Each font file is a separate request. Limit yourself to 2 font families maximum.
Ignoring mobile. Mobile LCP is almost always slower than desktop. Always test and optimize for mobile first.
Not setting image dimensions. Missing width and height attributes cause layout shifts and can confuse the browser's loading priority.

Get Your LCP Score Now

Want to know your current LCP score and exactly what to fix? Run the free FixRoast Page Speed Test and get a complete breakdown with AI-powered recommendations. For a full landing page audit covering design, copy, and performance, check out the FixRoast landing page roast.

Ready to optimize your landing page?

Get AI-powered feedback on your landing page in 60-90 seconds. Free to try.

Get Your Free Roast