WordPress Lazy Loading Implementation Guide

Would you like to use lazy loading for images in WordPress? Lazy load allows your website to only load images when a user scrolls down to the specific image. You can see it in action on many popular websites like Buzzfeed. In this article, we will show you how to easily lazy load images in WordPress.

Why Lazy Loading Matter?

The huge payload of a web page consists primarily of images, scripts, stylesheets, fonts, and videos. However, images take up over 60% of the size of a typical web page. Images are also critical to the design of a web page, so it’s not like you can get rid of them.

Without any optimization, the user’s web browser downloads all the resources before rendering a page completely. This leads to increased load times, which can draw people away. WooCommerce estimated that for every 100ms of page speed improvement, an e-commerce website can increase revenue by 1%.

In a scenario like that, doing whatever it takes to optimize your load times makes a lot of sense. And since images are the primary contributor to web page size, starting with them is a good idea. This is where lazy loading comes into play.

Implement Lazy Loading From Scratch

Let us first look at how to do this without using any plugins. This option is recommended for those of you who are comfortable with JavaScript. Ideally, the following steps need to be taken:

Prevent image loading during page load: When you specify the URL or path of the image in the src attribute of the <img> tag, the image will be downloaded by the browser during page load. To prevent the browser from downloading the image, you need to specify the location of the image in the data-src attribute of the <img> tag instead.

Register event handler functions in JavaScript to check for elements on two events: loading and scrolling. When an element comes into the viewport, load the value of the data-src element into the src element, which triggers the browser to load the image. A simple implementation of this process has been explained by Robin Osborne and the demo is available on CodePen.

Use the Intersection Observer API

The intersection observer API helps identify DOM elements that are in the viewport at any given point in time. This is a cleaner way of implementing lazy load without writing event handler functions. The number of lines of code to implement lazy load goes down considerably too. However, browser compatibility remains an issue. Moreover, the Google Developers Blog explains the implementation of intersection observer API through this CodePen demo.

Use a JavaScript Plugin

The two options discussed above need intermediate-level knowledge of JavaScript. If you are looking for easier implementation of lazy loading without using a heavy plugin that puts load into the server, you can try the plain JavaScript plugin, bLazy.

The bLazy library at a size of less than 2 KB puts no additional load on the payload while allowing you to handle lazy loading images easily. So, to use the bLazy library, you need to initialize <img> elements with the following attributes:

class: set the class of all <img> tags to b-lazy
src: link to the placeholder image
data-src: link to the image to load
data-src-small: link to the image to load on screens less than 420 pixels wide

Finally, you need to initialize the bLazy library in just a few lines of code and all your images will be through lazy loading.

<script src=”blazy.js”></script>
<script>
;(function() {
// Initialize
var bLazy = new Blazy();
})();
</script>

Using a WordPress Lazy Loading Plugins

All these plugins will handle lazy loading for you automatically. Each also comes with some nice side features. For example, Lazy Load by WP Rocket also lazy loads of YouTube videos and replaces them with a thumbnail.

Optimole, apart from being the newest addition to the ThemeIsle family, also gives you rock-solid image optimization (as tested here) with quite advanced features in that regard. For instance, it gives you dynamic resizing based on the user’s screen size. Image optimization & Lazy Load by Optimole Image optimization & Lazy Load by Optimole. Like with most plugins, to get lazy loading, just install the plugin and enable the feature in the plugin’s control panel: