Use the code PERFMATTERS for 10% off!

How to enable lazy load in WordPress (images, iframes, and videos)

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


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 our lazy loading works

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:


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.

This solution is faster and better than Chrome’s native lazy loading because, by default, their implementation is too eager. It also lacks support for lazy loading everything.

We also support lazy-loading WebP files.

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 to the “Lazy Loading” section.

There are four different options you have when it comes to lazy loading. They can also be used together at the same time.

Lazy load images

The first option and most common is to lazy load on your images. To enable this, toggle on the “Images” option. This also includes inline background images inside the style attribute.

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

Lazy load iframes and videos

The second option is to lazy load iframes and videos. This includes YouTube, Vimeo, and any type of iframe. This also works with videos embedded with a file URL using the video tag.

To enable this, toggle on the “iFrames and Videos” option.

Lazy load iframes and videos
Lazy load iframes and videos

YouTube preview thumbnails

If you’re using YouTube videos on your site, it can be advantageous to enable our preview thumbnail feature. What this does is swap out the YouTube iframes with a preview thumbnail and lightweight SVG play icon. The iframe is then loaded on click. This is the fastest way to load YouTube videos.

The thumbnail used on YouTube is the preview image that will automatically be pulled. This is just an example below.

YouTube video thumbnail
YouTube video thumbnail

To enable this, toggle on the “YouTube Preview Thumbnails” option.

YouTube preview thumbnails
YouTube preview thumbnails

DOM monitoring

DOM monitoring watches for changes in the DOM and dynamically lazy loads newly added elements. This adds improves compatibility for third-party plugins and themes that utilize infinite loading when scrolling down a page.

To enable this, toggle on the “DOM Monitoring” option.

DOM monitoring
DOM monitoring

Note: If you aren’t using infinite scrolling, we don’t recommend enabling this option.

Exclude images from lazy loading

There may be times where you will want to exclude a specific image from being lazyloaded. There are a couple ways to do that.

no-lazy CSS class

If you have access to add a CSS class to the specific image you are wanting to exclude, simply add the no-lazy class and it should be ignored when the document is being prepared for lazyloading.

perfmatters_lazyload_excluded_attributes filter

If the image you want to exclude is a bit harder to access and manipulate directly, we have a WordPress filter available which can be used to add any attributes or portions of attributes that are specific to the image in question.

In the example below, we are targeting any images that contain either the title='Perfmatters' attribute or the partial class='size-full attribute. This is simply a string match, so any portion of any attribute should work, it just needs to be an exact match for the image or images you are wanting to exclude.

function perfmatters_lazyload_exclude_attributes($attributes) {
     $attributes[] = "title='Perfmatters'";
     $attributes[] = "class='size-full";

     return $attributes;
add_filter('perfmatters_lazyload_excluded_attributes', 'perfmatters_lazyload_exclude_attributes');

This filter can be used in a variety of ways, please reach out to us if you have any questions.

If you are using the GeneratePress theme, you can use this snippet of code: exclude-logo-lazy-load-generatepress.php


If your images aren’t loading when lazy load is enabled and the source for the image looks something like below, it means you’re probably deferring our lazy loading script.


To fix this you will need to exclude the /perfmatters/js/lazyload.min.js from deferring. Note: We have a filter already in place for those of you using WP Rocket.

Was this article helpful?

Related Articles