Lazy Loading Images in Blogger
Lazy loading images in blogger is one of the crucial factors for better ranking and increase website speed and performance in blogger. On a blogger website, you will not find any caching or image optimization plugins. So, in this article, we will discuss what is lazy loading? and How to enable lazy load images in blogger?
Table of Contents
 |
| Lazy Loading Images in Blogger |
Images are essential parts of every website and play an important role in website speed. If you are using many images on a single webpage then it will request more resources and slows down your webpage or website loading speed. And, because of this, your website loses its ranking in google SERPs. So, it is important to use lazy images on blogger websites.
Every website should load within 3 seconds for a better user experience and better ranking in google SERPs which is recommended by Google. But according to Google research average loading time of web pages is 20 seconds or more. To improve your website speed you need to better optimize your Images.
In WordPress websites, you will find many Image Optimization Plugins but there is no plugin support on the Blogger websites and you have to manually optimize your images and upload them to your website for increasing blogger website speed.
So you can follow some techniques to optimize your website speed by using image formats like .webp, and JPG 2000. You can also implement lazyload on a blogger's website for better user experience and speed.
What is lazy loading?
Lazy loading is an optimization technique for Websites that delay the loading of resources or objects until they’re actually needed and reduce the initial load time.
For example, If a webpage has multiple images at the bottom of the page and the user has to scroll down to see the image, you can display a placeholder and lazy load the full image only when the user arrives at its location.
There are several benefits of enabling the lazyload for images. It reduces the initial load time by reducing the page weight and saves both server and client resources. Lazy loading helps conserves bandwidth by delivering content to users only if it’s requested.
There are mostly two advantages to using lazy load images in blogger websites. These benefits are;
- Performance Improvement,
- Cost reduction
For example, if a blog post has 6 images and a user scrolls down the page to the 3rd image and didn't scroll down further. In that case, the browser will only load 3 images and thereby saving some server resources.
With lazy loading, the browser will prioritize load images that are visible above the fold of the screen (viewport). In this way, you can reduce the total page size and improve your core web vitals score in the page speed insight report.
Which Images can be Lazy Loaded?
The basic idea of lazy loading is simple - defer loading anything that is not needed right now. For images, it usually translates to any image that is not visible to the user upfront and can be lazy loaded.
As the user scrolls down the page, the image placeholders start coming into the viewport (visible part of the webpage). We trigger the load for these images when they become visible.
Steps to enable lazyload on blogger:
Follow the below steps to add a lazyload script for bloggers. It will apply the lazy load for all images automatically. There is no need to manually add the Inline <img> tags.
- Go to the Blogger dashboard and click on the theme section.
- Then click on Edit HTML from the drop-down menu.
- On the HTML Editor click on ctrl + F and search for </body> or scroll down to the end you will find this </body> tag.
- Paste the javascript code just above the </body> tag and save 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://4.bp.blogspot.com/-XNnCtsmVWps/WwUzI4O3OMI/AAAAAAAAGzM/s5IzNI42txMh8ZglfGk9ktfD7CqQ0JkMgCLcBGAs/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>Now you have successfully implemented the lazy loading of images on the blogger website.
Now you can check your website speed on google page speed insight and It will show if the lazy load is properly implemented on your site or not. You can see in the below screenshot that my website passed the audit on lazyload.
Lazyload Images without Any script
If you don't want to lazyload images with a script then you can use the native lazyloading of the browser. So, in this method, you don't need any javascript code in your theme. You just need to manually add a small code to your image code like loading="lazy".
<img loading="lazy" src="#" alt="image alt tag" />
Adding this small line of code to your image tag helps the browser understand that this image will be lazyloaded. so, after that browser will only load those images when the user scrolls down below the page and reached the image position. This feature is used by most modern browsers.
How to test if lazy loading is working?
Once you have implemented lazy loading, you'll want to check if the behaviour of images on your website is as intended. The simplest way is to open developer tools in the Chrome browser.
Go to Network Tab > Images.
Here, when you refresh the page for the first time, only the images that are to be loaded up front should get loaded. Then, as you start scrolling down the page, other image load requests would get triggered and loaded.
You can also notice the timings for image load in the waterfall column in this view. It would help you identify image loading issues, if any, or issues in triggering the image load.
Frequently Asked Questions
What is lazy loading?
Lazy loading is a technique for waiting to load certain parts of a webpage, especially images until they are needed. Instead of loading everything all at once, known as "eager" loading, the browser does not request certain resources until the user interacts in such a way that the resources are needed.
Is lazy loading images good?
You should always use lazy loading for the images below the fold. As we explained, lazy loading will reduce the real and perceived loading time. User experience will benefit from it — and your users will thank you.
What is a lazy loading example?
For example, a web page has an image that the user has to scroll down to see, you can display a placeholder and lazy load the full image only when the user arrives at its location.
What is the most efficient way to load an image?
Three Popular Solutions 1. Preload images. Load images before displaying them. Here is an example. 2. Lazy-load images. Load images only as needed, such as when the visitor scrolls down far enough. 3. Load progressive images. Load a small (often blurred) preview image first, then a larger, high-resolution image.
Conclusion
Lazy loading images in blogger have covered almost everything related to lazy loading images in this complete tutorial for lazy loading images in blogger. Lazy loading, if implemented correctly, will significantly improve the loading performance of your web pages, and reduce page size and delivery costs by cutting down on unnecessary resources loaded upfront, while keeping the necessary content intact on the page.
You can either use the automated script method or the manual method to implement lazy loading on the Blogger website.
If you have any doubts regarding Image optimization or Lazy loading script implementation on blogger ask me in the comment section. Also, Subscribe to our weekly newsletter to get updated on future content that we post regularly.