How to Lazy Load Offscreen Images on Blogger Website
Hey, are you trying to find how you can defer offscreen images on the Blogger website by lazy loading the images?
Then, you found the right blog. This article will show you how to lazy load images and improve the page speed score on Blogspot websites.
Website speed is a crucial factor for ranking on Google. And images on your blog posts play a huge role in the loading speed.
So, it is better to Lazy load images to reduce the loading speed of your website.
If your website is hosted on WordPress, you can easily lazy load images using WordPress plugins, but you don't have any plugin options for a blog at Blogspot.
So, I will discuss 2 different methods in which you can lazy load images on your blogger website. But first, let's take a look at what is Lazy loading and its effects.
What is Lazy Loading
Lazy loading is a method to optimize website speed by delaying the loading of resources like images until they are actually needed.
For example, let's say you have a blog post with multiple images on it. Now, as soon as someone visits your website, all images on your webpage start to load.
As a result, your website will consume more data. So, your website's initial load time will increase.
So, to solve this problem, you can defer the offscreen images. This means images will only load after the user scrolls down to the point where images are placed.
Why you should use Lazy Loading
There are a couple of reasons for using lazy loading on your Blogspot website. First of all, it will improve your site's Core web vitals score.
Google now takes Core Web Vitals Score as a ranking factor, so it can have a good effect on your search ranking too.
Enabling the lazy loading feature on your website can help you to improve both First input delay (FID) and Largest Contentful Paint (LCP).
As a result, uses can see the webpage's content very quickly, which can lead to better conversions. So, you should definitely start to lazy load images on your blogger website.
How to Lazy Load Images on Blogspot Website
There are two different ways for Lazy loading images on your Blogger website. You can either do it manually using browser-level image lazy loading or you can use JavaScript for automation.
Either way, you won't have any problem deferring offscreen images on your blog after reading this.
Browser-level Image Lazy Loading
From mid-2019, all major browsers like Chrome, Firefox, etc. support browser-level lazy loading. It means browsers support lazy loading by default, so there's no need for extra JavaScript.
All you have to do is to add a loading attribute to your image. To do that, you have to go to the HTML view of your post after you upload the image.
Generally, you will see HTML code like this.
<div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/***/Image.png" style="display: block; padding: 1em 0; text-align: center; " ><img alt="" border="0" data-original-height="360" data-original-width="640" src="https://1.bp.blogspot.com/***/Image.png" /></a> </div>
Now, here you have to add the loading="lazy" attribute before the src. Then, it will look like this.
<div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/****/Image.png" style="display: block; padding: 1em 0; text-align: center; " ><img alt="" border="0" data-original-height="360" data-original-width="640" loading="lazy" src="https://1.bp.blogspot.com/***/Image.png" /></a> </div>
You have to add the loading="lazy" attribute manually in HTML code to every single image you upload.
Once you add the attributes, you will see that Lazy loading is enabled on your website. You can check it, with the help of Page Speed insights.
Enter the URL of your article, and check whether lazy loading is working or not. If Lazy Loading is working properly, then you will see Defer Offscreen images in the passed audits.
Defer Offscreen Images using JavaScript
If you don't want to add loading="lazy" manually for every single image you upload, then you can use the JavaScript method to lazy load images on Blogspot.
For lazy loading images using JavaScript, follow the following steps:
Step 1: Copy the complete JavaScript Code given below.
<script> //<;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC6XGeKSj_n-pl7r5g47t9QmtJB51vTHGMLHurzih6xIgCyel_YCCHNSOjwHBA9rnaS_B66myU2mIj-UlQBbKlvHLpNqlx_6Q92ORy0-i1mw6cQmU-qXcBLHq8gAdkf5ohLx2c0fmQvw/s16000-rw/i.webp",effect:"fadeIn",threshold:"-50"})}); //]]> </script>
Step 2: Log in to your Blogger Dashboard and go to the Themes section.
Step 3: Click on Edit HTML and visit the theme's coding.
Step 4: Search for the </body> tag using CTRL+F (Or you can scroll down to the ending of the code).
Step 5: Paste the previously copied JavaScript, just above the </body> tag. And save the theme.
That's it. You successfully enabled the Lazy loading function on your Blogger website using JavaScript.
You can check any of your posts on Page Speed Insights. You will find Defer Offscreen Images in the Passed Audits.
Conclusion
I have discussed 2 different methods for enabling Lazy Loading Images on Blogger websites. Both of them work fine.
But, which one should you use?
I recommend using the first method, Browser-level Image Lazy Loading. Even though it may be a little annoying to add a loading attribute every time, but still it's better for your website.
If you use JavaScript for lazy loading images, then every time the script will run as soon as someone visits your website. So, it will delay the load time of your website a little bit.
