What is Largest Contentful Paint & How to Optimise It?

Over the years, I’ve seen more websites fail Core Web Vitals because of one issue than anything else: a poor Largest Contentful Paint score.

It’s the metric that catches businesses off guard, especially after a website redesign, because it affects how fast a page feels to load far more than people realise.

Largest Contentful Paint (LCP) measures how long it takes for the most visually important element on a page, usually a large image or heading to fully appear, and a good score is 2.5 seconds or faster.

Put simply, if that main element is slow to load, your page feels slow, your Core Web Vitals will fail, and your visitors are far more likely to abandon the page altogether.

I’ve experienced this repeatedly with clients who cannot understand why their sites “look fine” but still suffer speed penalties, and almost always, LCP is the culprit.

This article explains exactly what LCP is, what causes it to perform badly, and most importantly, how I optimise it in the real world.

Key Takeaways

• Largest Contentful Paint (LCP) measures how quickly the key content on a webpage becomes visible to the user.
• A “good” LCP score is 2.5 seconds or faster. Anything slower affects user experience and risks failing Core Web Vitals.
• Images, server response time, render-blocking scripts, and slow-loading fonts are the most common causes of poor LCP.
• LCP elements are typically hero images, large images above the fold, or a main headline block of text.
• Real-world (CrUX) field data matters more than lab data when evaluating LCP performance.
• Optimising LCP requires improving server speed, prioritising key images, reducing render-blocking resources, and using efficient image formats.
• Pagespeed Insights and Chrome DevTools allow you to identify the exact element acting as LCP and what is delaying it.
• LCP directly affects both Core Web Vitals and Lighthouse performance scores.
• Small changes such as switching to WebP, preloading hero images, or removing lazy loading above the fold can dramatically improve LCP.
• Fixing LCP improves user experience, increases conversions, and boosts search performance.

What is LCP (Largest Contentful Paint)?

Largest Contentful Paint is one of Google’s Core Web Vitals and measures how long it takes for the main piece of visible content on a webpage to fully render.

When someone loads your site, they’re not waiting for hidden scripts, tracking pixels, or cookie banners to execute; they’re waiting for the main, meaningful content they came for.

LCP tracks exactly that.

In my own work, I find most people misunderstand LCP because they assume it measures the entire page load – it doesn’t!

Instead, it tracks the moment when the largest visible content element (usually the hero image, featured image, or main heading) becomes fully visible in the viewport.

It’s essentially Google’s way of measuring perceived load speed, and in my experience, it’s the metric users feel the most.

What Elements are Considered for LCP?

Only elements within the initial viewport (the visible screen area “above the fold” before scrolling) can be considered LCP candidates.

These include:

• Large hero images
• Large inline images
• Background images loaded through CSS
• Text blocks such as large H1 headings
• Poster images for video elements

Over time during a page load, different elements may register as the “largest”, which means Google may update the LCP candidate until the final one is painted.

From experience, the biggest issue occurs when an initial text block registers first, then a large image loads later and becomes the new LCP, resulting in a much slower final score.

This happens surprisingly often on poorly optimised sites.

What is a Good LCP Score?

Google’s recommended thresholds are:

• Good: 2.5 seconds or less
• Needs improvement: Between 2.5 and 4 seconds
• Poor: Above 4 seconds

A “good” score means users see the main content quickly enough to stay engaged, which has a direct impact on bounce rates, retention, and rankings.

In practice, I aim for well below 2 seconds on mobile because mobile devices tend to struggle with slower networks and weaker hardware.

What Causes a Poor LCP?

In my experience, LCP problems usually fall into a few categories:

Slow Server Response Time

Even a perfectly optimised image cannot load quickly if the server responds slowly.

High TTFB (Time to First Byte) delays everything that follows.

Unoptimised Hero Images

The number one cause I see is a large hero image that is far too big, sometimes several megabytes, or in the wrong format.

Render-Blocking Resources

CSS and JavaScript that must load before the page paints can delay the actual content from appearing.

Lazy Loading Above the Fold

This is a common mistake.

If you lazy load the hero image, you are telling the browser to deprioritise it which kills LCP instantly.

Font Loading Delays

If the LCP element contains text, slow-loading web fonts can delay the first render.

Client-Side Rendering

Frameworks that rely heavily on JavaScript often delay LCP because nothing meaningful renders until scripts execute.

Every time I diagnose a site with slow LCP, it always comes back to one or more of the issues above.

How are Element Sizes Calculated?

Google determines the “largest” element based on the element’s visible size within the viewport, not its actual file size.

For example:

• If a huge image is displayed as a small thumbnail, it will not be the LCP.
• If a medium-sized image stretches across the top of the page, it may become LCP.
• If a large heading is the most visually dominant element, it can be LCP.

CSS properties like scaling, cropping, and padding affect the visible size.

Google cares only about what the user sees, not what is stored on the server.

How to Check Your Website’s LCP Score

Google Pagespeed Insights

This is usually my first port of call.

Pagespeed Insights provides:

• Real user field data (from the Chrome User Experience Report)
• Lab data (simulated load tests)
• Identification of the exact LCP element
• Diagnostics showing what is slowing it down

Field data is the most important because it reflects real-world performance across actual devices.

Lab data helps diagnose repeatable issues during development.

Chrome DevTools CrUX LCP

For deeper investigation, I use Chrome DevTools:

• Open DevTools
• Go to “Performance”
• Record a page load
• Look for the “LCP” marker

This tells me exactly when the element rendered and what events delayed it.

It also shows the specific element highlighted in the DOM, which makes troubleshooting much easier.

DevTools is also excellent for identifying whether fonts, scripts, or third-party requests are causing delays.

How to Optimise Largest Contentful Paint

Based on years of doing this, these are the most effective and reliable techniques.

Identify Elements Affecting LCP

Start by identifying the actual LCP element, not what you think it is.

I’ve seen businesses optimise the wrong image because they assumed it was causing the delay.

Pagespeed Insights and Chrome DevTools clearly show the exact element.

Once you know what it is, you can optimise the correct thing.

Identify What’s Blocking LCP

Sometimes the LCP element is fine – it’s everything around it that is the problem.

Look for:

• Slow server response
• Heavy CSS
• Excessive JavaScript
• Third-party scripts
• Layout shifts
• Blocking fonts

In my experience, even a minor delay in server response can add hundreds of milliseconds to LCP.

Optimise Your Server’s Response Time

Server speed has a huge impact on LCP.

Switching from low-cost shared hosting to a modern solution can shave a full second off TTFB.

I usually recommend:

• High-performance hosting optimised for WordPress or your CMS
• Server-side caching
• Full page caching
• Upgraded PHP versions
• Cloudflare or similar for global delivery

You cannot fix frontend issues if the server is slow.

Optimise LCP Images

Most LCP issues come from oversized or unoptimised images.

These are the essentials I follow:

• Resize the image to the exact dimensions needed
• Compress aggressively using tools like TinyPNG or Squoosh
• Convert images to modern WebP format
• Avoid loading unnecessary retina versions on desktop
• Preload the LCP image so it is fetched early

Preloading is incredibly effective because it tells the browser the hero image is a priority.

Reduce Render-blocking Resources

Render-blocking CSS and JavaScript are notorious LCP killers.

I often fix this by:

• Inlining critical CSS for the above-the-fold content
• Deferring non-critical CSS
• Removing unused CSS
• Deferring or async-loading JavaScript
• Eliminating unnecessary plugins and libraries

The goal is to allow the browser to paint the page before tackling heavy scripts.

Use a Content Delivery Network (CDN)

A CDN can drastically reduce the time it takes for images and other assets to reach users, especially when your audience is global.

CDNs such as Cloudflare, Fastly, and Bunny.net store cached versions of your assets closer to users geographically, reducing latency and improving LCP.

I consider a CDN essential for any modern website.

Does LCP Affect Lighthouse Scores?

Yes, very directly.

LCP is one of the key metrics that determines your overall performance score in Lighthouse.

A poor LCP score can drag your entire performance score down, even if everything else is optimised.

I’ve seen sites jump from a score of 40 to over 90 simply by fixing one slow hero image.

LCP also feeds into Core Web Vitals, which influence search rankings. So it matters both for user experience and SEO.

LCP Optimisation Quick Wins

These are the quick fixes I rely on during audits and redesigns:

Optimise Image Sizes

Many hero images are 3-5 times larger than necessary.

Resizing them to the correct dimensions can dramatically improve LCP.

Use Modern Image Formats

WebP and AVIF format images load far faster than JPEG or PNG.

Switching alone can reduce load times in half.

Eliminate Chain Requests

If your hero image depends on other files loading first (for example, CSS or JavaScript), its load time will always be slower.

Use “FetchPriority=High” on Key Images

This attribute signals to the browser that the LCP image must load early.

I use it frequently, especially on hero images.

Don’t Lazy Load Images Above the Viewport

Lazy loading is great for images further down the page, but never for the one acting as LCP.

Doing so delays the image intentionally, which almost guarantees a poor score.

Closing Remarks

I’ve spent years optimising websites for speed, and if there is one Core Web Vital that consistently makes or breaks user experience, it’s Largest Contentful Paint.

It’s the metric that tells users, “Yes, the page is loading,” or “No, something’s wrong.”

Once you understand what affects LCP and how to fix it, improving your score becomes far less intimidating.

In many cases, a handful of focused changes can transform your performance completely.

Whether you’re preparing for a site rebuild, improving your Core Web Vitals, or simply trying to make your site feel faster, mastering LCP is one of the most valuable technical skills you can learn.