What Is LCP (Largest Contentful Paint) and How Do You Improve It?
Largest Contentful Paint — LCP for short — is one of Google’s Core Web Vitals, and it measures how quickly the largest visible element on your page loads. That element is usually a hero image, a large block of text, or a video thumbnail. Google considers an LCP of 2.5 seconds or under to be “good”, between 2.5 and 4 seconds “needs improvement”, and anything above 4 seconds “poor”.
Why does it matter for SEO? Since 2021, Core Web Vitals — including LCP — have been a confirmed Google ranking signal. A slow LCP tells Google that visitors are waiting too long for your page to feel usable, which can push you down the search results. Improving it not only helps rankings but also reduces bounce rates, because real visitors are less likely to leave before your content appears.
What Causes a Poor LCP Score?
The most common culprits are unoptimised images, slow server response times, render-blocking JavaScript and CSS, and lack of a content delivery network (CDN). If your hero image is a 3 MB PNG that your server has to compress on the fly, visitors on mobile connections will see a blank or partial page for several seconds before anything meaningful appears.
Another frequent cause is web fonts loaded with a blocking “display: swap” that hasn’t been set, causing the browser to wait for the font file before rendering any text. Even a well-optimised image can be undermined if the server itself is slow to respond — a Time to First Byte (TTFB) above 600 ms almost always contributes to a poor LCP.
Practical Ways to Improve Your LCP
Start with your images. Convert hero images to WebP or AVIF format, which are typically 30–50% smaller than JPEG at the same quality. Add the “loading=”eager”” attribute to your LCP image and, crucially, add a preload link tag in your HTML <head> so the browser discovers and fetches it as early as possible. Use “srcset” to serve mobile-appropriate sizes rather than scaling a desktop image down in CSS.
On the server side, enable HTTP/2, use a caching layer (such as Redis or a page caching plugin if you’re on WordPress), and consider upgrading to a faster hosting plan or moving to a CDN-fronted stack. For JavaScript, defer non-critical scripts and eliminate any CSS that blocks the initial render. Tools like Google PageSpeed Insights and Lighthouse will highlight exactly which resources are delaying your LCP element.
How to Measure LCP
You can measure LCP in several ways. Google Search Console’s Core Web Vitals report gives you field data — real measurements from actual visitors using Chrome — split by mobile and desktop. Google PageSpeed Insights combines that field data with a lab test run on the moment you check. For developers, Chrome DevTools’ Performance panel highlights the LCP element directly so you know exactly what’s being measured.
Aim to check your LCP score on both mobile and desktop, as they often differ significantly. A page that scores well on a fast broadband connection can perform poorly on a mid-range mobile device on 4G. Focus your improvements on mobile first, since that’s where Google primarily measures your site’s performance for ranking purposes.
Common questions.
What is a good LCP score for SEO?
Does LCP directly affect my Google rankings?
What element does Google use to measure LCP?
More on web design & ux.
Want a hand putting this into practice?
Book a free, no-obligation consultation with a Norwich-based specialist.
Let's put your business in a better light.
Book a free, no-pressure consultation. We'll talk through your goals and tell you honestly what we'd do — whether you work with us or not.