Best Script For Lazy Image Loading On Blogger in 2023.(Updated)

Today I want to talk about improving the performance of your blog by enabling lazy-loading images on your Blogger website. Lazy-loading images on your website can drastically speed up the initial load of your content, which can improve the user experience and SEO. This also saves a ton of data, which can improve your mobile performance. 

You can enable lazy-loading images for your content on the Editor and HTML building blocks of your website in just a few minutes, and the benefits will be immediate.

I discovered that lazy-loading images on a blog had a significant impact on page load speed. For example, if you have a blog post with images that take up half the page load time, but the images are lazy-loaded instead of being fully rendered before the page is loaded, the page will load in half the time. 

This has the potential to be a huge time saver when it comes to page loading times, so I decided to use it on the Blogger website. However, I quickly discovered that lazy-loading images on the Blogger website weren’t as simple as it was on WordPress.

Why use a lazy load for images?

The primary goal of lazy loading is to improve the page load by loading visible content first. The off-screen and below-the-fold content is only loaded when they come into the browser viewport. Images that are not close to the viewport should be deferred until users scroll down to them.

In simple terms, you can understand it as loading only those images which users can see on the screen while scrolling. It improves loading time and speeds up pages with lots of heavy images.

Deferring offscreen images in a blogger blog can give your site a performance boost of around 4X times. Lazy load improves not just initial loading time but also subsequent page loads as well.

Optimize your website for faster loading

Optimize your website so it loads as fast as possible.

There are many ways to optimize your website for faster loading. Some common methods include:

• -Reducing the number of HTTP requests
• -Optimizing images and other media
• -Minifying CSS, JavaScript, and HTML
• -Using a content delivery network (CDN)

Additional Boost Script For Bloggers.

Increase blogger website speed using DNS-prefetch and pre-connect Scripts.It is the best website booster script helps to increase your blogger website speed.It is using the preloading rule on the most used script. so, all website scripts load Fastly on the browser. So, why you are late , just Click button and Get Code free.

Boost Script Features:

• Preconnect Scripts For Fast Loading
• Additional Scripts For Fast Loading
• DNS Prefetch Scripts For Fast Loading

Get Code Free

What is jquery lazy load?

Lazy load is a technique for loading images only when they are visible to the user. This can improve performance, especially on mobile devices where internet connections can be slow.

jQuery Lazy Load is a jQuery plugin that delays the loading of images on long web pages. Images outside of viewport (visible part of web page) won't be loaded before the user scrolls to them. This is the opposite of image preloading.

Using Lazy Load on long web pages containing many large images makes the page load faster. The browser will be in a ready state after loading visible images only. When the user scrolls down to view the rest of the page, images below the fold start loading one by one.

Page loading VS Lazy loading

One of the best ways to understand the difference between page loading and lazy loading is to compare the experience of opening a web page. When you open a web page, the browser needs to load all of the page content, including all of the images, CSS, and JavaScript. This takes time and uses up memory, resources, and bandwidth. The opposite of pre-loading is lazy loading, which causes images on a web page to be loaded only when they are visible to the user.

When you’re optimizing your blog for faster loading, it’s important to keep in mind that lazy loading is only one part of the equation. Lazy loading is effective when used in combination with other optimizations that help improve page speed, such as minification, image optimization, and using a content delivery network (CDN). Using Lazy Load on long web pages containing many large images makes the page load faster. The browser will be in a ready state after loading visible images only.

How to add lazy load image script on blogger in 2023?

To add a lazy image loading script to Blogger in 2023, you'll need to add a few lines of code to your blog's template.

Implementing lazy loading on a website can help improve page load times and performance. 

Here are some steps to take in order to get lazy loading working on your site:

1. Back up your template first. 

2. Go to your blogger dashboard. Choose the 'Theme' option from the left menu and click 'Edit HTML' 

3. Now at the template end, you will see the code </body>. Just above this body-end tag paste the following lazy loading script into your template.

<!-- Lazy load offscreen images with lazysizes script start -->
<script async='async' data-cfasync='false' defer='defer' type='text/javascript'>
//<![CDATA[
const hasSupport = &#39;loading&#39; in HTMLImageElement.prototype;document.documentElement.className = hasSupport ? &#39;pass&#39; : &#39;fail&#39;;document.querySelector(&#39;span&#39;).textContent = hasSupport;
//]]>
</script>
<!-- Lazy load offscreen images with lazysizes script end -->

4. Now, while writing the blog pages, you have to add a lazy loader tag with each img tag as shown below: 

Replace your existing code:

<figure>
<img src="your-image-URL" alt="your-alt-tag" width="500" height="555" title="your-title-tag"/>
<figcaption>your-image-cation</figcaption>
</figure>

with the code as:

<figure>
<img loading="lazy" src="your-image-URL" alt="your-alt-tag" width="500" height="555" title="your-title-tag"/>
<figcaption>your-image-cation</figcaption>
</figure>

(You need to update all your old published pages too.) 

5. Save the template and check your website speed

Today we saw how adding a lazy loading plugin to a blogger blog can help improve page loading times. As you know, page load speed is the ranking factor as Google algorithm updates states, so slow loading will improve your SEO ranking and thus positions in search SERPs thus you can attract more organic traffic to your site. 

Not just for SEO but to improve user experience and boost conversations.

If you've implemented a lazy load script on your website, share your thoughts and experiences in the comments below.