How to Improve Largest Contentful Paint (LCP)
Find what slows down your main content and fix it step by step: server, images and render-blocking files.
Largest Contentful Paint (LCP) measures how long it takes for the largest visible element β usually a hero image, a product photo or a large heading β to appear. Google considers 2.5 seconds or less good. It is the Core Web Vital most sites struggle with.
Step 1: Find your LCP element
Run the page through PageSpeed Insights; the diagnostics name the LCP element. In browser developer tools, the Performance panel also marks it. Knowing whether it is an image or text tells you where to focus.
Step 2: Understand the four parts of LCP
- Time to first byte β the server's response time.
- Resource load delay β how long before the browser starts fetching the LCP image.
- Resource load time β how long the image takes to download.
- Render delay β time between download and display, often caused by blocking CSS or scripts.
Fix the biggest part first.
Step 3: Speed up the server
- Use page caching so pages are not rebuilt for every visitor.
- Use a CDN so visitors far from your server get content from nearby.
- Upgrade hosting if the server is consistently slow.
Step 4: Optimise the LCP image
- Compress and resize it to the size it is actually displayed.
- Use modern formats such as WebP or AVIF β see WebP vs JPG.
- Do not lazy-load it. Lazy loading is for images below the fold; the hero image should load immediately.
- Give it high priority with
fetchpriority="high"or a preload hint. - Put it in the HTML, not as a CSS background or an image inserted by JavaScript, so the browser finds it early.
Make sure the image URL responds quickly and does not redirect β check it with the image URL checker.
Step 5: Remove render-blocking resources
- Inline the small amount of CSS needed for the top of the page.
- Defer non-essential JavaScript.
- Limit web fonts and use
font-display: swap. - Remove sliders and carousels at the top of the page β they often delay LCP.
Step 6: Measure with real users
After changes, lab results improve immediately, but field data in Search Console updates over about 28 days. Read how to check website speed for free and how to optimize images for SEO.
A worked example
A German outdoor gear shop had an LCP of 4.8 seconds on mobile. The hero was a five-image slider loaded by JavaScript, each image 1.5 MB. The team replaced the slider with a single static image in WebP, sized for mobile, marked it high priority and removed lazy loading from it. Mobile LCP dropped to about 2.2 seconds.
Quick wins to try first
- Replace a hero slider with one static image.
- Serve a smaller hero image to phones.
- Remove lazy loading from the top image.
- Turn on page caching.
- Remove one unused third-party script.
These usually take less than a day and often bring the largest improvement for the least effort.
Related guides
More free tools: browse all our free utility tools, no sign-up needed.
Frequently asked questions
What is a good LCP score?
2.5 seconds or less for at least 75% of page visits.
Can text be the LCP element?
Yes. Then fonts and render-blocking CSS usually matter most.
Should I lazy-load all images?
No. Lazy-load images below the fold, but never the main image at the top.
How long until Search Console shows improvement?
Field data covers about 28 days, so expect several weeks.