Largest Contentful Paint (LCP) is a Google metric from the Core Web Vitals and measures the time until the largest visible content element in the viewport – usually an image or a text block – is fully rendered. According to Google, a value of up to 2.5 seconds is considered good.
LCP measures how long visitors have to wait until the most important thing appears on screen – such as the large product image. Comparable to a restaurant: what matters is not when the kitchen starts cooking, but when the main course is on the table.
Why do I need the LCP value?
Classic metrics such as total load time say little about how fast a page feels to visitors. LCP addresses exactly that: the metric measures the moment when the largest content element in the visible area has finished rendering – typically the hero image, a product photo or the main headline. According to Google, an LCP of up to 2.5 seconds is considered good and values above 4 seconds poor; the rating is based on the 75th percentile of real user data. As part of the Core Web Vitals, LCP feeds into Google's page experience assessment.
Practical relevance for shop and website owners
In online shops, the LCP element on product and category pages is usually the large product or stage image – exactly the content prospective buyers are waiting for. A slow LCP means visitors stare at an empty area and, in our experience, tend to bounce before they have even seen the offer. This is particularly critical on mobile networks, where large images and slow servers add up. Targeted PageSpeed optimization therefore usually starts with analyzing the LCP element of the most important page types. Looking at the four phases of LCP helps here: server response time, resource load delay, resource load duration and render delay – this reveals whether the problem lies with the server, the image itself or the rendering.
Common mistakes
- Lazy-loading the hero or product image – the LCP element must be loaded immediately, not last
- Serving uncompressed images without modern formats such as WebP or AVIF
- Slow server response (high Time to First Byte) due to missing caching or underpowered hosting
- Render-blocking CSS and JavaScript that delays rendering of the main content
- Web fonts that block the rendering of large headlines instead of using
font-display: swap
What to look out for
First, use PageSpeed Insights to identify which element is the LCP element on your most important pages – the optimization differs depending on whether it is an image or a text block. Proven levers include preloading the hero image (rel="preload" or fetchpriority="high"), modern image formats and appropriate image sizes per device – more on this in our article on image SEO with WebP and AVIF. On the server side, caching, HTTP/2 or HTTP/3 and capable hosting shorten the time to first byte. Measure again after every change, as individual measures vary in impact depending on the page type.
Depending on the screen size, a different element may be the largest – the headline on mobile, for example, and the stage image on desktop. Therefore always check the LCP value separately for mobile and desktop views.