Why is my LCP slow?

A slow Largest Contentful Paint is caused by one or more of four delays: a slow server response, the browser finding the main image or text late, a large file taking long to download, or rendering being held up before the element can be drawn. Identify the longest of the four on your page and fix that first.

Why it matters

LCP should be 2.5 seconds or less at the 75th percentile to be rated good. Because the time is the sum of four sub-parts, speeding up a part that is already short barely helps. Compressing an image does nothing if the real delay is a slow server or a late-discovered hero image.

The four parts are:

Time to First Byte: the wait for the first bytes of the HTML.
Resource load delay: the gap between that and the moment the browser starts requesting the LCP image or font.
Resource load duration: how long the file takes to download.
Element render delay: the time between the file arriving and the element appearing on screen.

How to check

Run the page in PageSpeed Insights on mobile and note the LCP element named in the report.
In Chrome DevTools, record a page load in the Performance panel and select the LCP marker. Compare when the HTML arrived, when the image request started, when it finished and when it painted.
Look at field data for the same page to confirm that real visitors see the problem.

Likely causes and fixes

Slow first byte. Add page caching, use a CDN, remove redirect hops and speed up server code.
Image found late. If the hero is set as a CSS background, injected by JavaScript or marked loading="lazy", the browser discovers it late. Put it in the HTML as an img, remove lazy loading and consider fetchpriority="high".
Large file. Resize to the displayed size, compress, use WebP or AVIF and serve different sizes with srcset.
Blocked rendering. Defer scripts and reduce render-blocking CSS so the browser can paint as soon as the file arrives.
Client-side rendering. If the main content appears only after JavaScript runs and fetches data, serve the key content in the initial HTML.

Common mistakes

Optimising every image when only one element is the LCP.
Lazy-loading the hero.
Testing on a fast desktop link only.
Adding a preload for a different image than the one actually shown on mobile.
Waiting a day and expecting field data to update.

Frequently asked questions

Which part is usually the biggest?

It varies by site. On image-heavy pages the download is often large, while on database-driven pages the first byte can dominate. Measuring your own page is the only reliable answer.

Can fonts be my LCP element?

Yes, if the largest visible element is a block of text. A late-loading web font can then delay it.

Why does mobile LCP differ from desktop?

The layout and the largest element can differ, and phones are slower. Always test both.

Crawvix's scan checks whether Largest Contentful Paint is good. To see yours, Try the free website sample.