😍 Loving this theme? Download

Please enter at least 3 characters.

How to Defer Offscreen images: Lazy load images in blogger

Lazy loading of images is a technique preventing off-fold images from loading initially. Learn how you can defer offscreen images in blogger.
How to Defer Offscreen images: Lazy load images in blogger
defer offscreen images in blogger
Recently I was trying to optimize my blogger’s pagespeed by implementing the recommendations from Pagespeed Insight, and I noticed the term “Defer OffScreen Images” or lazy-loading of images.  This article will highlight this section.

Offscreen images are those which are present below the fond or those images that do not lie in the screen when a page loads. Since users can't see offscreen images when they load a page, a good mechanism to improvise pagespeed can be to load those images after a page is loaded. Do browsers follow this mechanism by default? Sadly No!

Browsers download and load all image files at once, causing a huge usage of bandwidth and slow page performance. So, how to overcome this? A single solution: Lazy loading of Images.

Lazy loading of images means to load image files on demands dynamically. In this tutorial, I will explain on how to lazy load images in blogger and how these impacts page speed.

Comparison of Same Page without Lazy Loading Of Images and With lazy loading

I will take a sample page from this website: https://www.twistblogg.com/2019/09/best-premium-blogger-templates.html. I tested this page on GTMetrix and Pagespeed Insight and the results were stunning.

Before Lazy Loading of Blogger Images on GTMetrix

Lazy loading of blogger images-before-GTMetrix
After Lazy Loading of Blogger Images on GTMetrix

Lazy loading of blogger images-after-GTMetrix

Before Lazy Loading of Blogger images : PageSpeed Insight

lazy loading images - Pagespeed desktop

lazy loading images - Pagespeed mobile

After Lazy Loading Of Blogger Images: PageSpeed Insight
lazy loading images - Pagespeed desktop version

lazy loading images - Pagespeed mobile version

Isn't that cool ?

Blogger now supports native lazy loading of images, find out how to implement it:

How to lazy load images in blogger: Defer Offscreen Images?

Now you know lazy loading of images drastically improves web performance, let us add it to your website. Don't forget to backup your whole blog and its contents.

Go to Theme > Edit HTML and Search for </body> or /body and add the following  code above it.
<script type='text/javascript'>//<![CDATA[
function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));

Hey, I forgot to mention this plugin is based on Jquery. Search for </head> and add following Jquery file above it.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

To lazy load images on blogger homepage (for thumbnail images), search for code similar to following:
<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>

Now make some changes as mentioned below:
  • Append class="lazy" to <img> tag.
  • Change expr:src to expr:data-src
  • Now, we will add a super small size image in src attribute:
* It is a good practice to add src attribute in <img> tag as browsers substitute src attribute with data-src attribute once the image is in viewing region. Here is an information clarifying what are src and data-src attributes.

Here is the updated code:
<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/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC'  />

How to lazy load post body images in blogger?

By far, we have implemented lazy loading effect to images on blogger homepage. Now, it is time for deferring offscreen images on post body.

Unlike Wordpress, Blogger doesn't support implementing lazy loading to all post body images. One need to make changes manually.

Here is a sample of image tag in blogger(without anchor tag),
<img alt="Lazy loading images" border="0" data-original-height="483" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZVHu49yl5hywiA0vG68bpa4sDOgG0OjS3zxy6LcLQ8xl3RODWsJ2W9CPPOUAC9a3IQ0K8M591ueGF4ehxPp-wTurD5lniLT3Nb8YIrm54BEjgsVRqfh08mMgXs9P0FUvWWDb7zKEgxp8a/s640/simpleup-clean-blogger-template.jpg" height="386" title="Lazy loading images" width="640" />

The modified image tag code will look something like this:
<img alt="Lazy loading images" border="0" 
data-original-height="483" data-original-width="800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZVHu49yl5hywiA0vG68bpa4sDOgG0OjS3zxy6LcLQ8xl3RODWsJ2W9CPPOUAC9a3IQ0K8M591ueGF4ehxPp-wTurD5lniLT3Nb8YIrm54BEjgsVRqfh08mMgXs9P0FUvWWDb7zKEgxp8a/s640/simpleup-clean-blogger-template.jpg" height="386"
title="Lazy loading images" width="640" />

You have to do make this changes manually for each and every images present that you want to defer. In case, you have any dynamic method, please leave the code in the comment section.

Also Read: 21 Tested Ways To Speed Blog Loading Time

Verifying Lazy Loading of Blogger Images

It is necessary to confirm whether lazy loading of blogger images is working or not.  There are many ways to do so. Either you can compare the page performance on GTMetrix with/without lazy loading or you can take the support of Inspect Element Feature present in web browsers.

  • Navigate to the page where you have implemented lazy loading.
  • Right click on empty space and select "Inspect Element".
  • Select the Network Tab and Refresh the page.
  • Scroll down and you should be able to see images getting loaded one after another as soon as you reach their viewport. Here is a small sample on how it looks:
lazy load blogger images easily

The images are loaded once they are in the viewing region. This is called lazy loading of images.

You can also use LightHouse Chrome Extension to test if lazy loading is working efficiently or not.
  • Add the lighthouse extension to your chrome browser.
  • It will be added to the right of address bar. 
  • Navigate to the page you want to verify.
  • Run the Light house test and you should be able to pass "Defer Offscreen Images" test.
Here is a detailed article on how to use chrome Lighthouse extension.

That's all. You have successfully implemented lazy loading of images in blogger and verified if it is working or not. Lazy loading of images improved our pagescore drastically. Now, its your turn. Happy blogging.

Here are a few handpicked tutorials for you to read next:
Show last Updated date in blogger posts along with published date 
How to know if a website is on Wordpress or not
Killer SEO Guides to follow in 2019 for higher ranking
Attractive 404 Error Page Design For Blogger

Share this post

Explore more articles by Aman Bhattarai


Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Nice Article!! I found many informative article in ur blog, following ur blog from a long time. I have a question, which template is twistblogg using . How can I get it. Can you provide me this. Thank u
    1. Hello there,

      The theme was designed by Jagodesain. Contact me to purchase it from official source.

      And thanks for sticking with Twistblogg :)
  2. Hi, can you help with loading this script on scroll(when user try to scroll down the page)

    <script defer="defer">(function(s,u,m,o,j,v){j=u.createElement(m);v=u.getElementsByTagName(m)[0];j.async=1;j.src=o;j.dataset.sumoSiteId='8269176e9893036ce39c39db3a7db45747f3901e53691454e253ed957e3a622a';v.parentNode.insertBefore(j,v)})(window,document,'script','//load.sumo.com/');</script>
    1. Hey, maybe this can help:

      There is also an extra feature i.e the floating box will disappear after reaching some point while scrolling.

      ** Change #widget-id with the floating box id.
      ** Change .end-widget with the widget class/id after which yo want the floating box to disappear.

      Here is the code:

      $(window).load(function() {
      var stickElement = $('#widget-id'),hideTrigger = $('.end-widget'),top = stickElement.offset().top;
      $(window).scroll(function () {var y = $(this).scrollTop();var maxY = hideTrigger.offset().top;if (y < maxY) {$('#widget-id').fadeIn(500);} else {$('#widget-id').fadeOut();}});});

      My opinion: It seems yo want to load external API Calls and tracking services for a simple floating box. It will impact Web Performance a lot. Why not try a floating box I've shared here in TwistBlogg.

      - No API Calls.
      - No tracking service.
      - Won't Impact Loading Time and Page Size.
      - 9 Social Channels Added.
      - Responsive Floating Box : Loads even in mobile devices
      - Animated Icons available in 2 versions and many more...
  3. Thanks for sharing this, it worked like charm. But there is an increase in the size of my blog page, fully loaded time and number of requests. Though the average pagespeed and yslow scores also increase drastically.
    1. With lazy loading installed, the page size and no. of requests must decrease. However, I can't be sure about fully loaded time as it depends on many other factors.

      I opened up your disqus account and visited the website. I'll suggest to lazy load all off-screen images for improving web performance.
    2. Help pls, post body img are stretched to 100% width
    3. Hey Jamiu Akinyemi

      I noticed the bug: The images where you have implemented lazy loading are stretched to 100%. The rest are doing well.

      How to fix?

      You need to revert back the images, where the problem is occurring, to default state i.e replacing data-src to src and removing the src=... already existing. Now, switch back to Compose Mode and adjust the size accordingly. It is always recommended to adjust width and height before making the changes (i.e changing src to data-src and adding another src). Hope that make sense!
Post a Comment