Largest Contentful Paint (LCP) is the time it takes, from the moment a visitor starts loading a page, for the largest image or block of text visible on screen to appear. It is one of Google’s three Core Web Vitals. Google rates 2.5 seconds or less as good, up to 4 seconds as needing improvement, and anything slower as poor.
How LCP works
As a page loads, the browser keeps track of the biggest piece of content in the visible area. Candidates include images, video poster images, background images set in CSS, and blocks of text such as a heading or paragraph. The candidate can change as larger elements arrive; the browser stops looking for new candidates once the visitor scrolls, taps or presses a key, and the last candidate reported is the page’s LCP.
Google assesses LCP at the 75th percentile of real visits, separately for mobile and desktop. In plain terms, three out of four page loads need to hit the threshold for the page to pass.
A slow LCP can be broken into four parts, and diagnosing which part is slow points to the fix:
- Time to first byte: how long the server takes to start responding.
- Resource load delay: the gap before the browser starts downloading the LCP image.
- Resource load duration: how long that download takes.
- Element render delay: the wait between the file arriving and it appearing on screen.
Why it matters
LCP is the closest single measure of “has the page loaded” from a visitor’s point of view. If the hero image or main heading takes five seconds to appear on a phone, many people will have gone back to the search results. Google uses Core Web Vitals as part of its page experience signals, though relevance and content count for far more; the stronger reason to fix LCP is the visitors you lose.
On UK small business sites the usual culprits are familiar: hero sliders that load several large photos, background videos on hospitality sites, uncompressed photos straight off a phone, and budget hosting that is slow to respond. The cookie consent banner can also become the LCP element on mobile when its text block is the largest thing on screen, so a banner loaded late from a third-party script can delay LCP for every visitor.
Common mistakes
- Lazy-loading the hero image, which tells the browser to wait before fetching the most important image.
- Setting the hero as a CSS background, so the browser discovers it late.
- Serving a 4,000-pixel JPEG where a 1,200-pixel WebP or AVIF file would look the same.
- Render-blocking stylesheets and web fonts that hold up the heading text.
- Building the page with JavaScript in the browser, so nothing appears until scripts run.
- Judging LCP from a single desktop test rather than mobile field data.
How to act on it
Start in Search Console’s Core Web Vitals report to see which page groups fail on mobile. Test a representative page in PageSpeed Insights, which names the LCP element and breaks down where the time goes.
Then fix the slowest part. For an image, serve it at the right size and in a modern format, remove lazy loading from it, add fetchpriority="high", and preload it if the browser finds it late. For slow server response, look at caching, hosting and a content delivery network. For text, reduce render-blocking CSS and font delays. Field data takes up to 28 days to reflect changes. Diagnosing LCP across templates is a routine part of my technical SEO work.