Add Lazy Load Blogger Script To Defer Offscreen Images
Lazy load Blogger script will help you to defer offscreen images. Lazy load script improves page loading speed. Learn how to add lazy load script.
|
| Lazy Load Blogger Script |
Media files such as images make our blog post look attractive and eye-catching. Images are heavy files and use a lot of space which leads to the slow page loading speed of our website and when we check the page speed it shows "Defer offscreen images", in short telling us to use Lazy Load script. If your website is using too many numbers of images then you should use the Lazy Loader plugin for Blogger.
If you are one of those, using the Google Blogger platform for blogging,
then it becomes too difficult to install Lazy loading plugin as Blogger doesn't support installing plugins.
You might have spent too much time, trying to reduce, compress the size of
your images, using software or other online methods but still, Page speed
checker tool says to Defer offscreen images or consider using Lazy loading plugin.
But don't worry, with the help of this tutorial, you will learn how to
significantly reduce the page speed loading time of your Blogger blog and
boost it by installing Lazy Load script in Blogger.
What is Lazy Loading?
Lazy loading is an optimization technique for media
files. Instead of loading the whole web page and rendering it, lazy
loading plugin assists in loading only the essential part of the web page
and delays the remaining.
Benefits of Lazy Load plugin in Blogger
- Using Lazy Load script in Blogger will make your content of your blog load first, images are loaded after the content is loaded.
- Lazy load plugin makes your site loads faster and boosts your website SEO performance.
- when images are lazy loaded, your web browser won’t need to parse resources until they are requested by scrolling down the page.
- Lazy loaded images will help the visitors to save data and bandwidth.
Is Lazy Loading Bad for SEO?
Using lazy load for blogger is undoubtedly a good practice for SEO. Search
engines such as Google and others can deal with images which are lazy
loaded. Google promotes using lazy loading in its Developers guide.
Should I use lazy loading?
It depends if your website is using a number of media files which are
quite heavy to load then definitely you should use it, as using lazy load
blogger script you will see good page speed performance.
Advice - It is highly
recommended to backup your existing template before customizing or
making changes to your template as if something goes wrong, you can
restore your original template.
How to add Lazy load Blogger script?
As you know using lazy loading blogger plugin will drastically improve
your website performance, now let us add it to your website.
1. Log into your Blogger
2.Select Template or Theme and Click on "BACKUP" then Click on "EDIT HTML".
3. Now search for the </body> and paste the below script just above the </body> tag.
2.Select Template or Theme and Click on "BACKUP" then Click on "EDIT HTML".
3. Now search for the </body> and paste the below script just above the </body> tag.
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVNR_RDPdWhRt0B9wwFGe5_UfG0ZMdrDSk5W0WkGCTtBVUcefh_qiEGIR7inkBziW2LXE-v19-fytZ5RgeM0EFARHY4HQtLPGHwFkiBI6neMRviadyeWRcK71LePlxs5lOmcA6QRfI8o9/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Video Tutorial
Verifying Lazy Loading Blogger Images script
There are many ways to verify that lazy load blogger images plugin is
working or not. You can compare the page speed performance on
GTMetrix
or
PageSpeed Insights
with/without lazy loading or you can verify with the help of Inspect
Element Feature of web browsers.
- Navigate to your website.
- Right-click on empty space and select "Inspect Element".
- Select the Network Tab and then Refresh the page.
- Scroll down and you will see images are getting loaded one after another.
Conclusion for Lazy Load Blogger Script
This script is based on JQuery. Whenever visitors will scroll down your
page, images will load one after another with an animation effect.
If this tutorial about Lazy loader plugin for blogger helped you in
optimizing the images of your Blogger blog then kindly share it.
And if you find any difficulty installing this plugin, leave a comment
below and I will get back to you.
Bonus guide: How to add Table of Contents in Blogger.
Bonus guide: How to add Table of Contents in Blogger.
2 comments