Website speed is important, not only because admit that page speed impacts their willingness to buy from an online store, but also because of . Google increasingly weighs the quality of the user experience and page performance in its search algorithm, impacting SEO and content discoverability. 70% of consumers Google https://youtu.be/Jc9syuWK8No?t=99?embedable=true What Are Core Web Vitals? According to , 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. web.dev You can monitor the CWV results of any website using the , which shows the performance between mobile and desktop. Loading, interactivity, and visual stability are reflected in each of the three factors below: PageSpeed Insights tool — 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. Largest Contentful Paint (LCP) — 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. First Input Delay (FID) — 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. Cumulative Layout Shift (CLS) How Images Impact Core Web Vitals Images comprise an average of 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). 75% of the total page weight 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. Defer Offscreen Images Serve Images in Next-Gen Formats Properly Size Images Efficiently Encode Images The great news is that image processing APIs like 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. imgix 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 . Optimizations occur in real time, removing the need to batch process or maintain multiple copies of an image. simple URL parameter auto=compress 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 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. ‘q=’ 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 based on different devices or viewport sizes. To dynamically adjust image sizes and based on a user device, use the . adjust the width (w) and height (h) parameters dpi 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 and . and documentation sandbox , try it free Also published here.

AVIF Is the Next-Gen Image Format You Will Hear a Lot More About

Improve Core Web Vitals Using Lazy Loading and BlurHash

Sign Up for Free

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

The Best Ways to Improve Your NFT Marketplace Performance

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

A Beginner's Guide: Responsive Images With srcset

An Intro to Ecommerce Navigation SEO Best Practices

The Best Ways to Improve Your NFT Marketplace Performance

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

A Beginner's Guide: Responsive Images With srcset

An Intro to Ecommerce Navigation SEO Best Practices

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps