Since 2021, Google has used Core Web Vitals as an official ranking factor. These metrics measure the real user experience when loading your page — and images are the factor that affects them most. If your site has a poor PageSpeed score, images are probably the main cause.
Core Web Vitals are three metrics defined by Google to measure the quality of user experience on a web page:
| Metric | Good | Needs improvement | Poor |
|---|---|---|---|
| LCP | < 2.5s | 2.5–4s | > 4s |
| CLS | < 0.1 | 0.1–0.25 | > 0.25 |
| INP | < 200ms | 200–500ms | > 500ms |
LCP measures how long it takes for the largest element on the page to appear — and on most pages that element is an image (the hero, the main banner, or the featured image of an article).
The most common causes of poor LCP related to images:
1. Compress and convert to WebP: Always the first step. A hero image at 2 MB should drop below 200 KB.
Reduce image weight by up to 90% in seconds, directly in your browser.
⚡ Compress for free2. Use fetchpriority="high" on the hero:
<img src="hero.webp" alt="..." fetchpriority="high" />3. Add a preload in the head for the hero:
<link rel="preload" as="image" href="hero.webp" />4. Never use loading="lazy" on the hero image. Lazy loading is for images outside the initial viewport, not the main one.
CLS measures how much content moves unexpectedly while the page loads. When an image loads without the browser knowing its size in advance, it pushes text downward — that jump is CLS.
The solution is simple: always define width and height on your images. The browser reserves the space before the image loads.
<!-- BAD: browser doesn't know the space it occupies -->
<img src="product.webp" alt="Product" />
<!-- GOOD: browser reserves the exact space -->
<img src="product.webp" alt="Product" width="800" height="600" />Tip: In WordPress, since version 5.5, automatically inserted images include width and height. For older images without these attributes, the Image Attributes Pro plugin can add them in bulk.
INP (successor to FID since March 2024) measures how responsive the page is to user interactions. Images can affect it indirectly:
Go to pagespeed.web.dev and enter your URL. In the "Opportunities" section you'll see exactly which images are causing problems and how much time you could save.
Open DevTools → Lighthouse tab → run an analysis. In "Diagnostics" you'll see images without dimensions, incorrect lazy loading, and unoptimized formats.
webpagetest.org offers more detailed analysis including a load filmstrip and resource waterfall. Useful for identifying which specific image is blocking the LCP.
Real data: According to Google, improving Core Web Vitals from "Poor" to "Good" can reduce bounce rate by 24–35% and improve conversions by 3–8%. Images are the highest-impact starting point.
Compress your images for free in seconds. No sign-up required.
⚡ Use ComprimirPro now