Best Lazy Load Plugin

Today we are going to look at the best lazy load plugin that you can install in WordPress.

Lazy loading images can be one of the single best improvements you can make to speed up your site.

Yet, not all plugins are equal!

Many lazy load plugins use old techniques that will slow down your site on modern browsers.

We are going to cover only 3 of the best plugins that deserve your attention.

Which one you choose will depend on two factors:

1. The HTML element that you want to lazy load
2. The browsers you need to support

Let's get started.

What is Lazy Loading

Lazy loading is a technique that you can use to speed up the loading of your site. When you load a webpage all the images download at the same time.

This is true for any image on the page, even those images that are at the bottom of the page. These images are not even visible to a user and yet they still take time to download and display.

The idea behind lazy loading is that you don't need to load all the images at first. Instead, as the user scrolls down the page the images will load as they come in to view.

This speeds up the initial display of the page. On image-heavy pages, this can make a huge difference to the page speed.

But images are not the only HTML element that can be lazy-loaded.

What can be Lazy Loaded?

4 HTML elements can use this lazy loading technique:

• Images - This is the most common and will lazy load any images that are on the page
• iFrames - Youtube videos use iFrames and can use the same lazy load technique
• Video - If you have video files that you host yourself then lazy load these
• Audio - The same is true for audio files that you host yourself

Each of these HTML elements can use lazy loading. Yet, not all the plugins can lazy load all these elements. All three plugins below can load Images and iFrames. These two are the most common and will most likely meet your requirements. Only one of the plugins can load all these elements.

Now seems like a good time to dive into each of the plugin options.

Lazy loading WordPress Plugin

We are going to look at only 3 plugins for lazy loading. I don't want to recommend anything to you that is not useful, well built and maintained. All the plugins are free to install and use open-source software.

The three plugins we are going to cover are:

• Google Native Lazyload - This Google WordPress plugin uses the new native lazy loading feature.
• Lazyload by WP Rocket - This uses a popular Javascript library that uses something called IntersectionObserver underneath. This is a better way of detecting a scroll.
• Lazy Loader - This library uses the very popular lazysizes. This has been battle-tested and has the best browser support.

These plugins have made the list because they all use open-source Javascript libraries underneath. These libraries are well maintained and work in modern browsers.

Many plugins use old and outdated libraries. If the javascript library was not updated for a year then I removed them from the list. For example, you will see other sites recommended the plugin:

• A3 Lazy Load

Yet, this library uses this Javascript library which has not had any new code written in over 3 years!

Let's look at the three plugins in more detail.

Google Native Lazy Loading

The first plugin we are going to discuss is Google's native lazy loading. This plugin by Google takes advantage of a new feature called “Native Lazy Loading”.

Native lazy loading is fast.

This feature uses the browser to detect when the page is moving instead of JavaScript. This means that the images load without Javascript.

One of the principles of a fast site is “less is more”. If you can do something without a script then you should.

When a user scrolls on a web page the browser detects when an image is about to appear. When it is the browser will load the image before it comes into view. It does this without the help of JavaScript.

This means that the page is faster and the assets load faster. This is the future of lazy loading but it is very new.

There is still limited support in browsers and no browser support for this feature in Apple's Safari browser (come on Apple!).

Yet, this WordPress plugin does support Safari. The plugin will detect if native lazy loading is available. If it is not, it will load a custom JavaScript file to load the images.

This plugin then will work on Safari it won't be as fast as it is in Chrome.

If any of your users use Safari on their iPhone or Mac then you should consider one of the other plugins below. They use libraries that are much more tested than the one offered here by Google.

There is one more downside to “Native Lazy loading”. It only works on images and iFrames HTML elements.

Now you cannot use native lazy loading with Video or Audio elements. If you need to support these then you should check out the other plugins below.

Next, let's look at a plugin that has support Safari and video elements.

Lazyload by WP Rocket

The next plugin is by WP-Rocket who are best known for their caching plugin. Their lazy loading plugin is “Lazy Load – Optimize Images” in the WordPress plugins area.

This uses an open-source JavaScript library called LazyLoad underneath. This library is very well maintained updated 6 days ago at the time of writing. This library uses a new technique called “IntersectionObserver”.

I know very geeky, but why is this important?

IntersectionObserver is a new standard to detect the visible part of a web page. It is much faster than using the old scroll event method and is recommended by Google.

Yet it is not supported by all browsers. IntersectionObserver will not work on IE11. The plugin has to fallback to scroll events on IE11.

This means that the library will use the fast way of loading when it can. Then fall back to the older technique of scroll events when it can't.

If you still have users on IE11 then you may want to look at the last plugin which only uses scroll events.

If you have many users using Safari or iPhone then you should install this plugin.

The last plugin we are going to cover is one of the most established. It uses older technology but it is well written and maintained.

Lazy Loader

One of the most battle-tested Javascript libraries for lazy loading is lazysizes. It gets over 100k downloads a week on NPM. This gives us the confidence that it works!

The great thing about this library is that it supports all browsers! With code changes only 4 months ago at the time of writing.

The best WordPress plugin to use this library is Lazy Loader.

This plugin gives you setup options to make the setup of the JavaScript library easy for you.

The other great benefit of this plugin is that it supports the most HTML elements:

• Images in posts, pages, Custom Post Types, Text Widgets
• Post thumbnails
• Inline background images
• iFrames
• Videos
• Audio

It also has options to enable Native Lazy loading using the settings.

This plugin does take a bit more to set up and has many more options. Yet, if you are willing to take the time then it supports:

• Most browsers
• Then most HTML elements
• And has the most options

If you install this plugin make sure to enable the option:

“Include the lazysizes native loading plugin”

This will take advantage of native lazy loading in the browsers that support it.

This plugin is much more advanced and has many settings. This gives you the flexibility to configure any setting. Yet this flexibility can also be confusing to those that want to install a plugin and forget it.

What is the Best Lazy Load Plugin

We have covered the three best lazy load plugins for WordPress that you can install today.

Which one you choose will depend on two factors:

1. The types of HTML elements that want to lazy load
2. The browser support that you need

The types of HTML elements that we can lazy load are:

• Images - Used by all images on a page
• iFrames - Used by Youtube videos and other social media
• Video - Used by a video that you host yourself
• Audio - Used by audio that you host yourself

f you need to support only images and iFrames. And you are using the latest browsers then choose the Google Native Lazyload plugin. This plugin uses the latest native lazy loading technique and is the fastest.

Yet, if you need to support Safari and iPhone users. You also want to lazy load video elements then pick the Lazyload by WP Rocket plugin. This uses the more performant IntersectionObserver technique.

The last option is to use the Lazy Loader plugin. This supports all HTML elements and all browsers but it also uses the oldest technology.

Whichever one you choose lazy loading is an important improvement. Installing one of the above plugins will help to give a great experience to your users.