Page speed score is one of the most important things for better ranking on search engines and to achieve a good user experience. You will not find any plugins for caching and image optimization in Blogger.
You used media files for your blog to make it more attractive, eye-catching to your readers. Media files are heavy compared to text files. These large media files lead to slow down your page speed and when you check your page speed in GTmetrix or Pagespeed Insight it shows Defer offscreen images.
You might try to reduce or compress the size of your media files using any compressor software or other online methods. However, when you check your Page speed again you will see that the page speed checker tool says that to Defer Offscreen Images or consider using the Lazy loading plugin.
But don't worry! In this tutorial, you will learn how to add lazy load plugin in Blogspot to reduce the loading time of your webpages. Before moving to our topic, you should know more about lazy loading. Let's know these thing:
What is Lazy Loading?
Lazy loading (also known as on-demand loading) is an optimization technique for the media files of a webpage. Instead of loading the entire web page and rendering it to the user, the lazy load plugin assists in loading only the required section and delays the remaining until it is needed by the user.
For example, you are reading this article and this page contains images. So, when you request the browser to show this page, normally it loads all images one by one. But if you find out your solution until this tutorial is finished, you probably close that window. This will bring about the wastage of the assets so burned-through in the mass heap of that page. Along these lines, the answer to this issue is to utilize the Lazy Load module.
Advantages of Lazy loading
- Lazy load plugin load your content first but doesn’t load all media files until they are needed.
- Lazy load helps you to achieve a higher page speed score and also boosts your SEO performance.
- Lazy load helps your visitor to save data and bandwidth and also give them a good user experience.
Disadvantages of Lazy loading
- Firstly, the additional lines of code, to be added to the current ones, to execute sluggish burden makes the code somewhat convoluted.
- Secondly, apathetic stacking may influence the site's positioning on web crawlers once in a while, because of the ill-advised ordering of the dumped content.
How does lazy loading affect SEO?
Undoubtedly, a lazy load plugin in a website is a good SEO practice. Almost all search engines can deal with lazy-loaded images. Google promotes to use of lazy load in their Developer's guide.
Do you need a lazy load plugin?
If you use too many media files for your blog posts that are quite heavy to load then definitely you should use the lazy load plugin. It will improve your page speed performance.
Warning!
I am highly recommended you backup your existing template before customizing or making changes to your blogger template as if something goes wrong, you can easily restore your original template.
How to add lazy load script in Blogger?
In this tutorial, I am going to show you three methods to implement the lazy load plugin in your Blogger blog. You can choose any of them to optimize your media files but I recommend you to use 2nd method. To implement a lazy load plugin in your blog, please follow the below steps carefully.
Method 1: Native Lazy Loading
This method is very easy and works in almost every modern browser. To implement this method, make sure you added a lazy loading attribute whenever you add media files for your blog posts. For your old posts, you must add lazy loading attributes by editing them. That's it. See the example below:
<img loading="lazy" alt="alt_text_here" src="your_image_path"/>Method 2: Lazysizes Lazy Load Plugin
Lazysizes is a very lightweight lazy loading plugin to optimize the media files of a webpage. To implement lazysizes please follow the below steps:
- Log in to your Blogger dashboard and select your targeted blog(if you have multiple blogs)
- Select Theme and Click on the down arrow button next to the customize button and then click on EDIT HTML.
- Now search for the </body> and paste the below script just above the </body> tag and save your template.
<script type='text/javascript' src='https://raw.githubusercontent.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js'/>Now add a class attribute to your image files and replace src with data-src. See the below example:
<img class="lazyload" alt="alt_text_here" data-src="your_image_path"/>Method 3: Lazy Load Script For Blogger
This lazy load script is specially made for Blogger blogs to optimize media files. To implement this script in your blog, please go to </body> tag by following Method 2(1-3 steps) then paste this script and save your template. That's it. You are done.
<script type='text/javascript'> //<;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://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]>
</script>How to verify lazy loading?
There are many tools to verify that lazy load plugin is working or not on your site. You can compare the page speed performance of your site using GTMetrix or PageSpeed Insights with or without a lazy load script. Alternatively, you can verify lazy loading with the help of Inspect Element Feature of web browsers.
- Navigate to your website.
- Right-click on any blank space and click on Inspect Element
- Go to Network Tab and then click on the Reload button.
- Scroll down and you will see that media files are getting loaded one after another.
Conclusion
If this tutorial helped you to implement the lazy load plugin in your Blogger Blogspot blog then kindly share it with others.
And if you face any problem while installing this plugin in your blog, please leave a comment below I would love to give you the solution.
Leave a Comment