Let’s start with the basics.
Largest Contentful Paint, or LCP, measures how long it takes for the largest visible element on your page to fully render. That’s usually the main image, a large heading, or some piece of text above the fold.
Now, here’s why it matters: LCP is one of the three Core Web Vitals Google uses to assess your site’s user experience. It’s also one of the first things users notice — if the page feels slow, they’re gone, no matter what’s technically loading in the background.
So, getting LCP under control isn’t just a performance win. It’s a trust-building move.
What Counts as the LCP Element?
Usually, the LCP element is a featured image, a heading, or a large block of text.
But it could also be:
- An <img> element
- An image inside an <svg>
- A background image loaded with CSS
- The first frame of a video
- The first frame of a GIF
Also, anything outside the viewport doesn’t count. If an image fills the viewport entirely, it’s excluded too. Strange, but that’s how the metric works.
What’s a “Good” LCP Score?
Here’s the target: get your LCP time under 2.5 seconds for at least 75% of visits.
This benchmark comes from real-world Chrome data — the Chrome User Experience Report (CrUX).
Next, let’s break down the categories:
- Good: ≤ 2.5 seconds
- Needs Improvement: > 2.5s and ≤ 4s
- Poor: > 4 seconds
Also, as of April 2023, about 57% of websites hit the “good” mark. Still, it’s worth noting — mobile pages often underperform compared to desktop. Why? Slower connections, limited bandwidth, and device performance all play a part.
How to Measure LCP
To get accurate data, you’ll want to look at two sources: field data and lab data. Field data comes from CrUX — real users on real networks. Google uses this to grade your site’s Core Web Vitals.
At the same time, lab data, which tools like Lighthouse generate, lets you test changes instantly in a controlled environment.
Also, lab data is great for debugging. But remember — it won’t match what Google uses for ranking.
Measuring a Single Page
Start with PageSpeed Insights. It shows both field and lab data, highlights the LCP element, and gives performance tips. You’ll also see how your page compares to others on your domain.
Measuring Multiple Pages or Templates
Head over to Google Search Console. There, you’ll find CrUX data grouped by page type. Click into a report, and you’ll see clusters of pages using the same layout. Fix the template, and you fix every page in the group.
Still, if you want broader visibility — both lab and field data — use the PageSpeed Insights API with a tool like Ahrefs’ Site Audit. It’s free for verified sites, and it scales well.
How to Improve Your LCP
Improving LCP means getting the most important visual content on-screen, fast. That sounds easy, but browser behavior, file dependencies, and third-party scripts can get in the way.
Still, there’s a clear path forward. Let’s walk through it.
Identify Your LCP Element
First, go to PageSpeed Insights. In the diagnostics section, it will call out the specific element responsible for your LCP timing. This is your starting point.
Usually, it’s your hero image, H1, or a block of above-the-fold content.
Prioritize Important Resources
If users see it right away, it should load right away. That means rearranging the order of what gets downloaded and rendered.
Images
Start by asking, “Do I need this image at all?” If not, delete it. If yes, make it smaller. Compress it. Serve it in modern formats like WebP.
Next, preload it:
<link rel=”preload” as=”image” href=”hero.jpg” imagesrcset=”hero_400.jpg 400w, hero_800.jpg 800w” imagesizes=”100vw”>
Then, add this for faster fetching:
<img src=”hero.jpg” fetchpriority=”high” alt=”Hero image”>
Also, use loading=”lazy” for images further down the page — but never for above-the-fold images.
CSS
Minify it. Remove what you don’t need. Then, inline just the styles required to load above-the-fold content.
For the rest, defer it:
<link rel=”preload” href=”styles.css” as=”style” onload=”this.rel=’stylesheet'”>
Fonts
Fonts can delay rendering — unless you manage them correctly. Preload them, and host them on your own server if you can.
Also, use font-display: optional to avoid blocking rendering. Or, better yet, use system fonts. No loading required.
JavaScript
First, remove anything not critical. Then, inline or preload scripts tied to above-the-fold content.
Use defer or async for everything else:
<script src=”script.js” defer></script>
Also, avoid chaining scripts that depend on each other. That’s a common LCP killer.
Shrink and Compress Files
Next, reduce what your users have to download. Smaller files mean faster loads.
Use tree shaking to remove unused JavaScript. Compress CSS, JavaScript, HTML, and images — with Brotli or Gzip.
Also, WordPress users — tools like WP Rocket can handle most of this for you.
Use a CDN
When your server is far from your users, requests take longer. A CDN puts your site’s assets closer to where your users actually are. This shortens round-trip times, reduces latency, and improves consistency across locations.
Also, CDNs often come with built-in caching and compression features — bonus points.
Host Resources Locally
Every third-party request — fonts, scripts, styles — introduces connection overhead. It takes time to initiate, handshake, and start downloading.
If you can, serve assets from your own domain. If not, at least help the browser get a head start:
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”dns-prefetch” href=”https://fonts.googleapis.com”>
Also, avoid chaining multiple third-party domains. Each one adds delay.
Cache Everything You Can
Caching improves repeat visits — but it can also help with first visits via CDNs. Set far-future expiration headers for static content. Purge only when you change something.
Also, make sure your HTML is cacheable too — especially if you’re using a CMS that allows it.
Explore Advanced Tactics
If you’ve already nailed the basics, here are a few extras worth considering:
- Speculative Prerendering – Preloads likely next pages
- Signed Exchanges (SXG) – Serves preloaded content from Google’s cache
- HTTP/3 – Speeds up requests and improves reliability over modern networks
These aren’t critical, but they can push your performance even further.
Final Thoughts
LCP isn’t perfect, but it’s the closest we have to measuring when real content shows up for real users.
It’s not about chasing a number — it’s about loading the thing your user cares about, fast. First impressions matter, and this is one of the few metrics that captures that moment clearly.
So, focus on what loads first. Shrink it. Prioritize it. Cache it. And always test like a user, not just a developer.
