Doing some routine research, I came across an article titled WordPress 5.4 Will Add Lazy-Loading to All Images. It got me thinking – I had never bothered with lazy loading. Maybe I should. I wonder how much it improves load time.
Lazy loading tells the browser to immediately load just the images in the user’s viewport. No need to spend bandwidth loading images that the user won’t see – until the user scrolls down and more images enter the viewport. This purportedly decreases load time and enhances user experience. But by how much? I decided to do my own test.
There are a number of WordPress plugins that apply lazy loading, but I’d like to avoid adding yet another plugin if practical. Turns out it is pretty easy to apply lazy loading using just HTML. I add loading=”lazy” to the image tag. So, for example,
<img src=”https://mysite.com/wp-content/uploads/2020/01/kennymccormick.jpg” alt=”The Kenny character from South Park” />
becomes
<img src=”https://mysite.com/wp-content/uploads/2020/01/kennymccormick.jpg” loading=”lazy” alt=”The Kenny character from South Park” />
On to the test. I created an image-heavy page consisting of 24 posts, each including a large image. I initially left out the lazy loading attribute from all the images. I tested using webpagetest.org, taking the median result of nine test runs. Median load time was 6.85 seconds. Yikes! That’s slow. But what about user experience? I opened a private browsing window and loaded the page. Yep – annoying delay waiting for the visible part of the page to load.
Next I applied the lazy load attribute to all the images and retested. Median load time was greatly reduced, to 2.54 seconds. Not bad. Not great either, but for the purposes of the test I was not using any caching. I again opened a private browsing window and loaded the page – very much better. It didn’t exactly snap up, but there was just a slight delay in loading the visible part.
So, I’m convinced. Lazy loading is a good thing. I will use it going forward. I probably should have been using it long before now.
