Speed8 min read

How to fix a slow Largest Contentful Paint

LCP is the metric most sites fail and the one people attack least systematically. The useful trick is that LCP decomposes into four parts, and Chrome DevTools will tell you the size of each. Once you know which part is large, the fix is obvious. Guessing without that breakdown is how people spend a week optimising the wrong thing.

The four parts of LCP

Every LCP is the sum of these, in order:

  • Time to First Byte — how long the server takes to start responding.
  • Resource load delay — the gap between the HTML arriving and the browser starting to fetch the LCP element.
  • Resource load time — how long that element takes to download.
  • Element render delay — the gap between it finishing downloading and appearing on screen.

Open DevTools → Performance, record a page load, and look at the LCP marker. Whichever of the four is largest is the only one worth working on first.

If TTFB is large

Anything over about 800ms is a server problem, not a front-end one. Causes: shared hosting under load, a slow database query, no page caching on a dynamic CMS, or a server geographically distant from your users.

Fixes in order of return: better hosting, then caching, then moving the server closer to your audience or putting the HTML behind an edge CDN. No amount of image or CSS work compensates for a slow first byte.

If resource load delay is large

This means the browser knew about the page but did not start fetching the hero image promptly. The usual causes are specific and each has a clean fix:

  • The image is lazy-loaded. Remove `loading="lazy"` from the LCP element. This is the single most common LCP own-goal.
  • It is loaded by JavaScript — a slider or carousel. The browser cannot discover it until the script runs. Render the first slide in HTML.
  • It is a CSS background image. Not discoverable by the preload scanner. Use an `<img>`, or add a `preload` hint.
  • Render-blocking CSS is ahead of it. The browser is still parsing stylesheets. Inline critical CSS and defer the rest.

If load time or render delay is large

Load time large means the file is too big or the connection is slow. Convert to WebP or AVIF, serve dimensions appropriate to the device with `srcset`, and compress properly — a hero image should be well under 200KB in most cases.

Render delay large is usually a font. If the LCP element is text waiting on a web font, the browser holds the paint. `font-display: swap` renders immediately in a fallback, `optional` avoids the later reflow that would hurt CLS. Preloading the font file helps both.

Common questions

What is a good LCP score?

Under 2.5 seconds at the 75th percentile of real visits. Between 2.5 and 4 seconds needs improvement; over 4 seconds is poor. Judge it on field data from real users, not a lab test on a fast machine.

Why did lazy loading make my LCP worse?

Because lazy loading deliberately delays fetching an image until it is near the viewport — and the LCP element is by definition already in the viewport. Lazy-loading it tells the browser to wait before fetching the exact thing being measured. Exclude above-the-fold images.

Does a CDN fix LCP?

It helps with resource load time by serving images from a nearby location, and with TTFB if it caches your HTML. It does not help with render-blocking CSS, lazy-loading mistakes or font-related render delay — so it fixes some causes and none of the others.

How do I find which element is the LCP element?

PageSpeed Insights names it in the diagnostics. In DevTools, the Performance panel marks it and hovering the LCP entry highlights the element on the page. It is often not what you assume — a background block or a heading rather than the hero photo.

Want us to look at your site?

We will tell you whether the problem is hosting, plugins, architecture or something else entirely — including when the answer is that you should not rebuild and should spend the money on traffic instead. No charge for the assessment.

Run the free audit tool

Pricing: US clients (USD) · India clients (INR)

Related guides

All 21 guides