We should all have known by now that Media files such as images are vital for enhancing the appeal and engagement of any site and blog post.
However, if there are so many images on a single page, it can significantly increase page size, leading to slower loading times.
To combat this issue and ensure optimal performance, lazy loading of images, also known as deferring offscreen images, proves to be a valuable technique.
What is Lazy Loading
%20(20)~2.jpeg "Lazy Load") |
| A google lazy load visual explanation |
Lazy loading involves delaying the downloading of off-screen images until they become visible within the user's viewport.
By implementing lazy loading, you can enhance page loading times and improve your search engine ranking, as well as provide a more data-efficient browsing experience for their visitors.
How to Implement on Lazy Load on Blogger
If you ask this question in like years ago then you will find out that the solution to it is to add a javascript or use Native loading. All that is half gone now as there is now a much more easier way to lazy load on Blogger.
Just as wordpress or other CMS users would use plugins; In such way, implementing lazy loading in Blogger has become even more accessible.
The Blogger platform now has a native support for this feature. Without the need for third-party scripts, you can now effortlessly enable lazy loading for your post images directly from the Blogger settings.
How to Enable Blogger New Lazy Load Setting Feature
You can add lazy load to your blogger with no much hassle.
To enable the Feature" navigate to Settings > Posts and enable the Lazy Load Images option. That's all π€·πΎ♂️
Blogger had also added some other settings option like to serve images as webp.
How Does this Setting Work
In the last post on webp serving, I a got similar question so in this post I decided to try to explain ππΎ. Does blogger change anything in your template? Or what change is made to allow auto lazy load ?
This is it. It's simple there is nothing much to this it's just like the Native lazy load. Blogger automatically adds the loading="lazy" attribute to all tags within the post/page content.
This attribute instructs the browser to defer the loading of images until they enter the user's viewport, thereby optimizing page loading performance.
Native Lazy Load
Native lazy loading is a feature supported by modern web browsers that allows images and iframes to load only when they are needed, which helps to improve the speed and performance of web pages.
When you are reading an article online that has lots of images. With native lazy loading, the browser doesn't load all the images at once when you first open the page.
Instead, it waits until you scroll down to where the images are supposed to appear on your screen. When you reach that point, the browser then loads those images. This way, the page loads faster initially, and you don't have to wait for all the images to load before you can start reading.
It makes your browsing experience smoother and more efficient. This is this the lastest way to lazy load and this is what blogger help you set in place.
You can always use the Native lazy load manually. This works by adding loading="lazy" attribute to your images. So it would look like this ;
<img src="example.jpg" loading="lazy" alt="..." />
Things to Note
The blogger Lazy load setting option only targets and affect only images in posts. This means other images on your website won't be lazy loaded and you might need to add the Native Lazy Load manually on other photos in your template. Just add loading="lazy" attribute to the no-post images img tag.
Also, not all browsers support the Native Lazy load feature attribute. The List is here
If you dont mind and hope all your viewers would view your post from only mordern browsers. This is not a worry even search robots do not use those browsers to crawl pages. You can overlook this.
But if you want a flawless lazy load implementation, this is where javascript based solution might come in. You can utilize third-party scripts for comprehensive lazy loading functionality.
How you won't worry about the javascript load time like me ✅
I Have shared the best JavaScript lazy load implementation works not for only images but for iframes too. It even works on legacy browsers that do not support the loading="lazy" attribute.
ππΎππΎππΎππΎππΎ
[ Card link]
By integrating lightweight scripts into your Blogger templates, you can achieve advanced lazy loading functionalities, such as lazy loading of images, videos, iframes, and more.
Closing
It is still very much recommendable to Enable the blogger lazy load option and make use of its service.
By adopting lazy loading techniques, Blogger users can enhance their website's performance, improve user experience, and align with best practices for modern web development.
Whether opting for Blogger's native lazy loading feature or using JavaScript-based solutions, prioritizing lazy loading ensures good utilization of resource and optimized content delivery for a seamless browsing experience.
Happy Blogging π€
Useful Links
Image Kit - Lazy Loading Images – The Complete Guide
Web.dev - Browser-level image lazy loading for the web
