Here LazyLoading comes to rescue. Lazy loading loads only when they are “above the fold.” or images only load when they come into the viewport of the browser. So all the images don’t load at a time, which helps the page loading faster. While Without lazy-loading, all images on a webpage load instantly when someone visits it.
How Is Native Lazy Load different?
Moreover, JS-based lazyloading also conflicts with AdSense ads which result in lesser revenue. Which won’t be a case with this method
You can see how much JS performance increased by eliminating Lazyload JS.
How to Add Native Lazyload in WordPress?
Native lazy loading can be achieved by adding a class called loading= “lazy” before image. There is a ticket to add this to directly to WP core. Until then, there are few plugins in the wp repo, which can help you achieve you the same. One of them is Native Lazyload by Google. You need to install the Plugin that’s it, and there is no need to configure anything. It works out of the box.
How to verify Native Lazyload WordPress is working?
Make sure you are in the latest version of chrome Ie 76.
Check your chrome version by going to –
Make sure these flags are enabled in Chrome. You can check it by going here.
Native lazyload takes many factors before lazy loading an image. One of them is it checks you browser speed using Network Information API. If it thinks that your speed is good enough, then it won’t Lazy Load.
To mimic a slow connection speed. Open Developer Tools by typing CTRL+SHIFT+I.
Now go to Network Tab And Change the “Online” to “Slow 3G”.
Now select “Disable Cache.”
Filter the file to “IMG”
Now reload the page.
You should see an image called “placeholder.svg.” Then It’s working.
What about the compatibility of with other browsers?
Will Adding Native Lazyload in WordPress will break my site?
Ideally, The answer is NO. However, make sure you have disabled any other lazy loading plugin so that there is no conflict. If you face any issue let me know in the comments.
Currently it isn’t working with Autoptimize. (1.0.1 update fixed it)
Update 2– Firefox and Edge is not loading thumbnails.
Effect on my site before adding Native Lazyload in My Site.
I was getting 95 performance score in Lighthouse(I was using js based loading back then). After adding Native lazyLoad, the score touched 100. Here are snaps.
You may ask if FCP is same (1.1s) in both cases how score increased. If you know Lighthouse gives priority to how fast the page initially renders.
Now check the video above carefully; you can see apparent differences in rendering time. Earlier it was blocked by JS the I was using to lazy load images. Also after adding native lazy load in WordPress my speed index decreased from 3.0s to 1.1s
Native LazyLoad Wordpress Plugin
Helped me to boost my score page speed score from 95 to 100. Although browser support is less, I am pretty sure most browsers will start adopting it soon. 1 star less for lack of support for placeholder