In terms of data transfer size, media elements make up the largest slice of a typical web page. In many cases, these media elements are images and so they are usually the focus when we talk about lazy loading.
However, video and audio assets that are embedded using iframes from a third party service such as YouTube or Soundcloud can also be lazy loaded.
When you first open a web page, by definition, the only content you can see is what’s called ‘above the fold’ content. Basically, this is whatever fits inside the current size of your browser window (or screen, if you’re on a mobile). On mobiles in particular, this is not normally an awful lot of content. It will normally include:
- Logo
- Navigation menu
- Main heading with a couple of paragraphs
- Possibly an inline image or video
However, the rest of the page might contain several more images and icons with embedded video or audio elements too. By default, a visitor’s browser doesn’t care whether they can currently see these elements or not – it will set about joyfully downloading everything regardless.
On mobile data connections in particular, this can significantly slow down the speed at which the page initially loads. It will also chomp through the user’s data allowance, if they have one.
Adapt content delivery to suit user needs
This is not such a huge issue if your visitors are planning to fastidiously consume the whole page from top to bottom. However, most people aren’t going to do that (and I can set you up with page scroll tracking if you don’t believe me).
Most visitors will drop off the page before they reach the bottom – and even if they don’t, why make them wait for absolutely everything to load before allowing them to get started? This is the same as a waiter making the customer wait for him to bring out all five courses at the same time before the customer is allowed to begin eating!
The importance of being lazy
Despite sounding like a bad thing, lazy loading speeds up your site by preventing media assets from loading before they are needed. Since these elements normally take the longest to download, the speed benefits can be considerable. Naturally, if your site uses a lot of images (for example product galleries), or large images, the benefits will be more pronounced than if your site is mostly text-based.
Sometimes lazy loading can introduce new problems. For example, any image or other media element that always appears above the fold should not be lazy loaded. If your implementation is not configured correctly, lazy loading can make your website appear slower as it will force visitors to wait longer for the elements they would normally expect to appear immediately. We have ways of working around this, however…
WordPress is already lazy…
If you’ve updated your website since the release of WordPress 5.4 in March 2020 then your website will already have lazy loading – of sorts. The loading HTML attribute was announced back in August 2019 by Google Developers and support was subsequently integrated with the 5.4 release of WP.
…but not all browsers are!
However, support for the loading attribute is still limited to Chrome, Edge, Opera and Firefox (with partial support). Although this represents a large chunk of the browser marketplace, Safari support still isn’t quite there. The feature is still hidden under ‘Experimental Features’ meaning users have to switch it on manually, which in most cases they won’t.
Whilst the loading attribute carries several benefits over classic lazy loading implementations, if your audience includes a lot of iPhone users in particular, then chances are they will not be receiving the benefits of lazy loading yet.
Website performance on mobiles is about to become a significant ranking factor when Core Web Vitals is rolled into Google’s search algorithm in June 2021. For that reason we have the impetus to ensure we’re doing all we can to improve user experience for as much of our audience as possible.
So, for now, your best bet is to use a JavaScript-based solution that works in all modern (and many older) browsers. Since the LiteSpeed WordPress plugin comes with lazy loading support for both images and iframes, if you already have the plugin installed your website will be lazing around on easy street in no time!
Configure lazy loading using the LiteSpeed WordPress plugin
Time needed: 10 minutes
This tutorial assumes you already have the LiteSpeed plugin installed on your self hosted WordPress website. If you already have another page caching plugin installed then you should check the documentation for your plugin to see whether it supports lazy loading. If you don’t have any caching plugin installed on your site, we can help!
- Open the LiteSpeed ‘Page Optimisation’ settings
You will need to log in to your website backend as an administrator first. You can find the relevant settings page under ‘LiteSpeed Cache’ –> ‘Page Optimisation’.
- Go to the ‘Media Settings’ tab
Pro tip: hit the number ‘4’ on your keyboard instead of reaching for your mouse. Your wrists will thank me when you hit old age!
- Toggle ‘Lazy Load Images’ to ‘On’
Who’d have thunk it’d be this simple…?! But wait, there’s more to do yet…
- Toggle ‘Responsive Placeholder’ to ‘On’
This is the calm before the storm, not all steps are this easy…
- If you know your website uses iframes, toggle ‘Lazy Load Iframes’ to ‘On’
If you’ve ever embedded a YouTube video, social media post or some kind of widget used to display reviews or provide chat functionality then there is a good chance your site uses iframes.
- Toggle ‘Inline Lazy Load Images Library’ to ‘On’
The benefits of doing this are not as clear cut as they once were, but the library code is small so placing it inside your page HTML will minimise the impact of adding this extra code to your website.
- Hit ‘Save Changes’
Feeling like a champ yet?
- Now, hit ‘5’ on your keyboard to switch to the ‘Media Excludes’ tab
You’ll look like a boss when you use the keyboard instead of the mouse, trust me!
- Exclude certain images from being lazy loaded
For example, your website probably uses a custom logo. WordPress adds the ‘custom-logo’ class to the custom logo HTML markup, so enter ‘custom-logo’ on a new line in the ‘Lazy Load Image Class Name Excludes’. This will disable lazy loading on the image element that uses that class (i.e. your custom logo). If you don’t do this, on slower connections your logo won’t load immediately even though it’s probably the first thing people should see when they hit your website.
- Pro tip: exclude all above the fold images by adding one class
On every page I build I like to create a section that is always intended to appear above the fold. Logically enough, I give this section the custom class name ‘above-the-fold’. It’s easy to add class names to page elements using page builders such as Gutenberg and Elementor so check the relevant documentation.
Don’t forget to enter the class name into the ‘Lazy Load Image Parent Class Name Excludes’ field too. Now, any images found within any element that has this class will be excluded from lazy loading. Just make sure this element doesn’t end up stretching all the way down the page when you view your site on mobiles!
- Pro tip: exclude all above the fold iframes by adding one class
To make the above the fold trick in step 10 work for iframes as well, add the ‘above-the-fold’ class into the ‘Lazy Load Iframe Parent Class Name Excludes’ field too.
- Edge case: prevent lazy loading on a page by page basis
Are there pages on your site that won’t benefit from lazy loading? For example, this could include pages that are mostly text or just very short and therefore entirely above the fold.
Under these circumstances you can make these pages load slightly faster by excluding them entirely from this merry dance. Simply add the page URL to the ‘Lazy Load URI Excludes’ field, one per line. You don’t need to include your domain, just the page path like so: /services/wordpress-web-design/
- Hit ‘Save Changes’ to preserve your sanity
Don’t tell me you made all those changes only to then forget to save your work?!
- Clear the cache to set your changes live
Head over to ‘LiteSpeed Cache’ –> ‘Toolbox’ and hit ‘Purge All – LSCache’ to clear the page cache. This will force LiteSpeed to rebuild the page cache for every page on your site. Because we’ve made changes since the last time the cache was built, our new changes will now be incorporated.
Conclusion
Lazy loading won’t fix all your website performance woes, but it is a handy tool to keep in your website optimisation toolbox. Undoubtedly, it won’t be long until lazy loading images and iframes is natively supported by all mainstream browsers. At this point the above method becomes more or less redundant, save for some relatively minor scenarios.
Whilst implementing lazy loading correctly will almost certainly help your website’s Core Web Vitals score, resist the temptation to use it to mask performance issues at more fundamental levels. If you’ve implemented the above but your site is still sluggish, consult an expert. I promise you it will save you your sanity – and a great deal of time too!
