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.

Native Lazyload - a Google Plugin to Speed up Your Website 1
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 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="" 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”.

Native Lazyload - a Google Plugin to Speed up Your Website 2
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.

Native Lazyload - a Google Plugin to Speed up Your Website 3

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.

Native Lazyload - a Google Plugin to Speed up Your Website 4

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.

We engineered our cloud infrastructure with Performance, Speed, Scalability, and Security in mind.

That’s why we built Rovity with AWS, CloudLinux OS, DirectAdmin, and LiteSpeed Web Server.

Come and experience the next generation of shared hosting on the cloud

By Gifty Antony

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

Check Out These Related Posts

How to Highlight Text in WordPress

How to Highlight Text in WordPress

Are you looking to highlight text in a WordPress page or post? Highlighting text can help users focus on a specific text area. This can be useful to highlight a special offer, call to action, or highlight particular sentences. This article will explain how to...

read more



Submit a Comment

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