Do you want to Enable Lazy Loading in Blogger? Follow the below steps carefully to Enable Lazy Loading in Blogger, and enjoy a faster website, first let us understand what is Lazy Load and how it increases the speed of a website.
What is Lazy Load?
Lazy Loading is a pattern commonly used to make a webpage load faster by loading the images and videos, after the full webpage is loaded. If you use Lazy loading on your site, only the images above will load, As the user scrolls the page, the rest of the images are loaded.
From a technical perspective, Lazy loading works better for a JavaScript that checks the current viewport of your visitors and loads only the images that are visible to them.
Lazy loading only comes into action when many visitors reach your images or they scroll down the page. If they don't access the images, they don't need to be loaded.
Lazy loading is a script that is entered into the code of the page, due to which the image and video files are not loaded as soon as the user opens the page, but they start opening when the user is in that part of the website. where the pictures or videos are located.
Apart from this, the website loads very fast for lazy loading and gives satisfaction to the customers at the same time. This type of programming script is directly helpful in improving the website loading speed and makes the website more likely that users will stay on that website and as a result the conversion rate increases.
This saves users bandwidth as they do not have to download all your images; In addition, the user can browse your site much faster.
Lazy loading is a great way to optimize both perceived and actual performance.
What is the effect of Lazy Loading on Seo?
Google has always been advising publishers to increase the speed of their websites. They have always released many tools and articles to help website owners improve the speed of their sites. To improve the speed of a website, Google suggests delaying the loading of off-screen images.
This is possible to do with the use of the Lazy Loading Technique. Because images are usually the largest part of the web page and which has a big impact on the speed and SEO of a website.
Generally, Google has always adopted confidentiality regarding the factors of ranking. But, when it comes to a site's speed, Google has publicly stated that site speed is a ranking factor for mobile search. Lazy loading technology is a useful script to make sites load faster on mobile devices.
How to Enable Lazy Loading in Blogger
- At first, you need to go to the Blogger dashboard i.e. Blogger.com.
- Go to the Themes Section
- Click Edit HTML Button.
- Copy the Javascript code given below.
- Find the </body> tag and paste the Javascript code above it.
<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/AVvXsEgzS_UA7xlAHpP19AVGFj5zpNSAAFtlAEVlv_E2swctZIXXg09pvDhuo5da5hTiZJ3rF2hXr3mHeEkeZMV2PtzIj13Ew29iB0Z6ypqrgYCT5qSeMZ3HROXcIfZN0GaqrgPAns0gNsRKjKE/s10/loadingku.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
- Then Click The Save Button
FAQ
-
Lazy loading is an exercise of loading the content of a web page, which makes it useful to improve the performance of the system and save your resources. The advantage of lazy loading is that it reduces the initial loading time of a webpage.
Lazy loading reduces the weight of web pages and contributes to faster loading.
-
A Lazy Loading Image means the slow loading of images on websites, this means that if a user does not scroll the webpage completely, the images at the bottom of the page will also not load.
-
As the name suggests, the content is loaded continuously as the user scrolls the web page. As the user scrolls through the page, the images in the viewport are replaced by thumbnails and after a specified number of images are displayed, a button pops up allowing the user to load additional images.