There is a new plugin called Native Lazyloading for Chrome by Google. It is an open-source software developed by Felix Arntz and the team behind the official PWA and AMP plugins for WordPress.
Users can use this plugin for optimizing the loading of iframes and images without using the custom JavaScript. The entire process is easy as it enables the site to support the Native Lazyloading plugin instantly.
This plugin’s main feature is to make sure that the loading attribute with the value of lazy is part of the website’s images. Users can install it without any setup needed.
For other browsers that are not compatible with Native Lazyloading, there is a fall-back mechanism for it. It comes with a custom JavaScript and has the least impact on the loading time of the page. Hence, all the visitors to the website, whatever browser they are using, will benefit from the Native Lazyloading of iframes and images.
To install this plugin, users can take the following steps:
- Go to the admin dashboard
- Check the plugin’s section and click add new
- Search the plugin by its name and install it.
To install it manually, click on this link.
What is Lazy-Loading?
It is a method in which the loading of non-critical resources such as images will not load until the users need them. iframes or images will load on the website only when users want to display them. They won’t have to wait for the loading of entire elements on the web page and can browse it sooner.
Images will fetch as soon as the user scrolls the page. Lazy-loading works with the help of JavaScript that checks the viewport of the visitors and loads only those images that are visible to them. It will save user bandwidth and is an excellent way to optimize both real and perceived images.
What is Native Lazyloading?
Native Lazyloading means that the browser, and not the plugin will be in charge of the above-described method. Previously, the lazy-loading could function only programmatically or through the plugin.
Chrome 76 and any Chromium 76-based browsers support the Native Lazyloading plugin. Google made it possible to use the new loading attribute to the lazy-load resources.
Features of Native Lazyloading Plugin
- To make this plugin work, all that users need to do is activate it. There is no settings screen in this plugin.
- To skip lazy-loading for particular iframes or images, users can add a class skip-lazy to indicate the plugin to skip it.
- It is fully compatible with AMP. The plugin will not break it.
Implementing theNative Lazyloading plugin correctly
- Use a polyfill and Intersection Observer API to load the content when it is visible in the viewport. It ensures that Google sees lazy-load content.
- Support paginated loading when using an infinite scroll experience. To support it, give a unique link to each section that users can load and share directly.
- Use the History API to update the URL when the content is loaded dynamically.
- By using the Puppeteer script to test the implementation, SEO can ensure that lazy-loading works correctly.
- Google provides a script for the user. Running the script will create a set of images in which the user can examine and ensure all the content is visible in Google.
Wrapping it up
Activating this plugin is easy, and it doesn’t require any coding to set it up. Hence, if users are looking for an easy way to add lazy load to the images on their website, the Native Lazyload plugin is an excellent option for them.