ScanoraAI — Fix Your Website in Seconds with AI

Largest Contentful Paint is the Core Web Vital most sites fail first. Here are nine specific, actionable techniques to get your LCP under 2.5 seconds.

Why LCP is the hardest Core Web Vital to fix

Cumulative Layout Shift has a clear set of causes. INP is usually a JavaScript problem. But LCP is the result of your entire delivery pipeline — server speed, network, render-blocking resources, and image handling — all adding up. A single slow step anywhere in that chain pushes LCP above 2.5 s.

Here are the nine highest-impact changes you can make, ordered roughly by effort.

1. Eliminate render-blocking resources

Any <link rel="stylesheet"> or <script> in <head> without async or defer blocks the browser from rendering anything. Use Chrome DevTools' Coverage tab to find CSS that isn't used above the fold, inline it, and load the rest asynchronously with media="print" onload="this.media='all'".

2. Preload the LCP image

If your LCP element is an image, the browser doesn't discover it until it parses the DOM. A preload hint moves discovery to the very start of the request waterfall:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Combine this with fetchpriority="high" on the <img> tag itself — never use loading="lazy" on the LCP element.

3. Reduce Time to First Byte (TTFB)

LCP can't start until the first byte arrives. If TTFB is above 800 ms, fix it before anything else. Options: switch to a faster host, enable server-side caching, move to edge/CDN rendering, or reduce database query time on the critical path.

4. Serve images in modern formats

WebP is typically 25–35% smaller than JPEG at the same quality. AVIF is 40–50% smaller but has slightly lower browser support. Use the <picture> element to serve AVIF with WebP fallback:

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

5. Use a CDN

A content delivery network serves your static assets from the edge node closest to each user. This alone can cut LCP by 300–800 ms for users who are geographically far from your origin server. Cloudflare's free tier is sufficient for most small to medium sites.

6. Enable compression

Brotli compresses text assets (HTML, CSS, JS) 15–20% more efficiently than gzip. If your server returns Content-Encoding: gzip, switching to Brotli is a free win. On nginx: brotli on; brotli_comp_level 6;.

7. Remove unused CSS and JavaScript

Every byte of CSS and JS the browser downloads, parses, and executes delays first render. Use a bundler like Vite or Rollup with tree-shaking and dynamic imports. Run PageSpeed Insights to see exactly how many KBs of unused code are being loaded.

8. Declare image dimensions explicitly

Without width and height attributes, the browser doesn't know how much space to reserve for an image. It can't start layout until the image loads, which delays LCP. Always set both attributes — even on responsive images, since the browser uses the aspect ratio, not the pixel values.

9. Use resource hints for third-party origins

If your LCP element depends on a font or image from a third-party domain (e.g. Google Fonts, a CMS image CDN), add a preconnect hint to eliminate the DNS + TCP + TLS handshake from the critical path:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Next step

Run a free ScanoraAI audit to see your current LCP score, what your LCP element actually is, and which of the above fixes will have the biggest impact on your specific site.

How to Fix a Poor LCP Score: 9 Proven Techniques