How to Use Native Image Lazy Loading to Speed Up Blogger Websites
Page loading speed is one of Google ranking signals. For us Blogger users, we are luckily blessed with a reliable Google hosting. Even though it is free, the loading speed is undeniably fast.
So, if this platform is used properly, you will be able to create a website with great performance.
Google is using page speed as a ranking signal since 2010 for desktop users and 2018 for mobile users. Did you know that most users will click away and abandon a website if its loading speed is longer than 3 seconds?
So, even though Blogger is already fast, we need to make it much faster. We are in need for speed! You can make Blogger loads even faster by utilizing native image lazy-loading feature.
Read also: How to Solve AdSense Policy Violation "Site Behavior: Navigation"
What is Image Lazy-loading?
Having several pictures in our blog posts is essential to drive traffic from Google Search Image. Pictures also provide additional value to our articles. After all, one picture is worth a thousand words.
Image is usually the biggest resource in a webpage. Video does take a lot more bandwidth to load. But in a blog post, image is used more often than video. We do not always embed a video and that is fine. However, a blog post without an image is incomplete.
Lazy-Loading vs Normal Loading Comparison
I have created two identical Blogger posts which contain 10 images. One of the posts is using lazy-loading:
Open those two posts. Which one loads more efficiently and faster? The difference will be very extreme if your internet connection is slow.
You can compare the two pages via How to Use Google Question Hub for Blogger to Create Original Articles
How to Implement Native Lazy-loading in Blogger
Previously, we needed a third party library or using scripts to implement lazy-loading. It is not beginner friendly. Thankfully things have changed.
Nowadays we only need to add a simple code in our image HTML tag. Browsers will recognize the code and initiate lazy-loading when a user open the page.
In order to implement native lazy-loading in Blogger, do the following steps:
Step 1: Inserting Image
First, insert your images. Don't forget to add alt and title texts for SEO purposes. Caption is optional, but it is always a good idea to provide additional context.
