Website speed has become increasingly more important these days as studies show that say that page speed impacts their online buying decisions. But going beyond the consumer experience, Google has recently updated its Core Web Vitals (CWV) report and provided guidance on the most important metrics about page performance. This means that the quality of the user experience and page performance is now considered more and more when it comes to its search algorithm. 70% of consumers A quick recap: Core Web Vitals measures three key aspects of the web experience: loading, interactivity, and visual stability. One of the most effective ways to improve Core Web Vitals (CWV) — and SEO — is by optimizing image assets. There are a few ways to accomplish this, including proper image compression, resizing, and next-gen image conversion. In addition to those three techniques, you will likely see Defer Offscreen Images, also called lazy loading, as one of the improvement opportunities in your . Using placeholders, such as are also great options to improve perceived load times and offer a better user experience when a connection or site is slow to load images. PageSpeed Insights analysis BlurHash, What is Lazy Loading? Imagine an e-commerce page with 100 high-resolution photos of shoes. If a browser loads all the photos at once, some towards the bottom of the page might appear before you can scroll to them, while photos in your viewport might not, which can create a bad user experience. Lazy loading is the technique that defers offscreen images from loading until the visitor scrolls and the images enter the viewport. It allows fewer images to load at any given time and speeds up the load time for each image, which can improve Largest Contentful Paint. Lazy loading can improve First Input Delay (FID) as well. FID is the time it takes for a page to respond to the user's first interaction, such as a click. By strategically delaying large components like images from loading, the website can process JavaScript and respond to interactions faster. In the example below, for , on the day of the analysis, It could’ve improved page speed by 1.5 seconds, had it implemented lazy-loading. nytimes.com How to Implement Lazy Loading How you implement lazy loading depends on your code base and the browsers you support. In addition to loading=“lazy”, a Chrome-supported HTML attribute, developers can use JavaScript and/or requests. The following chart from shows which browsers support the HTML lazy loading attribute: Intersection Observer API caniuse.com However, given how fast browsers are changing and their unique capabilities, developers increasingly consider using the lazysizes.js JavaScript as a best practice. In the following video, our partners at Cantilever demonstrate and compare the loading=“lazy” and lazysizes.js implementations. https://youtu.be/66FYrn3JDJo?embedable=true Best Practice: lazysizes.js + imgix.js Using lazysizes.js together with imgix.js is a great way to combine the benefits of imgix image optimization and lazy loading. Here’s an example of how it’s done as a meta property: <head> <meta property="ix:srcAttribute" content="data-src"> <meta property="ix:srcsetAttribute" content="data-srcset"> <meta property="ix:sizesAttribute" content="data-sizes"> </head> And here’s an example of how it’s done in JavaScript: imgix.config.srcAttribute = 'data-src'; imgix.config.srcsetAttribute = 'data-srcset'; imgix.config.sizesAttribute = 'data-sizes'; Use Placeholders with Lazy Loading The risk of lazy loading is that it could increase the page layout instability, leading to a worse CLS score. For example, when a visitor scrolls down quickly and starts to read an image caption, the image can suddenly appear, pushing the caption out of view. The way to mitigate this issue is to use low-quality placeholders or , which will occupy a frame until it’s appropriate to load a fully detailed version. BlurHash Once you’ve applied the BlurHash code to your image, the resulting placeholder will look like this: Using BlurHash as Your Placeholder is an algorithm that lets you create a compact version of an image placeholder. The algorithm creates a string of characters that encodes a blurred representation of the image, with the quantity of characters determined by the quality of the image. The string is short enough that you can serve it directly in the markup of your page and then the string can be decoded into the blurred image—without having to fetch and download an image file. BlurHash A key benefit of BlurHash is that you can convert large image files into a smaller amount of data so that a blurred representation of the image appears while the original file is still loading.An engineer at Wolt while trying to find a better solution for how images would load on a slower internet connection. came up with the idea for BlurHash How to Use the BlurHash Feature To create a blurred image, simply add fm=blurhash to any image to get the BlurHash string. Once you have the BlurHash string, you can use it in the BlurHash component. The BlurHash component is responsible for decoding the hash into an image that can be displayed. In this particular example, the React BlurHash component generates a canvas element in the final markup. Note: the generated markup can differ slightly depending on which library or framework decoder is used. import './App.css'; import Imgix from "react-imgix"; import { Blurhash } from "react-blurhash"; function App() { return ( <div className="App"> <section className="App-header"> <Blurhash hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU" width={600} height={400} /> <Imgix src="https://assets.imgix.net/example-images/puffins.jpg" width={600} height={400} /> </section> </div> ); } Once you’ve applied the BlurHash code to your image, the resulting placeholder will look like this: Include the BlurHash string with your markup at build time to ensure users see the blurred version of the image immediately. The Takeaway Your CWV metrics are more important than ever, but the good news is that there are some quick and impactful ways you can improve them. Combining lazy loading with image optimization and using effective placeholders like BlurHash are two ways to reach proven results. You can easily implement these techniques using imgix, check out our or . documentation try it free

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

Automatic Image Optimization Using the Nuxt Image Component with imgix

Sign Up for Free

Improve Core Web Vitals Using Lazy Loading and BlurHash

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

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

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

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

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

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

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

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps