How to Fix Largest Contentful Paint (LCP): 4 Fixes That Work

Largest Contentful Paint (LCP) measures how long the biggest piece of content on your page takes to appear. A slow LCP makes a page feel slow, even when everything else works. This guide shows you how to fix it, using advice straight from Google’s own documentation.

You will learn how to find your LCP element, how to split the delay into four parts, and which fix matches each part. A short worked example and a checklist close the guide.

TL;DR

LCP should be 2.5 seconds or less for most visitors. First, find the element that counts as your LCP. Next, split the time into four parts. Then fix the biggest part first: a slow server, a late image request, a heavy image file, or blocked rendering.

⚡ Key Takeaways

Google’s target for a good LCP is 2.5 seconds or less, measured at the 75th percentile of page loads.
Find the LCP element before you change anything. On most pages it is a hero image or a large heading.
LCP time has four parts: server response, load delay, load duration and render delay. Each has its own fix.
Add fetchpriority="high" to the LCP image, and never lazy-load it.
Smaller image files help only if rendering is not blocked by CSS, scripts or fonts.

What Is Largest Contentful Paint?

LCP reports when the largest image, text block or video in the visible screen area finishes rendering. The clock starts when the visitor begins to load the page. Also, Google asks site owners to aim for an LCP of 2.5 seconds or less.

That target is checked at the 75th percentile of page loads, split across mobile and desktop. In plain words, three out of four visits should be that fast.

However, only some elements can be the LCP element. According to Google’s documentation, these are the types that count:

Image elements (<img>).
Image elements inside an SVG.
Video elements, using the poster image or the first frame, whichever comes first.
Elements with a CSS background image loaded through url().
Block-level elements that contain text.

LCP is one of three metrics in the Core Web Vitals, next to INP for responsiveness and CLS for layout shifts. This guide covers LCP only.

Step 1: Find Your Largest Contentful Paint Element

Do not guess which element is slow. Instead, run the page in PageSpeed Insights, or record a page load in Chrome DevTools. Both tools name the LCP element for you. Test mobile first, because phones usually score worse than desktops.

Next, look at field data if your site has enough visits. PageSpeed Insights shows real-user results from the Chrome UX Report beside the lab test. Lab tests and real visits can differ, so use both.

Step 2: Split Largest Contentful Paint Into Four Parts

First, know that Google breaks LCP into four parts. They do not overlap and they leave no gaps, so together they add up to your total LCP time.

Part	What it measures	Share of LCP (Google’s guide)
Time to first byte (TTFB)	Time until the first byte of the HTML arrives	About 40%
Resource load delay	Wait between the first byte and the moment the browser starts loading the LCP resource	Under 10%
Resource load duration	Time to download the LCP resource itself	About 40%
Element render delay	Time between the resource finishing and the element showing on screen	Under 10%

Diagram of the four parts of Largest Contentful Paint: time to first byte about 40 percent, resource load delay under 10 percent, resource load duration about 40 percent and element render delay under 10 percent — The four LCP parts and the shares Google suggests. Google calls these guidelines, not strict rules.

Google says these shares are guidelines, not strict rules. If your LCP is already under 2.5 seconds, the split hardly matters. If it is not, compare your own numbers with the table. The part that is far above its share is the one to fix first.

Both delay parts should be close to zero. However, the two network parts take real time, so work on them after the delays are gone.

Fix 1: Cut Your Time to First Byte

A slow server response holds back everything that follows. For this part, Google’s guide says most sites should aim for a TTFB of 0.8 seconds or less. Values above 1.8 seconds are poor.

These steps usually help:

Cache full pages, so the server does not rebuild them on every visit.
Use a content delivery network (CDN), so files travel a shorter distance to the visitor.
Send ready-made HTML from the server instead of building the page in the browser.
Move to faster hosting, or fix slow database queries, if the server itself is the bottleneck.

A CDN pays off most for images. Google notes that image CDNs also shrink files automatically, which helps the next fixes as well.

Fix 2: Make the LCP Image Easy to Find

The browser can start loading your hero image early only if it sees the image in the first HTML. For example, Google’s guide says this works when the LCP element is an <img> tag with its src or srcset in the page source. A CSS background image works only if you preload it.

Common causes of a late start are images added by JavaScript, sliders that build their slides in the browser, and hero banners set as CSS backgrounds.

<img src="/images/hero.webp" alt="Describe the image" width="1200" height="600" fetchpriority="high">

Add fetchpriority="high" to the LCP image, as in the snippet above. It tells the browser to fetch that image before less important files. Google’s Fetch Priority guide lists this as a main use of the attribute.

Want to load your (LCP) hero image sooner?

Try <img fetchpriority=high> to boost its priority. Now used in production by Google Store, eBay, Etsy, Yahoo.
— Addy Osmani (@addyosmani) October 15, 2022

Never lazy-load the LCP image. Google warns that loading="lazy" makes the browser wait until layout is done, which always adds delay.

In a carousel, give the first slide high priority and the other slides low priority. Google’s guide uses this exact pattern, because slides outside the screen should not compete with the first one.

Fix 3: Shrink the LCP Image

A smaller file downloads faster. So, compress the image, use a modern format such as WebP or AVIF, and serve a size that fits the screen with srcset. An image CDN can do much of this for you.

Google adds one warning here. If rendering is still blocked, a smaller file does not improve LCP, because the saved time simply moves into the render delay. That is why the next fix matters.

Fix 4: Remove What Blocks Rendering

Sometimes the image has loaded, yet nothing shows. Usually, the causes are CSS and scripts in the page head, web fonts that hide text, and pages that need JavaScript to build their content.

Finding and removing render-blocking resources often gives the quickest win in this part.

If your LCP element is text, set font-display to a value other than auto or block. Text then stays visible while the font loads, so LCP does not wait for the font request, according to Google.

Server-side rendering also helps. As a result, the browser receives full HTML instead of an empty shell that scripts must fill.

Quick Wins for WordPress Sites

Recent WordPress versions already do part of the work. The WordPress team added automatic fetchpriority="high" for the likely LCP image in version 6.3. The team said this typically improves LCP by 5 to 10 percent. The same release finished fixes that stop in-view images from being lazy-loaded.

Still, check your own pages. For instance, a theme or a plugin can undo these defaults, for example by lazy-loading the hero image. Look at the page source and confirm that the hero image has no loading="lazy" attribute.

A longer routine for the whole site is in this WordPress performance checklist.

Worked Example (Made-Up Numbers)

Here is an invented example to show the method. First, a small shop has an LCP of 4.2 seconds on mobile. Splitting it into the four parts shows where the time goes. These numbers are made up to show the method. Your own results will differ.

Part	Before	Cause	Fix	After
TTFB	1.3 s	No page cache	Turn on page caching	0.7 s
Resource load delay	0.9 s	Hero set as a CSS background	Use an img tag with fetchpriority high	0.1 s
Resource load duration	1.4 s	Large JPEG file	WebP file sized for the screen	0.8 s
Element render delay	0.6 s	Blocking CSS and a hidden font	Defer extra CSS and set font-display	0.2 s
Total LCP	4.2 s			1.8 s

Does Largest Contentful Paint Affect Google Rankings?

Google says it highly recommends good Core Web Vitals for success with Search. It adds that these signals align with what its core ranking systems seek to reward.

Even so, a fast LCP will not rescue weak content. Instead, treat it as removing a handicap, and treat technical SEO as the base that good content stands on.

LCP Fix Checklist

Find the LCP element in PageSpeed Insights or Chrome DevTools, on mobile first.
Write down the four LCP parts and spot the biggest one.
Cache pages and use a CDN to bring TTFB toward 0.8 seconds.
Make sure the LCP image is an <img> in the HTML, not added later by scripts.
Add fetchpriority="high" and remove any lazy loading from that image.
Compress and resize the image, then clear render-blocking CSS, scripts and fonts.
Test again, and compare field data after a few weeks.

Conclusion

Fixing LCP is a matter of finding the slow part, not of trying every tip. Then split the time into four parts, fix the largest one, and test again. Most pages gain the most from a faster server response, an early image request and clear rendering.

Check LCP after every big design change or new plugin. That is because small additions often undo careful work. For ongoing upkeep, regular updates and speed checks are part of WordPress support and maintenance.

Frequently Asked Questions About Largest Contentful Paint

What is a good Largest Contentful Paint score?

Google recommends an LCP of 2.5 seconds or less. It checks this at the 75th percentile of page loads, across mobile and desktop.

Which elements can be the LCP element?

Images, images inside SVG, video posters, elements with a CSS background image, and block-level text elements can all count. The largest one in the visible area wins.

Does LCP affect Google rankings?

Google says good Core Web Vitals align with what its core ranking systems seek to reward. However, it is one signal among many, so it works best alongside strong content.

Why is my LCP worse on mobile than on desktop?

Phones often have slower connections and less processing power. Also, the visible area is different, so the LCP element may change. Always test mobile on its own.

How often should I check my LCP?

Test after any design change, new plugin or hosting move. Then review the Core Web Vitals report in Search Console from time to time, because it uses real visits.