How does lazy loading work?

When someone adds a resource to a web page like an image, video, etc., the resource references a small placeholder. As a user browses the web page, the actual resource is cached by the browser and replaces the placeholder when the resource becomes visible on the user's screen.

How do I know if lazy loading is working?

You can check to see that a module is indeed being lazy-loaded with the Chrome developer tools. Open dev tools in chrome by pressing Cmd+Option+i on Mac or Ctrl+Alt+i on PC and go to Network Tab.

Does lazy loading affect SEO?

Lazy loading images improves the user experience, first saving bandwidth for important content. Properly lazy loading your images does not prevent them from being indexed. And does not affect your website rankings .

News and Opinions

How to Lazy Load Images With 4 Easy Ways

Editorial Staff

January 9, 2022

32724 Views 0

SaveSavedRemoved 13

Why are lazy load images so good for your website, and what is the most efficient way to lazy load images? Lazy load images that are not in the viewport can improve the performance and user experience. This is all the detailed guide to lazy loading of images.

Images are essential to all websites and applications today. Whether it's a marketing banner, a product image, or a logo, you can't imagine a website without images. Unfortunately, the image's size is large and is the number one cause of slow page loading times.

What is Lazy Load Images Means?

A picture is worth a thousand words, so it’s no wonder many websites rely on graphics to convey their messages. Actually, it’s not a bad thing since we’re primarily visual types of users.

Still, the number of images used on a website directly impacts the page load speed. To face this challenge, web designers use the lazy load images technique.

Why do You Need to Use Lazy Load Images?

Lazy loading is a web-design technique that intentionally postpones the loading of offscreen images until a user scrolls down the page. Meanwhile, placeholders are used.

Now you can lazy load images quickly using these simple ways. If you want to fix your site core web vitals statistics and increase site speed, it becomes vital that you lazy load images. So your site does not load all together in one go, and only those images which need to be loaded above the page fold load first and do not slow down the rest of the page loading speed.

1. Add JS Libraries Scripts

How to Lazy Load Images With 4 Easy Ways — Lazy Load Scripts – How to Lazy Load Images

Сompared to writing code from scratch, grabbing a JS library requires the minimum effort to lazy load images easily. If you don’t really care what’s inside as long as it does the job for you, here’s a list of JS libraries recommended by Google to lazy load images:

Add any of the above scripts in the footer of your web pages to lazy load images. First, you need to download it. It will load the script on all your pages.

Here is what typically the code lazy sizes will look like:

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

You can either upload it on your server or use a CDN. You can also source the latest code from cdnjs and use the power of CDN to deliver the script faster across the world or use your own CDN to lazy load images.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>

Why Lazysizes When There are Many Scripts?

It is an SEO-friendly lazy loader for images as it does not block images from Googlebot even if they are not scrolled and loaded. And of course, there are other high-performance features that you can read up on their site.

Even Google recommends it in several of their support pages for Lighthouse and other core vital speed tests to lazy load images.

2. Edit Image Src Codes

The script will only work on those images where the image src has been replaced by image data-src, and this will help the script convert these images to image src when these images are loaded upon page scroll.

<img src="image.jpg" />

You need to change it by adding a data- as follows to lazy load images.

<img data-src="image.jpg" />

If you are like us and use srcset to make images sharper on 4K screens, you also need to replace it with a data-srcset.

<img src="image.jpg" srcset="image2x.jpg 2x" />

will be edited to

<img data-src="image.jpg" data-srcset="image2x.jpg 2x" />

3. Add LazyLoad Class

In this next step, you need to add a specific class to all the images, which will help the script identify that these images need to be lazy-loaded, and then it will work like magic.

The class to be added is lazyload, and you need to add it to whichever images you want to lazy load. Else, the script will not defer the loading of your images to lazy load images.

<img data-src="image.jpg" class="lazyload" />

and the code with srcset will look like this

<img data-src="image.jpg" data-srcset="image2x.jpg 2x" class="lazyload" />

So that’s it.

Now you can quickly scroll your long web page with images and see how images load delayed with page scroll to that area. You can also use site speed tests and see for yourself that those images are no longer counted in your page load times as they are not loaded.

What if You Cannot Edit all Image Tags?

If you are using WordPress, it would be better to use a WordPress plugin to change image src codes in bulk automatically. Most site optimization plugins now have the lazyload images script available, and you can load it in a click.

4. Use a Plugin if You Are Using WordPress

There are a couple of options out there that can give you lazy loading. The most popular solutions for lazy load images are:

Lazy Load by WP Rocket
a3 Lazy Load
Optimole

All these plugins will handle the lazy load images for you automatically. Each also comes with some nice side features to lazy load images.

Lazy Load by WP Rocket

How To Lazy Load Images — Lazy Load By WP Rocket – How to Lazy Load Images

You can lazy load thumbnails, all images in post content, or a widget text, avatars, smilies, and iframes. No JavaScript library such as jQuery is used, and the script weight is less than 10KB.

Lazy Load by WP Rocket also lazy loads of YouTube videos and replaces them with a thumbnail.
How To Lazy Load Images

Here is an example to put in functions.php files that disable lazyload on posts:

add_action( 'wp', 'deactivate_rocket_lazyload_on_single' );
function deactivate_rocket_lazyload_on_single() {
    if ( is_single() ) {
        add_filter( 'do_rocket_lazyload', '__return_false' );
    }
}

You can also replace YouTube iframes with a preview thumbnail to speed up your website's loading time.

DOWNLOAD LAZY LOAD BY WP-ROCKET

a3 Lazy Load

A3 Lazy Load is a Mobile-Oriented, very simple to use a plugin that will speed up sites page load speed. The more content-heavy your site, the better the plugin will perform, and the more you will see the performance improvements. See this demo of a page with 1,000 images (yes, 1,000 images) to load.

Images are the number one element that slows page load and increases bandwidth use. From the a3 Lazy Load admin panel, turn load images by a3 Lazy Load ON | OFF. For more flexibility when ON, you can choose to ON | OFF lazy load for images in:

Post, Pages, and Custom Post Types (All Content Areas)
Widgets (Sidebar, header, and footer)
Apply to post thumbnails
Apply to Gravatars
Fully compatible with WordPress embed post on any site feature introduced in version WP version 4.4
It makes embed post load much faster

DOWNLOAD a3 LAZY LOAD

Optimole

Optimole is the all-in-one solution to all of your image optimization needs. Optimole makes it easy to clean up your heavy images and bloaty pages with lazy load images with full automation and a range of revolutionary features.

What makes Optimole so special?

Smaller images. Same quality
Fully automated; set and forget
Supports all image types
Supports both Retina and WebP images
Serves images from a global CDN for free
Optimizes based on the visitor’s actual device (no more guesswork and width estimations)
Full support for page builders like Elementor
Lazy load without jQuery (better)
A fully functional free version

So, if you have been looking for one plugin that provides lazy loading with a CDN and perfectly sized images, then Optimole is perfect for you.

DOWNLOAD OPTIMOLE

Are There any Benefits of Native Lazy Loading?

Sites with a ton of images can take forever to load. For every image, that’s another HTTP request, and more time, your users have to wait in frustration while pages load slowly.

FAQs About How to Lazy Load Images

How does lazy loading work?

When someone adds a resource to a web page like an image, video, etc., the resource references a small placeholder. As a user browses the web page, the actual resource is cached by the browser and replaces the placeholder when the resource becomes visible on the user's screen.
How do I know if lazy loading is working?

You can check to see that a module is indeed being lazy-loaded with the Chrome developer tools. Open dev tools in chrome by pressing Cmd+Option+i on Mac or Ctrl+Alt+i on PC and go to Network Tab.
Does lazy loading affect SEO?

Lazy loading images improves the user experience, first saving bandwidth for important content. Properly lazy loading your images does not prevent them from being indexed. And does not affect your website rankings.

Conclusion – How to Lazy Load Images

Lazy loading is just one technique you can use to optimize your WordPress website. However, it can impact site speed if you use a lot of images and videos.

When building a website, consider lazy loading the assets when they are needed. This is both good for the user and the site’s servers and CDNs.