Optimize images for Core Web Vitals

Lean how images affect the Core Web Vitals en how to optimize them

Arjen Karel Core Web Vitals Consultant
Arjen Karel
linkedin

How Images Can affect the Core Web Vitals?

Images play a significant role in enhancing the visual appeal of a website, but they can also have a significant impact on its loading speed. Core Web Vitals are a set of metrics that Google uses to measure the user experience of a website, and image optimization is a critical factor in achieving good scores. In this article, we will discuss how to optimize images for Core Web Vitals and improve your website's loading speed.

core web vitals all metrics

Understanding Core Web Vitals

Before we delve into image optimization, let's briefly review the Core Web Vitals. They are a set of user-centric metrics that measure the loading speed, interactivity, and visual stability of a web page. The three key metrics are:

Largest Contentful Paint (LCP): measures the loading speed of the largest element on the page.
First Input Delay (FID): measures the time it takes for the page to become interactive.
Cumulative Layout Shift (CLS): measures the visual stability of the page.

Google considers a website to have good user experience if it meets the following benchmarks:

LCP: under 2.5 seconds
FID: under 100 milliseconds
CLS: under 0.1

How Images Can affect the Core Web Vitals?

Images can affect all of the Core Web Vitals.

Largest Contentful Paint

One of the Core Web Vitals is Largest Contentful Paint (LCP), which measures how long it takes for the largest element on the page (such as an image or video) to become visible to the user. If an image is too large or takes too long to load, it can significantly slow down the page's LCP score.

Cumulative Layout Shift

Another Core Web Vital is Cumulative Layout Shift (CLS), which measures how much the content on a page shifts around as it loads. Images can cause layout shifts if they are not properly sized or if they are inserted into the page after it has already loaded, causing other elements to move around.

First Input Delay and INP

Finally, images can also impact the third Core Web Vital, First Input Delay (FID), which measures the time it takes for a user to interact with a page. If there are too many large images or if they are not properly optimized, the page may take longer to respond to user interactions, leading to a poor FID score.

How to optimize HTML images element for speed

cwv image and attributes

SRC

Specifies the URL of the image. This property is essential, as it tells the browser where to find the image.

Width and height

Specifies the width and height of the image in pixels. These properties are important for rendering the image correctly on the page, as they define the size of the image container and how the image fits inside it.

Alt

Specifies alternative text for the image if it cannot be displayed. This is important for accessibility purposes, as it helps visually impaired users understand what the image is about. It's also important for search engine optimization (SEO), as search engines use the alt text to understand the content of the image.

Lazy loading

Specifies how the browser should load the image (lazy, eager, or auto). This property is important for improving page performance, as it allows images to be loaded asynchronously and only when they are needed.

Srcset

Specifies a comma-separated list of image sources and their sizes, which allows the browser to choose the best image source based on the device's screen size and resolution. This property is important for responsive design, as it ensures that users get the best possible image quality regardless of their device.

sizes

Specifies the sizes of the image source to use based on the viewport size. This property works in tandem with srcset to ensure that the correct image size is loaded on different devices and screen sizes, improving the overall performance of the page.

decoding

Specifies how the browser should decode the image (async, sync, or auto). This property is also important for improving page performance, as it allows the browser to prioritize the decoding of the image over other resources on the page.

fetchpriority

The fetchpriority attribute specifies the priority of a resource's fetch relative to other resources on the page. The priority attribute can have one of three values: "high", "medium", or "low". A resource with a high priority is loaded before resources with medium or low priorities. A resource with a medium priority is loaded before resources with a low priority. Resources with the same priority are loaded in the order that they appear in the HTML. >

New and faster image containers

jpg web avif

Images are often one of the largest resources on a webpage, and they can significantly slow down the loading speed of a page if they are not optimized. Newer and faster image containers, such as the WebP and AVIF formats, can help reduce the file size of images without sacrificing their quality. This means that they can be loaded more quickly, which can improve the loading speed of the page.

Resource hints

Image strategies for the LCP element

Image strategy for logo's and other visible non LCP elements

Image strategy for below-the-fold images


I help teams pass the Core Web Vitals:

lighthouse 100 score

A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?"

Optimize images for Core Web VitalsCore Web Vitals Optimize images for Core Web Vitals