Largest Contentful Paint: What it Is + 13 Steps to Improve It

6 Steps to Get AI to Recommend Your Brand

AI Keyword Ideas in Seconds

Instant keyword ideas built for today’s search.
Largest Contentful Paint (LCP) is one of Google’s three Core Web Vitals.

Like the other two (Cumulative Layout Shift and Interaction to Next Paint), it’s not exactly clear what it means.

Lots of tools can show your LCP score and outline ways to improve it. But their tips are often generic, and lack the detail you need to actually take action.

So, in this guide I’ll walk you through actionable steps to improve your LCP. I’ll separate them by:

But first, let’s talk about what LCP actually means for your website (jump to this part for the fixes).

What Does Largest Contentful Paint Even Mean?

Largest Contentful Paint measures how long it takes for the main content of your webpage to appear on your user’s screen—whether that’s a hero image, heading, or block of text.

It’s not the most intuitive phrase, so let’s break it down word by word:

For example, imagine clicking a link to read a news article.

The page might load various elements quickly, like the header menu at the top and placeholders for ads.

But if the article text takes five seconds to show up, that’s a poor experience. That delay is what LCP measures.

When you think about LCP, think about your visitors. It’s the difference between someone seeing your main product image or headline right away versus waiting and possibly leaving.

A faster LCP generally means a better user experience. And a better experience means happier visitors who trust your site and want to hang around (and potentially buy from you).

What Is a Good LCP Score?

Google provides three scoring ranges for LCP:

These benchmarks serve as useful guidelines, but your users’ actual experience matters most.

A visually rich photography portfolio might take longer to load but still satisfy visitors. Meanwhile, a simple text-based article that loads in three seconds might frustrate users who expect instant access.

So, focus on your audience’s expectations and behavior. Check your analytics to see if slower LCP correlates with higher [bounce rates](/content/hub/seo/bounce-rate "Bounce Rate: What Is It and How to Improve It?"/index.html) or lower [conversion rates](/content/conversion-rate-optimization "Conversion Rate Optimization: The Definitive Guide"/index.html).

These numbers tell you more about your site’s real performance than any benchmark can.

How to Measure Your LCP Score

There are lots of tools you can use to measure your LCP. But you don’t want to just get your score.

You also want to learn these two things:

Finding these two pieces of information is key for prioritizing which methods you should use to improve your LCP.

LCP is made up of four stages:

  1. Time to First Byte (TTFB)
  2. Resource load delay
  3. Resource load time
  4. Element render delay

Each stage is affected by different factors (and methods of optimization). So, if you can identify which stages of your LCP are taking the longest, you can prioritize your fixes accordingly.
Here are two ways to find this information.

Google PageSpeed Insights

Google’s PageSpeed Insights (PSI) is a popular choice if you want a simple, web-based report.

Just plug in your URL, and you’ll get a quick overview of your [Core Web Vitals](/content/hub/seo/core-web-vitals "Core Web Vitals: Essential Guide to Better Site Performance"/index.html), including LCP.

PSI is great if you’re not a big fan of digging around in complex dashboards. It gives you clear visuals and actionable tips without much fuss.

It also has a handy diagnostics section which tells you some of the main ways you can reduce your score. Just make sure you select the “ LCP” option next to “Show audits relevant to.”

Click the “ Largest Contentful Paint element” option to see which element on that page is the LCP element.

It also shows you the breakdown (as a percentage) of each stage of your LCP. From the example above, you can see the vast majority (88%) of our LCP time comes from the render delay stage.

Knowing this lets us focus our efforts on the methods in the next section that specifically help reduce that stage of the LCP score.

How to Improve Your LCP

You can improve your LCP in several ways, and some methods will help you more than others.

The table below sorts the methods by impact, also indicating the effort level each one requires and which stage of your LCP it’ll help reduce.

Method Impact Helps Reduce
Use a CDN High Resource Load Time
Optimize Your Images High Resource Load Time
Use WordPress Plugins High Potentially all stages
Implement Caching High Time to First Byte
Use a Faster Host High Time to First Byte
Minify Your Code Medium Resource Load Time
Optimize Your Fonts Medium Resource Load Time
Avoid Lazy Loading Above the Fold Medium Resource Load Delay
Remove Elements You Don’t Need Medium Element Render Delay
Use Defer/Async for JS Medium Element Render Delay
Inline Critical CSS Medium Element Render Delay
Switch to SSR Medium Element Render Delay
Preload Important Resources Medium Resource Load Delay

These values are all relative.
Your own skill level, your website’s setup, and your budget will affect how easy or cost-effective these changes are for you.

Use a CDN

Impact: High | Effort: Low | Helps Reduce: Resource Load Time
A Content Delivery Network (CDN) stores (cached) copies of your content across servers around the world. When people visit your site, they’re served files from the closest server to them.

If you’re running a small local blog, you might not absolutely need a CDN. But if you have visitors from all over, a CDN can boost your LCP by reducing the travel time for your data.

Optimize Your Images

Impact: High | Effort: Medium | Helps Reduce: Resource Load Time
Large image files are a common reason for poor LCP scores.

By compressing images before uploading them, you reduce their file size to make them load faster.

To do this in bulk, you can also use a tool like TinyPNG.

Use WordPress Plugins

Impact: High | Effort: Low | Helps Reduce: Potentially all stages
For many WordPress users, plugins are the easiest way to speed up your site and fix LCP issues with minimal effort.
One example is WP Rocket.

Implement Caching

Impact: High | Effort: Low | Helps Reduce: Time to First Byte
Caching stores parts of your site on your user’s browser so it doesn’t have to request them from scratch every time they visit the site.

Use a Faster Web Host

Impact: High | Effort: Low | Helps Reduce: Time to First Byte
Switching to a more powerful hosting plan or provider can make a big difference in how quickly your site’s main content loads.

Minify Your Code

Impact: Medium | Effort: Low | Helps Reduce: Resource Load Time
Minifying code involves stripping out anything “unnecessary,” like extra spaces or new lines, from your site’s HTML, CSS, and JavaScript files. This makes them smaller and faster to load.

Optimize Your Fonts

Impact: Medium | Effort: Medium | Helps Reduce: Resource Load Time
Fancy fonts can look great, but they can also slow down your page.

Avoid Lazy Loading Above the Fold

Impact: Medium | Effort: Low | Helps Reduce: Resource Load Delay
Lazy loading is a feature that only loads images when you scroll down to them.

Remove Elements You Don’t Need

Impact: Medium | Effort: Medium | Helps Reduce: Element Render Delay
Every script, image, or widget on your site adds to the time it takes for your page to fully load.

Use Defer/Async for JS

Impact: Medium | Effort: Medium | Helps Reduce: Element Render Delay
JavaScript files can block the rendering of your page if they load first.

Inline Critical CSS

Impact: Medium | Effort: High | Helps Reduce: Element Render Delay
Inlining CSS means putting small blocks of CSS code right into your HTML, so your page doesn’t need to fetch a separate file for that part.

Switch to SSR

Impact: Medium | Effort: High | Helps Reduce: Element Render Delay
CSR (Client-Side Rendering) means your user’s browser does a lot of the work to build the page.

Preload Important Resources

Impact: Medium | Effort: Medium | Helps Reduce: Resource Load Delay
Preloading tells the browser which files it should grab or prepare in advance.

Boost Your Rankings by Improving Your Page Experience

Improving your LCP is one way to boost your overall page experience for users.
In turn, this can actually end up having an impact on your rankings beyond Google’s page experience signals.