How To Enable Lazyloading Images On Blogger Website

How To Enable Lazyloading Images On Blogger Website
Lazyloading Images On Blogger Website

One of the most important things for better rankings is how fast a website is, and you won't find caching and image optimization plugins on a blogger site. So, in this article, we'll talk about what lazy loading is and how to turn it on for your Blogger site.

Images are a big part of how quickly a website loads, and if you use a lot of images on a page, it will need more resources and take longer to load.

For a better user experience, a website should load in less than 3 seconds, but Google research shows that the average time for a web page to load is 22 seconds. To make your site load faster, you need to optimize your images better.

On WordPress, there are many plugins for optimizing images, such as short pixel, Smush, etc., but on Blogger, you have to manually optimize and upload your images.

So you can use image formats like.webp and JPG 2000 to improve the speed of your website. You can also use lazyload on a Blogger site to make it faster and better for users.

What is Lazyloading?

Lazy loading is a way to speed up the first load time of a website by delaying the loading of resources or objects until they are actually needed.

For example : if a webpage has multiple images at the bottom and the user has to scroll down to see them, you can show a placeholder and only load the full image when the user gets to that spot.

There are several advantages to letting images load slowly. It speeds up the first load time by making the page lighter and saves resources on both the server and the client. Lazy loading helps save bandwidth by only giving users content when they ask for it.

For example : suppose a blog post has six images and a user scrolls down to the third image but does not scroll any further. In such situation, the browser will only load three photos, saving server resources.

The browser will prioritize loading images visible above the fold of the screen while using lazy-loading (viewport). You can minimize the total page size while also improving your core web vitals score in the page speed insight report.

Steps to Enable Lazyload on Blogger:

Follow the steps below to add a script for bloggers to load pages slowly. It will automatically use the lazy load for all of the images. You do not have to add the Inline <img> tags by hand.

Step 1 : Go to the Blogger dashboard and click on the theme section.

Step 2 : Then click on Edit HTML from the drop-down menu.

Step 3 : Click Ctrl+F on the HTML Editor and search for </body>. You can also scroll all the way to the bottom to find this </body> tag.

Step 4 : Copy the JavaScript code below and paste it just above the </body> tag. Then save the file.

<script>

//<![CDATA[

// Lazy Load

(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://4.bp.blogspot.com/-XNnCtsmVWps/WwUzI4O3OMI/AAAAAAAAGzM/s5IzNI42txMh8ZglfGk9ktfD7CqQ0JkMgCLcBGAs/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});

//]]>

</script>

<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Your implementation of lazy image loading on the Blogger website is now complete.
You can now monitor the speed of your website using Google Page Speed Insight, which will indicate whether or not the lazy load has been effectively applied on your site. The snapshot below shows that the audit on lazyload was successful for my website.

Lazyload Images without Any script

You can use the natural lazyloading of the browser if you want to lazyload images without a script. Therefore, you don't need any javascript code in your theme while using this way. You only need to manually add a little piece of code, such as loading="lazy," to your image code.

<img loading="lazy" src="#" alt="image alt tag" />

The browser will understand that this picture will be lazyloaded if you add this brief line of code to the image tag. When the user scrolls down to the image location at the bottom of the page, the browser will then only load those images. The majority of contemporary browsers use this capability.
Lazy loading can be added to the Blogger website using either the automatic script method or the manual method.

Ask me in the comments if you have any questions about lazy loading script implementation or image optimization on Blogger.

Next Post Previous Post
No Comment
Add Comment
comment url