What Are Core Web Vitals?
Core Web Vitals are a set of real-world performance metrics that Google uses to evaluate the quality of a user's experience on your website. Since May 2021, they have been a confirmed ranking factor in Google Search. Getting good Core Web Vitals scores directly improves your SEO performance.
The three Core Web Vitals metrics are:
- LCP (Largest Contentful Paint): How long it takes for the largest visible content element to load. Target: under 2.5 seconds.
- CLS (Cumulative Layout Shift): How much the page layout unexpectedly shifts during loading. Target: under 0.1.
- INP (Interaction to Next Paint): How quickly the page responds to user interactions. Target: under 200ms.
Images are the primary cause of poor LCP and CLS scores. Getting these right is the single most impactful thing most websites can do for performance.
LCP: Making Your Hero Image Load Fast
The Largest Contentful Paint element on most pages is the hero image — the large banner or feature image at the top of the page. Here's how to optimise it:
1. Use the Right Format
Convert your hero image to WebP. WebP files are 25–35% smaller than equivalent JPEG files with no perceptible quality difference. Use our free JPG to WebP converter to make the switch in seconds.
2. Size the Image Correctly
Never serve a 4000×3000px image in an 800px-wide container. This wastes bandwidth and delays LCP. Resize your hero image to the maximum width it will be displayed at — usually 1400–1920px for full-width banners. Use our Image Resize tool to set exact dimensions.
3. Compress Aggressively
At WebP quality 75–80, your hero image will look identical to the original but be dramatically smaller. Use our Compress Image tool and aim for under 200KB for a hero image.
4. Set fetchpriority="high" on the Hero
The browser has no way of knowing which image is most important until it parses the HTML. Add fetchpriority="high" to your hero image tag to tell the browser to prioritise it above other resources on the page.
5. Add Width and Height Attributes
Always add explicit width and height attributes to your img tags. This reserves space for the image before it loads, preventing layout shifts (CLS). Modern browsers use the width/height ratio to calculate the correct amount of vertical space to reserve before the image downloads.
6. Preload the Hero Image
Use a link rel="preload" tag in your head section to tell the browser to fetch the hero image as soon as possible, before the HTML is fully parsed. This alone can improve LCP by 500ms–1s on many sites.
CLS: Preventing Layout Shifts from Images
Cumulative Layout Shift is caused by content that moves after it loads. Images without dimensions are the biggest culprit — when an image loads without reserved space, it pushes everything below it down the page.
Always Reserve Space with Width and Height
In HTML, setting width and height on images tells the browser the exact aspect ratio before the image downloads. Modern browsers use this to reserve the correct amount of space, preventing layout shift. This is one of the most impactful single changes you can make to a web page.
Use CSS aspect-ratio
If you're using CSS to control image dimensions, apply an aspect-ratio property to the container element. This tells the browser to reserve a fixed ratio of space for the container, even before its contents load. Pair it with object-fit: cover on the image itself to fill the space correctly.
Avoid Injecting Images with JavaScript
Images loaded dynamically after the page renders (via JavaScript) cause layout shifts because the browser has already laid out the page. Render images server-side wherever possible, and avoid inserting images into the DOM after the initial paint.
Serving Responsive Images
Different devices need different image sizes. A desktop with a 4K monitor benefits from a 2560px image. A mobile phone only needs 390px. Serving one large image to all devices wastes bandwidth and hurts LCP on mobile.