Steps to enable lazyload on blogger:
Follow the below steps to add a lazyload script for bloggers. It will apply the lazy load for all images automatically. There is no need to manually add the Inline <img> tags.
-
Go to the Blogger dashboard and click on the theme section.
-
Then click on Edit HTML from the drop-down menu.
-
On the HTML Editor click on ctrl + F and search for </body> or scroll down to the end you will find this </body> tag.
-
Paste the javascript code just above the </body> tag and save it.
Now you have successfully implemented the lazy loading of images on the blogger website.
Now you can check your website speed on google page speed insight and It will show if the lazy load is properly implemented on your site or not. You can see in the below screenshot that my website passed the audit on lazyload.
Lazyload Images without Any script
If you don't want to lazyload images with a script then you can use the native lazyloading of the browser. So, in this method, you don't need any javascript code in your theme. You just need to manually add a small code to your image code like loading="lazy".
<img loading="lazy" src="#" alt="image alt tag" />
Adding this small line of code to your image tag helps the browser understand that this image will be lazyloaded. so, after that browser will only load those image when the user scrolls down below the page and reached the image position. This feature is used by most modern browsers.
You can either use the automated script method or the manual method to implement lazy loading on the Blogger website.
If you have any doubts regarding Image optimization or Lazy loading script implementation on blogger ask me in the comment section. Also, Subscribe to our weekly newsletter to get updated on future content that we post regularly.
