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:
The HTML element that you want to lazy load
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.
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.
One of the principles of a fast site is “less is more”. If you can do something without a script then you should.
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!).
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.
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.
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.
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.
The other great benefit of this plugin is that it supports the most HTML elements:
Images in posts, pages, Custom Post Types, Text Widgets
Inline background images
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:
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:
The types of HTML elements that want to lazy load
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.