What Is Largest Contentful Paint (LCP) and How Do You Fix It?
Largest Contentful Paint, or LCP, is one of Google’s Core Web Vitals — the set of performance metrics that directly influence your search rankings. It measures the time from when a user first navigates to a page to when the largest visible content element in the viewport has finished rendering.
In plain terms, LCP is a measure of how quickly a user can see the main content of your page. A fast LCP reassures users that the page is loading; a slow one causes frustration and increases the likelihood they’ll leave before the page finishes. Google considers an LCP of 2.5 seconds or less to be good.
What Counts as the Largest Contentful Paint Element?
The LCP element is typically the largest image or block of text that’s visible in the viewport when the page first loads. This is most commonly a hero image, a large banner, or a prominent heading. The browser continuously updates the LCP candidate as the page loads, settling on the final element once the user first interacts with the page.
Common LCP elements include `<img>` tags, background images applied via CSS, `<video>` poster images, and large blocks of text inside elements like `<p>` or `<h1>`. If your hero image is your LCP element, it’s the thing you should focus on optimising first.
What Causes a Poor LCP Score?
The four main causes of a slow LCP are: slow server response times, render-blocking JavaScript and CSS, slow resource load times (especially large images), and client-side rendering that makes the browser do too much work before anything appears on screen.
If your Time to First Byte (TTFB) is high — meaning the server itself takes a long time to start responding — everything downstream is delayed, including your LCP. Similarly, if you have large JavaScript or CSS files that must be downloaded and parsed before the browser can render the page, your LCP will suffer.
How to Fix a Poor LCP Score
Start with your LCP image. Compress it, convert it to WebP or AVIF, and make sure it’s correctly sized — don’t serve a 2,000-pixel-wide image in a 600-pixel container. Add `fetchpriority="high"` to the image tag and preload it in your document `<head>` with `<link rel="preload" as="image">`. This tells the browser to fetch it as early as possible.
Address your server response time by enabling caching, using a CDN, or upgrading to faster hosting. Eliminate render-blocking resources by deferring non-critical JavaScript and inlining critical CSS. If your site uses a WordPress page builder, consider switching to a lighter theme or a performance-optimised builder — many popular builders generate excessive JavaScript that delays LCP significantly.
Finally, avoid lazy-loading your LCP element. Lazy loading is excellent for below-the-fold images, but applying it to your hero image will actively hurt your LCP score because the browser will delay fetching it until it’s in the viewport — which it already is.
Common questions.
What is a good LCP score?
How do I find out what my LCP element is?
Can a slow hosting provider cause a poor LCP score?
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.