Install Lazy Load Script For Images In Blogger

One of the common problems that Blogger users often encounter is the difficulty of setting the expires header (browser caching) . It's not possible. Since Blogger is a Google product, so we can't manage or modify it by ourselves.

A Brief Explanation About Cache 

When a visitor first opens your blog, the browser will make several requests to download all the content from the blog. Ideally, all the files were stored in the browser cache of the visitor. So that when he returns to your blog, all files can be directly retrieved from the browser cache. This will obviously ease the loading of the blog, because the browser does not need to keep requesting its files to the server. How long the cache is stored in the browser you can set yourself. Some types of files that need to be cached include:
  • Images: jpg, gif, png ,webp
  • Favicon/ico
  • Javascript
  • CSS
And that can only be done on a blog or website that has its own hosting (self-hosted). Since in Blogger, you CANNOT set the expires header to control the browser cache. So every time a visitor opens your blog, the browser will immediately re-download all files directly from the server. Then the load time required to display the blog page becomes longer. One of the factors that makes the YSlow score on GTmetrix unable to get A (100%) mostly because of this expires header problem. 

 But no worries. You can use the lazyload image script for Blogger to solve the expires header issue. Another effect, the page speed increases and the blog loads faster. Let's go straight to the script.

What is a Lazy Load  Image Plugin? 

A script that will delay calling a image files before a certain activity is performed. For the Lazy Load Blogger Image script in this article, the image files call will be delayed before scrolling the page.

How to Install Image Lazy Load Script on Blogspot

  • Enter menu Theme, then select Edit HTML. 
  • Look for the HTML image tag code <img /> which is the code from the blog thumbnail. Each template is different, so I'll give an example of a thumbnail code from my template. For you, find the code yourself. Definitely similar to the code.
<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>
  • Add class='lazy'to the image tag.
  • Change expr:srcto expr:data-src.
  • Add src and the value is filled with data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==.
So the end result is something like this: 
<img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg=='/>
  • After all this done, you will need jQuery to use Lazy successfully on your project. 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.plugins.min.js"></script>
  •  Add this script to call Lazy after page load.
$(function($) { $("img.lazy").Lazy(); });
  • When finished, click the button Save theme.
You can add the class name lazy (class="lazy") to any img tag in your blog.