1,471 reads

Improve Core Web Vitals Using Lazy Loading and BlurHash

by imgixJanuary 20th, 2023

Too Long; Didn't Read

Defer Offscreen Images, also called lazy loading, is one of the improvement opportunities in your PageSpeed Insights analysis. Combining placeholders, such as BlurHash, you can improve load times and offer a better user experience.

featured image - Improve Core Web Vitals Using Lazy Loading and BlurHash

Website speed has become increasingly more important these days as studies show that 70% of consumers 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.

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 PageSpeed Insights analysis. Using placeholders, such as BlurHash, 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.

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 nytimes.com, on the day of the analysis, It could’ve improved page speed by 1.5 seconds, had it implemented lazy-loading.

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 Intersection Observer API requests. The following chart from caniuse.com shows which browsers support the HTML lazy loading attribute:

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.

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>

</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 BlurHash, which will occupy a frame until it’s appropriate to load a fully detailed version.

Once you’ve applied the BlurHash code to your image, the resulting placeholder will look like this:

Using BlurHash as Your Placeholder

BlurHash 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.

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 came up with the idea for BlurHash while trying to find a better solution for how images would load on a slower internet connection.

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 (

<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 documentation or try it free.