When working with bloggers one major limitation for the common users is they don’t have various plugin support. Plugins like image optimization plugin, Caching plugin that will help store caching of your website.
In this post, we are going to discuss how to install the lazy load script in your blogger and enable defer Off-Screen Images in blogger platform.
As you know that Visual Content is really important for engagement and if there are images on your website it will take resources like cellular data and server to load when someone opens your page, which may slow down the performance.
To grab the attention of the users you should have LCP (Largest Contentful Paint) within 2.5sec for better engagement.
According to Google, the average loading of the webpage is 22sec. Website speed matters a lot to gain traction.
So with the limitation of blogger, the best way to optimize the speed is by using image formats like JPEG 2000, JPEG XR, and WebP plus also implement lazy load on Blogger.
Explain Lazy Loading
It helps in optimization for the website in which it delays the loading of image and video until they are needed which mean until user scroll toward it and reduce the initial server time.
If the web page contains multiple images and if users scroll down the page. The lazy load will load images one by one according to the scroller.
This technique contains several benefits, it reduces the initial server load time which decreases the size of the page at loading, it helps both server and user’s cellular data. Lazy loading helps conversation of bandwidth by providing content to users when requested.
Enable Lazy Loading in blogger
Below are the steps to enable lazy loading in bloggers. It will be installed for every blog post image automatically. Before adding any line of code and script you should always back up your template and blogger content.
- In blogger Click on Theme section
- After Click on Edit HTML from the drop-down menu.
- In HTML editor click on ctrl + F, paste and search </body> or scroll down to the end you will find this </body> tag.
- Paste the JS code above </body> tag and save it.
<!-- Blogger Scripts -->
<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://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s1/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Now you have updated the script in the blogger and implementation is completed. Now as an operator you can check the website speed and other aspects in google Page Speed Insight. It will show in the Audits if lazy loading is implemented correctly or not. In the below screenshot that my website passed the audit on lazy load aka Defer offscreen images.
- Popup For Blogger – Add Popup Widget in Blogger 2021
- How To Undelete Blog Post On Blogger 2021: Full Guide
Another Way To Verify Lazy Loading Of Blogger Images
If you assure if your lazy loading for Blogger post images is working properly or not. One way you can use GTMetrix comparison side by side or we can use the inspect feature of the browser for a live test.
- Go to the page where you have implemented lazy loading.
- Right-click on empty and Click on “Inspect Element”.
- Select the “Network” Tab and Refresh the page.
- Scroll down and See your images getting loaded one after the other as you reach their viewport.
- Here is a sample of how it looks:
Images loaded once users scroll to their viewing region. This is called the lazy loading of images.
There is also a lighthouse extension available in the Chrome web store
- Add the lighthouse extension to your chrome.
- Navigate to the page you want to verify.
- Run the Lighthouse test and you should be able to pass the “Defer Offscreen Images” test.
Congratulation you have successfully implemented lazy loading of images in blogger and also verified.
this script not working in blog
It is working on my BlogSpot blog, as I mentioned you have paste it above tag. Also I am using Supermag template by templateify, sometime template conflicts with scrpits, try switching to supermag.
Thanks