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
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.
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.
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.
var bLazy = new Blazy();
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: