In this blog post I want to talk about a technique to speed up your site by lazy loading images and or videos.
What Is Lazy Loading
It’s a technique to speed up the loading of a web page by deferring images or videos that are displayed “below the fold”. These images are not loaded as part of the initial page load and are only loaded as the site visitor begins to scroll down the page.
This makes the initial page smaller by not downloading the image and as a result makes the page load faster.
You might have noticed lazy loading on websites that show a blurred or low resolution version of images until you scroll over them and the full image is show.
What Is Below The Fold
That is the part of the web page that is offscreen when a page loads, here’s a zoomed out view of my blog page the line marks the “below the fold” part of my page. I think the term comes from newspaper publishing where the less important stories are show below the fold of the newspaper.
How to Add Lazy Loading
WordPress added this feature for images after version 5.4 natively, but there are plugins which also extend this function
My preferred tool is WP Rocket, this also offers lazy loading for videos, it will load an image place holder for videos rather than downloading the video from YouTube for example, the video is rendered when the site visitor gets to the placeholder image.
There is a free version of their lazy loading so you don’t need to buy the full plugin:
There is not much to do other than load and activate the plugin to be honest so I’ll not dig to deeply into the actual implementation of the plugin. Once activate attribute are added to your images.
How Lazy Loading Is Activated
Lazy loading is done at the browser layer and is an attribute on the IMG tag, <img loading=lazy>.
When the browser sees this attribute while loading the image the image is ignored and loaded when the site visitors scrolls over the image.
Wrap Up
So lazy loading is a way to speed up your web page load speed by deferring image or video loading. I recommend you implement this as part of your optimization toolkit.
Is your website loading slowly? Get in touch I’ve got a free speed audit where I’ll record a video to show you why your site is loading slowly.
Photo by Priscilla Du Preez on Unsplash