Core Web Vitals: How Images Affect LCP and CLS (and How to Fix Them)
When a page feels slow, the culprit is often one big image near the top. Core Web Vitals give you numbers for that, and image fixes usually move them more than almost anything else. This guide explains what is being measured, what slows images down, and how to fix it.
What LCP and CLS measure
Largest Contentful Paint (LCP) is the time it takes for the biggest visible element, very often a hero image, to appear. Google considers an LCP of 2.5 seconds or less good, and above 4 seconds poor.
Cumulative Layout Shift (CLS) measures how much the page jumps around while it loads. A score of 0.1 or less is considered good. Images that arrive without reserved space push text down and are a classic cause of layout shift.
Both are measured on real visitors, and the thresholds apply to most of your visits rather than to a single test, so aim for a comfortable margin.
Why images are the usual cause
Images are large, they are discovered by the browser only after the HTML is read, and they can arrive late. The most common problems are:
- Oversized files. A 3 MB hero takes a long time to download on a phone.
- Old formats. JPG and PNG are heavier than WebP or AVIF for the same quality.
- Late discovery. If the image is set by JavaScript or hidden in a CSS background, the browser finds it later.
- Lazy loading in the wrong place. Telling the browser to wait for the most important image is the opposite of what you want.
- Missing dimensions. Without
widthandheight, the page cannot reserve space, which causes layout shifts.
Find your LCP image first
Run the page in PageSpeed Insights or Lighthouse and open the LCP section, which names the exact element. Chrome DevTools marks it in the Performance panel too. Fix that single image before touching anything else, because improving other pictures will not change the number.
If the LCP element is text rather than an image, image work will not help for that page, and you should look at fonts and server speed instead.
Fixes compared: what to try first
| Fix | Effort | Typical impact |
|---|---|---|
| Resize and compress the LCP image | Low | High, often the biggest single gain |
| Switch to WebP or AVIF | Low to medium | Medium to high |
| Remove lazy loading from the LCP image | Low | Medium |
Add fetchpriority="high" | Low | Medium |
| Serve from a CDN with long caching | Medium | Medium, especially for far-away visitors |
Start at the top of the table. The first three usually take minutes and deliver most of the improvement.
Step by step: fix the LCP image
- 1Identify the element using PageSpeed Insights or Lighthouse.
- 2Resize it to the largest size it is actually shown at. Resize and Compress does resizing and compression in one step, and the ideal sizes guide lists sensible targets.
- 3Compress it. Compress Image can aim for a target size, for example 200 KB for a hero. A 3 MB picture brought down to 200 KB can change the score dramatically.
- 4Use a modern format. Convert with PNG to WebP or JPG to WebP, and keep a fallback. The WebP switch guide shows how.
- 5Make sure it is in the HTML as an
imgelement, so the browser finds it early. - 6Remove
loading="lazy"from it and addfetchpriority="high". - 7Retest and confirm the LCP time dropped.
Step by step: stop layout shifts
- 1Add
widthandheightattributes to every image, or set a CSSaspect-ratio, so the browser reserves the right space before the file arrives. - 2Reserve space for late content such as banners, embeds and ads, using a fixed minimum height.
- 3Avoid inserting content above what the visitor is reading, unless it is a response to their action.
- 4Check the CLS number in PageSpeed Insights or the Core Web Vitals report in Search Console.
Common mistakes
- Lazy loading every image, including the one at the top of the page. See the lazy loading guide.
- Optimising decorative images while ignoring the real LCP element.
- Testing once on a fast office connection. Test on a phone with a slower network too.
- Treating lab scores as final. Real-user data in Search Console can take weeks to reflect changes.
Frequently asked questions
What is a good LCP score?
Google considers an LCP of 2.5 seconds or less good, between 2.5 and 4 seconds in need of improvement, and above 4 seconds poor. These thresholds apply to most real visits, so aim for a comfortable margin.
How do images affect CLS?
When an image loads without reserved space, the content below it jumps down. Adding width and height attributes, or a CSS aspect ratio, lets the browser reserve the right space in advance and prevents the shift.
Should I lazy load all images?
No. Lazy load images below the first screen, but not the main image at the top, because that is usually the LCP element and should load as early as possible.
Does WebP or AVIF improve LCP?
Often yes, because smaller files download faster. The biggest gains still come from resizing and compressing the LCP image, so do that first and then consider a modern format.
Why did my score not change after I optimised images?
You may have optimised an image that is not the LCP element, or real-user data has not updated yet. Identify the exact LCP element, and remember that field data in Search Console can take weeks to reflect changes.