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:
- Their potential impact
- The effort required to make the fix
- Which specific aspect of your LCP score they help with
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:
- Largest: The biggest piece of visible content on the screen. This could be a large image, a big headline, or any major element that stands out.
- Contentful: It’s something that has actual content—like text or an image—and isn’t just a background or frame.
- Paint: This refers to how your browser “draws” (or renders) that element on your screen.
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:
- Good: 2.5 seconds or faster
- Needs Improvement: 2.5 to 4 seconds
- Poor: Longer than 4 seconds
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:
- What your LCP element is
- Which stage of your LCP is longest
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:
- Time to First Byte (TTFB)
- Resource load delay
- Resource load time
- 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.