JavaScript

Improve Website Speed with Lazy Loading Images! lazysizes.js Guide

 

In this guide, we will introduce how to use lazysizes.js to enable lazy loading for images on your website.
There are many ways to improve website performance, and one of the most effective methods is “Lazy Loading Images.”
This technique helps enhance page loading speed, which is beneficial for SEO and provides a better browsing experience for visitors.
By implementing this method, you can also improve your rating on Google’s PageSpeed Insights.

Contents
  1. Introduction: What is Lazy Loading?
  2. Using lazysizes.js
  3. CSS Setup
  4. HTML Setup
  5. JavaScript Setup
  6. Demo Page Using lazysizes.js for Lazy Loading Images
  7. Source of lazysizes
  8. Conclusion

Introduction: What is Lazy Loading?

Lazy loading is a technique where media content such as images and videos are not loaded until they are needed.
For example, images are only loaded when they enter the visible area as the user scrolls down the page.
This reduces initial page load time and improves performance.

Using lazysizes.js

lazysizes.js is a lightweight and flexible lazy loading script that is highly popular.
Using this library, you can easily implement lazy loading for images.
Below, we will focus on how to implement lazy loading with lazysizes.js.

CSS Setup

First, set up basic CSS. Customize as needed.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.wrap1{
  width: 90%;
  margin: 0 auto;
  padding-top: 800px;
  text-align: center;
}
.wrap2{
  width: 90%;
  margin: 0 auto;
  padding-top: 800px;
  text-align: center;
}
</style>
<!-- lightgallery.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.2.0/css/lightgallery.min.css" />

HTML Setup

Next, set up the HTML. Add class=”lazyload” to the img tag, specify a lightweight image (such as “src=”loading.gif”“) as the placeholder, and use data-src=”~” to set the actual image URL for lazy loading.

<h1>Scroll down to see two images being lazy loaded</h1>

<div class="wrap1">
<img class="lazyload" src="loading.gif" data-src="technology-1283624_1280.jpg" alt="">
</div>
<div class="wrap1">
<img class="lazyload" src="loading.gif" data-src="capwp210804-768x768.jpg" alt="">
</div>

JavaScript Setup

Finally, add the following script at the bottom of your page to activate lazysizes.js.

<script src="lazysizes.min.js"></script>

Demo Page Using lazysizes.js for Lazy Loading Images

We have prepared a demo page showcasing lazy loading with lazysizes.js. You can check how it works in practice.

Demo: Lazy Loading Images with lazysizes.js

Source of lazysizes

You can download the lazysizes.js source files from the link below.

lazysizes

Conclusion

Lazy loading images is a simple yet effective way to significantly improve website performance.
It is also crucial for SEO and enhances user experience.
By using lazysizes.js, you can easily implement this technique and boost your website’s loading speed.
Give it a try!

※ If you reuse this code, please do so at your own risk.
Do not use the Google Analytics tag from the demo page’s head tag.

Lazy Loading Images lazysizes.js
RELATED POST