One of the most important elements for higher ranking is website performance, and you won't find cache or image optimization plugins on blogger websites. Therefore, we will cover what lazy loading is in this post and how to implement it on your Blogger page.
Photos affect website performance significantly, and if you use a lot of images on a page, it will use up more resources and take longer for the page to load.
The ideal loading time for a website is three seconds, but according to Google data, the average page load time is 22 seconds. You must better optimise your images if you want to increase the performance of your website.
While there are several image optimization plugins for WordPress, such short pixel, Smush, and others, you must manually optimise your photos for Blogger before uploading them to your website.
So you may use image formats like.webp and JPG 2000 to enhance the performance of your website. For a faster website and improved user experience, lazyload may also be used.
What is lazy loading? (Images)
Websites can use a method called "lazy loading" to speed up initial page loads by delaying the download of resources or objects until they are really required.
You may display a placeholder and lazily load the complete picture only when the user reaches its location, for instance, if a webpage includes numerous photos at the bottom of the page and the user needs to scroll down to see the image.
The lazyload feature for photos has a number of advantages. By lightening the page, it cuts down on the initial load time and conserves server and client resources. By only sending content to consumers when they specifically request it, lazy loading helps save bandwidth.
For instance, suppose a blog article includes six photographs and a viewer only goes down to the third image before stopping. The browser will then only load 3 photos, conserving some server resources.
The browser will prioritise loading pictures that are visible above the fold of the screen using lazy loading (viewport). By doing this, you may decrease the size of the entire page while also raising your page speed insight report's core web vitals score.
Steps to enable lazyload Images on blogger
For bloggers, add a lazyload script by following the instructions below. It will automatically use the lazy load for all photos. The Inline img> tags don't need to be explicitly added:
- Select the theme area from the Blogger dashboard.
- Select Edit HTML from the drop-down menu after that.
- To find the /body> tag in the HTML editor, use Ctrl + F or scroll down to the bottom of the page.
- Just before the closing body element, paste and then save the javascript code.
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1MdiEKTBjT9WMtkzZaTVQ_GifQtICPEDns2KbPAApd_LZvt6pxX0svYqT00xnbJmzebGKNXIRy5fM-0hKKJDpWw9EfTu5b5JxVZjS-g0zxdJehyphenhyphenqJUFbyHyd87NbU9JscVhrbxmt8AAPY/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Your implementation of lazy image loading on the Blogger website is now complete.
You can now monitor the performance of your website using Google Page Speed Insight, which will indicate whether or not the lazy load has been effectively applied on your site. The snapshot below shows that the audit on lazyload was successful for my website.
Lazyload Images without Any script on Blogger
You may utilise the natural lazyloading of the browser if you don't want to lazyload pictures with a script. Therefore, you don't need any javascript code in your theme while using this way. You only need to manually add a little piece of code, such as loading="lazy," to your image code.
<img loading="lazy" src="#" alt="image alt tag" />
The browser will understand that this picture will be lazyloaded if you add this little line of code to the image tag. When the user scrolls down to the image location at the bottom of the page, the browser will then only load those images. The majority of contemporary browsers utilise this capability.
Lazy loading may be added to the Blogger website using either the automatic script technique or the manual way.
Ask me in the comments if you have any questions about lazy loading script implementation or image optimization on Blogger. Additionally, sign up for our weekly email to be informed about the new stuff we'll be posting.