Website speed is important, not only because 70% of consumers admit that page speed impacts their willingness to buy from an online store, but also because of Google. Google increasingly weighs the quality of the user experience and page performance in its search algorithm, impacting SEO and content discoverability.

https://youtu.be/Jc9syuWK8No?t=99?embedable=true

What Are Core Web Vitals?

According to web.dev, Core Web Vitals (CWV) measure three key aspects of the web experience: loading, interactivity, and visual stability. With these clear signals, you can better assess and improve your website without needing to be a UX guru.

You can monitor the CWV results of any website using the PageSpeed Insights tool, which shows the performance between mobile and desktop. Loading, interactivity, and visual stability are reflected in each of the three factors below:

• Largest Contentful Paint (LCP) — how many seconds it takes for the most data-rich element on a page to load. For example, when someone clicks a link for a page with a high-resolution primary image, LCP is how long it takes for the visitor to see the complete picture. Google considers a load time up to 2.5 seconds good, up to 4 seconds “needs improvement,” and anything longer, poor.

• First Input Delay (FID) — how many milliseconds it takes for a page to respond to user interaction. For example, clicking a button may invoke JavaScript. If the JavaScript code is complicated or involves prolonged backend communication, it could take longer to execute. The quicker the interaction, the better. 100 milliseconds or less is ideal.

• Cumulative Layout Shift (CLS) — CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. For a simpler illustration, the large hero image loads slightly after other components when a webpage is first loaded. After the user scrolls past it, it finally loads, forcing the surrounding frames of images and text to change position or resize. These kinds of elements can be annoying and distracting. A good score is 0.1 or less.

How Images Impact Core Web Vitals

Images comprise an average of 75% of the total page weight on modern websites. They have an outsized impact on loading and visual stability. The metric that images influence the most is the Largest Contentful Paint (LCP).

Let’s look at the mobile experience for the New York Times. For the day we measured, the performance score was 17, far from an acceptable score range (50-89).

When we looked at the Opportunities, nearly half were image-related. And the page load time can be reduced by around 10 seconds with these image optimizations.

1. Defer Offscreen Images
2. Serve Images in Next-Gen Formats
3. Properly Size Images
4. Efficiently Encode Images

The great news is that image processing APIs like imgix can easily optimize images and improve website performance. For this article, we’ll focus on the last 3 techniques, as they can be easily automated using image APIs. We’ll dedicate a separate article on deferring offscreen images, aka. Lazy loading, as it has multiple implementation options and entails more finesse.

1. Use Nex-Gen Image Formats Like AVIF

As the nytimes.com example shows, the easiest way to improve LCP is by using a next-gen image format. With imgix, you can convert existing files from virtually any format — such as JPG, GIF, PNG — to AVIF or WebP. This reduces file sizes by an average of 60%, if it’s converted from JPEG, and 35% if it’s converted from WebP, with virtually no loss in quality. (To learn more, check out the AVIF article here.)

2. Efficiently Encode and Compress Images

Using nytimes.com as an example again, we see that had the images been efficiently encoded, they could save up to 40% in file size. You can automate image compression using imgix, without any impact on visual quality, with one simple URL parameter auto=compress. Optimizations occur in real time, removing the need to batch process or maintain multiple copies of an image.

In the examples below, the original image has a file size of 3.3MB. The optimized image, which maintains the same visual quality, has a file size of only 215kB, which is 93% smaller than the original. It’s achieved by using three simple transformations - fm=webp&auto=compress&w=2000.

Original Image - 3.3MB

Optimized image - 215kB

The imgix ‘q=’ parameter lets you control how much compression you want for a particular image. If you’re displaying a work of art or a detailed technical image, you may need to include every possible pixel in the picture, even if it takes longer to download. imgix API parameters give you full control over every aspect of image processing and optimization.

3. Properly Resize Your Images

For nytimes.com, they can save an astounding 29 seconds in loading time and up to 78% in file size by properly resizing the images.

Images are often served out much larger than needed for a page. You can adjust the width (w) and height (h) parameters based on different devices or viewport sizes. To dynamically adjust image sizes and dpi based on a user device, use the automatic scrset generation.

Getting Started with imgix

If you want to improve your Core Web Vitals and website performance, image optimization is the most effective method. We hope this article gives you an idea of how important but simple it is to implement these optimization techniques. We will follow up with a separate article on image lazy loading in the coming weeks.

To learn more about imgix, check out our documentation and sandbox, and try it free.

Also published here.