As functionality and interactivity increase on the web, there has been a steady increase in web page size over the last few years. As of early 2018, the average page size on the internet stood at over 2 MB! How to battle this? A little something called lazy loading images is one of the better solutions.
Let’s start with the table of contents of what’s to come:
Why lazy loading matters?
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.
What is lazy loading?
To understand how lazy loading works, here is a quick animated GIF demonstrating how images are rendered on CodeinWP.
When the page loads, all the images are not downloaded immediately. When you scroll down to an image, you first see a blurred version of it, and the actual image begins loading in the background. This blurred image is a low-definition version of the final image, at a fraction of the size. This phenomenon of deferring downloading and rendering the image till a user scrolls over it is precisely what’s called lazy loading.
Although “lazy” is generally associated negatively, lazy loading is actually a good practice and leads to lowering page load times by optimizing your site overall.
Note. In this post, we look at the process of lazy loading images, but lazy loading is not confined to just images – you can use the same idea when rendering any other resource like videos, the comments (there’s a whole section on how to do that in this post), and even fonts.
Benefits of lazy loading
As loading time of a web page is a major contributor to abandonment, lazy loading images can significantly lead to an uplift of users that stay on the page until it loads, which could ultimately lead to higher sales or conversions.
The other significant benefit of lazy loading images is lowered server bills. You serve only those images that the viewer scrolls through, and save on bandwidth for parts of the page that were not viewed. As images form a dominant part of the page weight, this could lead to potentially lower server costs.
Loading all the images up front is potentially detrimental for your readers too. If the user is on an unlimited data plan for the web, it probably should not matter. However, on plans with limited data, you are saving your viewer’s data by lazy loading images.
What to consider when lazy loading images
Now that you have decided to implement lazy loading on your website the right way, let us go over a few key considerations on how to get it done.
Identify the images you want to lazy load
Not all images are ideal for lazy loading. For instance, you wouldn’t want to lazy load the ones that are integral to the structure of your design and must be loaded in order to render everything correctly.
Only the images that are off screen and do not contribute to the page’s structure should be considered for lazy loading. Typically, these are images in the <img> elements that appear in the body of the page.
Pick you image placeholders
The next thing to consider is the intermediate image or color that should be shown when the image is being loaded once a viewer has scrolled over it. The image loading time depends on how large the image is, and can even take up to a few seconds. Therefore, you must consider what you would prefer to use during the load time.
There are two directions that developers usually take in this regard:
- Use the dominant color of the image as a background
- Use a low quality version of the image
The right choice here depends on the design of your site and what you would prefer to be shown to the user when waiting for the image to load.
Although one technique is to load images as soon as they enter the view port, you may want to consider adding a buffer time before that takes place – so that the user never sees the placeholder.
Beware of altering page structure when loading images
Before an image is loaded, it might be shown using 0 px dimensions. This is not ideal for maintaining your design structure.
This can easily alter the layout of the page and position of the text. A simple solution is to add the correct dimensions to the image right away — this ensures the size of the image element remains the same after load.
With the above considerations out of the way, let’s now look at how we can actually implement lazy loading on a WordPress site.
Option 1: 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
srcattribute 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 thedata-srcattribute 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 view port, load the value of the
data-srcelement into thesrcelement, 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.
Option 1.1: Use the intersection observer API
The intersection observer API helps identify DOM elements that are in the view port 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.
The Google Developers Blog explains the implementation of intersection observer API through this CodePen demo.
Option 2: Use a JavaScript plugin
The two options discussed above need intermediate level knowledge of JavaScript. If you are looking for an 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.
To use the bLazy library, you need to initialize <img> elements with the following attributes:
class: set the class of all<img>tags tob-lazysrc: link to the placeholder imagedata-src: link to the image to loaddata-src-small: link to the image to load on screens less than 420 pixels wide
You need to initialize the bLazy library in just a few lines of code and all your images will be rendered through lazy loading.
<script src="https://www.codeinwp.com/blazy.js"></script>
<script>
;(function() {
// Initialize
var bLazy = new Blazy();
})();
</script>
A CodePen demo is available here.
Option 3: Use a WordPress plugin
There are a couple of options out there that can give you lazy loading. Most notably:
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 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.
Like with most plugins, to get lazy loading, just install the plugin and enable the feature in the plugin’s control panel:
Conclusion
This post explored the need and benefits of lazy loading images. We also discussed three different ways of implementing lazy loading on a WordPress website:
- If you have intermediate proficiency in JavaScript, you can implement lazy loading from scratch
- If you know some programming but do not want any plugins, a lightweight JavaScript library, bLazy is an option
- If you would like a one-click solution for lazy loading images on your website, you should go for a plugin such as Optimole
What do you think of lazy loading? Have you tried using it to improve the performance of your website?
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:
