Use code PERFMATTERS for an additional 10% off!

How to Enable Lazy Load in WordPress (Native Lazy Load)

With content on the web getting longer, it’s important to take advantage of features like lazy load in WordPress to keep your site running fast.

What is Lazy Loading?

Lazy loading is essentially delaying the loading of images until a user scroll downs the page (images enter within the viewport).

Why is this awesome? Well, let’s say you have a long-form blog post with 100 images in it. By default, the browser will try to load all 100 of those images when someone visits the post. Even with optimized images, this can take a while, especially on mobile.

But if you lazy load the images, it will only load the images towards the top of the page that visitor can see in their browser. The number of images varies based on the type of browser, what type of lazy loading is being used, the size of the viewport, etc. But regardless, the idea is that it usually cuts down on 85%+ of the requests right off the bat.

Lazy Load Test

We ran a little test on one of our blog posts so you could see the difference.

Not Lazy Loaded

Here is before we lazy-loaded the images. As you can see the are a total of 56 requests, total page size of 852KB, and load time of 1.2s.

Not lazy-loaded
Not lazy-loaded

Lazy Loaded

Here is after we enabled lazy-loading. As you can see the number of requests dropped down to 35, the total page size decreased to 245KB, and the load time dropped to 0.8s. So in other words, just enabling lazy loading gave us a speed increase of 33%.

Lazy-loaded
Lazy-loaded

The post we tested on was fairly optimized already. You’ll see even bigger speed increases if you are lazy loading unoptimized images or have more images on a page.

How to Enable Lazy Load in WordPress

To enable lazy load in WordPress, go to the “Perfmatters” settings in your WordPress admin dashboard. Under the “Options” tab scroll down and enable the “Lazy Loading” option.

Important: This is currently in BETA as we continue to test things, but we are already running this on all of our own sites.

WordPress lazy load in Perfmatters plugin
WordPress lazy load in Perfmatters plugin

Our plugin supports the new native lazy-loading introduced with Chrome 75. When lazy loading is enabled and someone visits your site in Chrome 75 or higher, everything is handled at the browser level.

We use a small (2.5 KB), open-source JavaScript library that is loaded to determine whether or not the browser supports native lazy loading. You will see a request to the following file:

/perfmatters/js/lazyload.min.js

If someone visits your site in a browser that doesn’t support native lazy loading, say Firefox, the Javascript library is then used to lazy load the images in WordPress.

We also support lazy-loading WebP files.

Was this article helpful?

Related Articles