WordPress Lazy Load Images Without Plugin – A Complete Guide

There’s nothing new to say about the importance of page loading speed. When it comes to competing for the top rank in search engine results, every second matters. However, there are so many things that impact a site’s loading speed.

Images are one of them as, according to HTTPArchive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At the 90th percentile, sites send about 4.7 MB of images on desktop and mobile.

It’s huge for a visitor’s browser to load and render, and these heavy resources make loading a web page much slower. This leads viewers to wait until the large files are loaded.

Fortunately, you can fix this issue and improve your page loading time through a process called “lazy loading.” In this guide, I’ll show you the process of WordPress lazy load images without plugin. So, let’s get started without delaying anymore.

What is Lazy Loading on WordPress?

When a page loads, all the images aren’t downloaded immediately. Once you start scrolling down, first you’ll see a blurred version of it, and after that, the actual image starts being loaded in the background. This process of downloading and rendering the image until the user scrolls are called lazy loading.

It’s a best practice of SEO, which leads to lowering your web page load time by optimizing your overall site. This approach includes several benefits like-

• Your site visitors won’t require using much bandwidth to view your web pages.
• You can boost your website’s search rankings.
• It leads to an uplift of users and keeps them engaged, which ultimately leads to higher sales and conversions.
• The site will be able to offer a better mobile experience.
• Boost site performance by providing high-resolution images.

WordPress Lazy Load Images Without Plugin

Now that you’ve decided to implement lazy loading for your site images, let me tell you a few key considerations before getting it done.

• You should identify the images that you need to lazy load. The reason behind this is, not all images are ideal for lazy loading, only the off-screen images are considered for this process.
• The next thing to consider is the intermediate image or color, which should be shown once the viewer scrolls while the image is being loaded.
• When loading images, you should be careful about altering page structure.

The good news is, the latest version of WordPress 5.5 automatically adds the lazy loading attribute as a default feature. So, you don’t need to do any manual interaction or installing plugins.

But, if you’re using WordPress version 5.4 or older, you’ll need some optimization. Now, let’s see the processes of WordPress lazy load images without plugin. For this, you should have an intermediate level of knowledge about JavaScript and be comfortable working with it. So, let’s have a look at the following steps-

Using Browser Level Lazy Loading

Fortunately, <img loading=lazy> is supported by most popular chromium-powered browsers like Chrome, Firefox, Edge, and Opera. So, you can add this attribute to <img> elements. The value of lazy tells the browser to load the image immediately and to fetch other images when users scroll down to them.

Here’s how can you use the loading attribute to defer the off-screen images loading-

1. Add loading attribute along with the dimensions

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Alternatively, you can specify the loading attribute with the values directly in an inline style.

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

2. Image with Picture Element

If your images are defined using <picture> elements, you can still male them lazy-loaded. Here’s how-

<picture>
 <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
 <img src="photo.jpg" loading="lazy">
</picture>

3. Avoid lazy-loading images that are in the first visible viewport

It is recommended to use loading=lazy for images that are positioned below the fold instead of images that are in the first visible viewport.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Using Intersection Observer API

The intersection observer API helps to identify DOM elements that are in the viewport. It’s the way of implementing lazy load without writing event handler functions.

Here’s the basic markup pattern for your lazily loaded <img> elements-

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

Now, use the following markup pattern to implement the intersection observer in your JavaScript to lazy load images.

document.addEventListener("DOMContentLoaded", function() {
 var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

 if ("IntersectionObserver" in window) {
   let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
     entries.forEach(function(entry) {
       if (entry.isIntersecting) {
         let lazyImage = entry.target;
         lazyImage.src = lazyImage.dataset.src;
         lazyImage.srcset = lazyImage.dataset.srcset;
         lazyImage.classList.remove("lazy");
         lazyImageObserver.unobserve(lazyImage);
       }
     });
   });

   lazyImages.forEach(function(lazyImage) {
     lazyImageObserver.observe(lazyImage);
   });
 } else {
   // Possibly fall back to event handlers here
 }
});

The Google developers blog explained the implementation of intersection observer API through this CodePen Demo.

Conclusion

In recent days, lazy loading has become crucial for every website to speed it up and offer a better user experience. Everyone dislikes a slow-loading page in fact, a 1 sec delay in page loading leads to a 7% less conversion, 11% fewer page views, and a 16% decrease in user satisfaction.

Compared to the other web elements generally, images take the most time to load. To overcome this issue, I’ve shared the proven steps for WordPress lazy load images without plugin. Hopefully, you’ll be benefited after reading out the content.

What do you think of lazy loading? Have you used it to improve the performance of your website? Let me know, in the comment section below. Also, if with any queries, you can Contact Us; we’re always there to help you out.