To make your website load faster, Lazy Loading is one of the best ways.
And not everyone focuses on this performance metric.
Lazy loading is a method to avoid loading objects like images and videos until just before they become visible in the browser window.
Lazy loading lets your website respond much quicker. That means the visitor can scroll down and interact with the page significantly sooner.
Applying this technique, lazy loading can significantly improve site speed and a significant boost in user experience.
Three months ago, Google released Native Lazyload, a new WordPress plugin. As per our study, Native Lazyload is the best lazy loading plugin for WordPress currently available.
The Native Lazyload plugin introduced an innovative way of lazy loading built into the web browser. This native solution is making it much more beneficial than earlier options.
What is Lazy Loading?
Lazy loading is a website speed optimization technique that delays the loading of objects like images until the visitor requires them.
It causes contents like photos and videos to not load in the browser window until the visitor scrolls down near to these objects.
All the visible content at the top of the page (above the fold) loads immediately. Below the fold, WordPress won’t load the content until it becomes visible in the browser window.
Lazy loading will make the initial load of your web page quicker. It also saves memory, bandwidth, and data usage when users won’t view the complete page.
Developers mostly apply lazy loading for images. But various other web assets such as videos, iframes, comments, ads, and others also can use lazy loading.
How is Lazy Loading Implemented?
JavaScript was necessary to get a lazy load effect so far. Since version 76 was released on July 30, 2019, Google Chrome started supporting native lazy loading.
Here “native” means that the feature is built into the web browser’s core. That means we don’t need to install an extension or make any other tweaks.
The chrome browser strategically adds a simple HTML attribute (loading=”lazy”) to images and iframes.
This web.dev blog will help you to understand all about native lazy loading.
Native Lazyload, a Plugin From Google
The Native Lazyload plugin from Google adds native lazy loading support for any WordPress site. Google engineer Felix Arntz created this plugin.
This plugin automatically adds the loading=”lazy” attribute to various supported objects.
<img src="example.jpg" loading="lazy" />
<iframe src="https://example.com" loading="lazy" />This HTML attribute turns objects in supporting browsers to become lazy-loaded. A limited number of browsers supports Lazy loading via attribute natively.
Lazy Load Fallback
This plugin has a JavaScript-based fallback mechanism for the browsers that don’t support native lazy loading yet.
This fallback uses a 1 KB-sized JavaScript file. When the browser doesn’t support lazy loading natively, this JavaScript gets called a fallback.
We can use this plugin with this support even if the browser doesn’t support lazy loading natively.
How to Install and Set Up the Native Lazyload Plugin?
It is easy. You can install Native Lazyload from the WordPress plugin directory.
Go to your WordPress admin dashboard.
Click or hover on Plugins and click on the Add New.
Here search for Native Lazyload.
You will see the plugin listed. Click on the Install Now button. Once the installation is completed, click Activate.
This plugin works out of the box. There is no settings page you need to modify. You install and activate the plugin, and the plugin will take care of the rest.
After the plugin activation, you may verify it by viewing your source code.
Or you can right-click and Inspect the HTML of an image to make sure that the loading=”lazy” attribute is generated.
Browser Support for Native Lazy Loading
You can check which browsers currently support Lazy loading via attribute for images & iframes from the Can I Use website.
When I wrote this article, native lazy loading works in the latest versions of Chrome, Opera, Android Browser, and Chrome for Android.
We can expect other popular web browsers like Mozilla’s Firefox to start supporting native lazy loading.
Big Performance Boost
Native Lazyload plugin can lead to a significant performance boost if you have many images on your pages.
Another use case is having YouTube video embeds or iframe-based ads.
Google Engineer Mathias Bynens created a working demo so that you can test this yourself right away.
Watch this video and see the magic in action.
Are you planning to use Google’s Native Lazyload plugin for your WordPress site?
Add your experience in the comments section below.
If you enjoyed this tutorial, then you’ll love Rovity and our fast-growing premium shared hosting on the cloud. Check our subscription plans.
