Images and Core Web Vitals

User experience is critical when it comes to long-term success on the web. Over the years, tools have been released to help identify metrics and opportunities to improve. We've been working for years with metrics such as Speed Index (SI), Time To First Byte (TTFB), DOMContentLoaded, First Meaningful Paint (FMP), and so on. We found ourselves using a bunch of metrics that were difficult for website owners to understand.

Then comes Google and its Core Web Vitals initiative:

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools.

— Google, https://web.dev/vitals/

Speed is essential for sure though it's a bit reductive. In the end, Core Web Vitals focuses on a set of three metrics considered critical for all experiences on the web:

Largest contentful paint (LCP) measures loading performance.
First input delay (FID) measures interactivity.
Cumulative layout shift (CLS) measures visual stability.

The goal here is not to dive into how Core Web Vitals work but to focus on images' influence on those metrics. As we'll see below, images have a direct impact on CLS and LCP.

Images and "Largest Contentful Paint"

Largest Contentful Paint (LCP) is a user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is useful.

— Google, https://web.dev/lcp/

In other words, this metric will measure the potential frustration of a user waiting for the main content (the largest) to load.

Images are frequently the largest contentful element immediately visible to users on many websites. Think about those hero images at the top of your blog posts or those product carousels on ecommerce websites. Both of them are LCP elements.

To know which is the LCP element of a web page, open the Chrome DevTools Performance panel and perform a recording. The "Timings section" will include LCP. By hovering the label, Chrome will highlight the largest contentful paint element. Since Chrome 90+, you can even display a Core Web Vitals overlay.

To improve LCP in this case, it means you have to accelerate image loading time.

Here is your ToDo list:

Size your images so that their intrinsic size responds to changes in screen resolution (aka responsive images)
Compress your images
Serve images in a next-gen format

Images and "Cumulative Layout Shift"

Cumulative Layout Shift (CLS) is a user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

— Google, https://web.dev/cls/

CLS is one of the most annoying behavior we can experience as a user. Supposing you're reading something and all of a sudden elements shift around the page. You were about to click on the buy button? It's a miss. Very frustrating! This problem is called layout shifting.

The most common causes of a poor CLS score are embedded elements without sizing context. It can be iframes, ads, dynamic content but most of the time, it's images.

Once again, Chrome DevTool is your friend to spot problematic elements in your pages. You can visualize layout shifts by enabling the "Layout Shift Regions" checkbox.

So, how to fix this? Quite simple: you must ensure that browsers can allocate the correct amount of space in the document before images load. Think about a placeholder approach.

The golden rule is: Always include size attributes on your images, or otherwise reserve the required space with something like CSS aspect ratio boxes. Indeed, modern browsers compute aspect ratio from width and height attributes. Knowing the aspect ratio allows browsers to calculate and reserve sufficient space even in a responsive context.

As you can see, images and Core Web Vitals are intertwined. Ensuring images load quickly while not causing layout shifts to the page will help ensure you're delivering a great user experience.

In a future article, we'll go into more detail about how TwicPics can help developers in their optimization journey. Stay tuned :-)