Native Lazyload – a Google Plugin to Speed up Your Website

by | Last Updated Jan 30, 2020 | WordPress | 0 comments

To make your website loads 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 to respond much quicker. That means the visitor can scroll down and interact with the page very sooner.

By applying this technique, lazy loading can effect a significant improvement in site speed and a big 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 that is 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 content that is visible at the top of the page (above the fold) loads immediately.

Below the fold content won’t be loaded 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 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 1KB sized JavaScript file. When the browser doesn’t support lazy loading natively, this JavaScript gets called as a fallback.

With this support, we can use this plugin 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 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 Can I Use website.

When I wrote this article, native lazy loading works in latest versions of Chrome, Opera, Android Browser and Chrome for Android.

Though, 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.

Want to See Your WordPress Website Loads in a Second?

We offer a 30 Day Money Back Guarantee, so joining is Risk Free

By Gifty Antony

Gifty is passionate about Web Development and connected with various communities. She loves WordPress.

Check Out These Related Posts

Temporary WordPress Login Without Password

Temporary WordPress Login Without Password

In this tutorial, you will learn how you can let anyone access your WordPress account quickly and safely. You don't need to provide your admin username and password. They can access securely with a simple self expiry link.Why Do I Need to Provide My WordPress Admin...

read more

0 Comments

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *