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.