Largest Contentful Paint measures how long it takes for the largest visible element to render. On most pages that is a hero image, a banner or a block of heading text. It is the closest of the three Core Web Vitals to what people mean by “the page felt slow”.
The overall context is on Core Web Vitals. This page covers LCP specifically.
Identify the element first
Almost every wasted LCP effort starts with optimising the wrong thing. Browser developer tools report which element was measured, and it is frequently not the one people assume.
- Check the reported LCP element rather than guessing.
- It differs between mobile and desktop, and mobile is what is measured.
- It can differ between templates, so test a category page and a product page separately.
- If it is a text block, image optimisation will not help at all.
The causes, in the order they usually apply
Slow server response
Nothing can render before the HTML arrives. Where time to first byte is high, every other optimisation is working against a fixed handicap.
- Check TTFB before anything else. Above roughly 800ms, that is the problem.
- On WooCommerce and Magento this usually means caching configuration or hosting.
- Full-page caching for anonymous visitors matters most, since that is what is measured.
Render-blocking resources
CSS and JavaScript in the head that must load before anything paints. Common on theme-heavy sites and after plugins accumulate.
- Inline the critical CSS needed for what appears above the fold.
- Defer the rest.
- Load non-essential JavaScript asynchronously.
- Audit what plugins and apps are injecting into the head, which is where this accumulates.
Unoptimised images
Where the LCP element is an image, this is usually the dominant factor.
- Serve modern formats such as WebP, with fallbacks.
- Size images to their display dimensions rather than scaling large files down in the browser.
- Preload the LCP image so it is requested early.
- Do not lazy-load the LCP image. This is a common and self-defeating mistake, since lazy loading delays exactly the element being measured.
Client-side rendering
Where content is built in JavaScript, nothing paints until the script runs. Server-side rendering the above-the-fold content resolves this and also helps indexing. See JavaScript SEO.
Web fonts
Text held invisible while a custom font loads delays a text LCP. Use font-display swap and preload the font actually used above the fold.
Where to start
- Identify the LCP element on mobile.
- Check TTFB. If it is high, fix that first.
- If the element is an image: preload it, size it correctly, and confirm it is not lazy-loaded.
- If it is text: check fonts and render-blocking CSS.
- Re-measure on the templates that matter commercially, not on the homepage.
Frequently asked questions
What is a good LCP?
Under 2.5 seconds is the threshold for good, measured at the 75th percentile of real users. Lab tools give an indication; field data is what counts.
We optimised images and nothing changed. Why?
Most likely the LCP element is not an image, or server response time is the constraint. Check which element is being measured before optimising anything.
Does LCP affect rankings?
It is a ranking signal, and a weak one relative to relevance. Its larger effect is on conversion, since slow pages lose visitors before they read anything.
Why is mobile worse than desktop?
Slower connections, less processing power, and often the same heavy assets. Mobile is what is assessed, so optimise for it rather than for the desktop figure.
Consulting CTA
If your LCP is poor and image optimisation has not helped, book an SEO consultation for a performance review of the templates that matter.