How To Enable Lazyloading Images On Blogger Website
 |
| Lazyloading Images On Blogger Website |
One of the most important things for better rankings is how fast a website is, and you won't find caching and image optimization plugins on a blogger site. So, in this article, we'll talk about what lazy loading is and how to turn it on for your Blogger site.
Images are a big part of how quickly a website loads, and if you use a lot of images on a page, it will need more resources and take longer to load.
For a better user experience, a website should load in less than 3 seconds, but Google research shows that the average time for a web page to load is 22 seconds. To make your site load faster, you need to optimize your images better.
On WordPress, there are many plugins for optimizing images, such as short pixel, Smush, etc., but on Blogger, you have to manually optimize and upload your images.
So you can use image formats like.webp and JPG 2000 to improve the speed of your website. You can also use lazyload on a Blogger site to make it faster and better for users.
What is Lazyloading?
Lazy loading is a way to speed up the first load time of a website by delaying the loading of resources or objects until they are actually needed.
For example : if a webpage has multiple images at the bottom and the user has to scroll down to see them, you can show a placeholder and only load the full image when the user gets to that spot.
There are several advantages to letting images load slowly. It speeds up the first load time by making the page lighter and saves resources on both the server and the client. Lazy loading helps save bandwidth by only giving users content when they ask for it.
For example : suppose a blog post has six images and a user scrolls down to the third image but does not scroll any further. In such situation, the browser will only load three photos, saving server resources.
The browser will prioritize loading images visible above the fold of the screen while using lazy-loading (viewport). You can minimize the total page size while also improving your core web vitals score in the page speed insight report.
Steps to Enable Lazyload on Blogger:
Follow the steps below to add a script for bloggers to load pages slowly. It will automatically use the lazy load for all of the images. You do not have to add the Inline <img> tags by hand.
Step 1 : Go to the Blogger dashboard and click on the theme section.
Step 2 : Then click on Edit HTML from the drop-down menu.
Step 3 : Click Ctrl+F on the HTML Editor and search for </body>. You can also scroll all the way to the bottom to find this </body> tag.
Step 4 : Copy the JavaScript code below and paste it just above the </body> tag. Then save the file.
<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/AVvXsEgHA4pLSNyhAjMF1g0yqkPQB3Flop_DdrYeNMSFjpyFaO3lWS4Dcc6ffcAQaOB7QCvV1uyZYStZ4jDVowNVhW1HiOeqqevQzY2DWRwN_pywLNl1Zf8zB7KQLYxyoPGMJer-O80ulo0Wdj5O/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>
Lazyload Images without Any script
<img loading="lazy" src="#" alt="image alt tag" />
Farhan
Hello there, My Name is Farhan and Welcome To My Website. My Passion is to Share Knowledge With Everyone. Also I am a Larner.
