How To Enable Lazy loading Images On Blogger Website

Website speed is one of the important factors for better ranking and you will not find caching and image optimization plugins on Blogger website.  So, during this article, we are going to discuss what's lazy loading and the way you'll be able to alter lazy load on your blogger website.

Images play a vital role in website speed and if you are using too many images on a webpage then it will request more resources and slow down the loading speed of your webpage.

For better user experience a website should load within 3 seconds but according to Google research the average loading time of web pages is 22 seconds. To improve the speed of your website you need to optimize your images better.

In WordPress you will find many image optimization plugins like Short Pixel, Smush etc but on blogger website you have to optimize your images manually and upload them on your website.

So you can follow some techniques to optimize your website speed by using image formats like .webp, JPEG 2000 and you can also apply lazy load on blogger website for better user experience and speed.

What is lazy loading?

Lazy loading is an optimization technique for websites that delays the loading of resources or objects until they are actually needed and reduces the initial load time.

For example, if a webpage has multiple pictures at the bottom of the page and also the user should scroll right down to see the image, you'll be able to show a placeholder and lazy-load the whole image if the user desires to ascertain their image. Can load.

There are many benefits to enabling lazy load for images. It reduces initial load times by reducing page load and saves both server and client resources. Lazy loading helps to conserve bandwidth by delivering content to users only when requested.

How To Enable Lazy loading Images On Blogger Website

• Login to your blogger blog Dashboard.
• Then go to Theme > > Edit HTML.
• Click anywhere inside the code area and press Ctrl + F keys to open the search box.
• Now, Search for </head> tag and paste below code just above of this tag.

<style>

.lazy{opacity:0;transition:opacity 300ms}

  </style>

• Now, Search for </body> tag.

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() { var lazyloadImages = document.querySelectorAll("img.lazy"); var lazyloadThrottleTimeout; function lazyload () { if(lazyloadThrottleTimeout) { clearTimeout(lazyloadThrottleTimeout); } lazyloadThrottleTimeout = setTimeout(function() { var scrollTop = window.pageYOffset; lazyloadImages.forEach(function(img) { if(img.offsetTop < (window.innerHeight + scrollTop)) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); if(lazyloadImages.length == 0) { document.removeEventListener("scroll", lazyload); window.removeEventListener("resize", lazyload); window.removeEventListener("orientationChange", lazyload); } }, 20); } document.addEventListener("scroll", lazyload); window.addEventListener("resize", lazyload); window.addEventListener("orientationChange", lazyload); });
//]]>//
</script>

• Now, Search for <img tag.

1) Then insert the loading-lazy parameter: class="lazy" inside the img tag. It'll look like the following code:

2) If the class is already showing there, then add lazy inside the class. It'll look like the following code:

3) The src will show inside the img tag and replace it with data-src. It'll look like the following code:

📌Note:- Keep in mind that by changing the image tag one by one, save the template and check the website. Whether the image whose tag has been updated is working properly or not.