In this article, we'll learn what lazy and deferred loading are, the nuance between them, and how they impact the performance of your WordPress website.
What is Lazy-Loading? How does it work?
Lazy loading sounds fun doesn't it? I bet if you think of the word lazy you can probably guess what lazy loading means.
Lazy loading is another term for asynchronous loading, but I think it is easier to understand using the word "lazy."
Lazy loading is when a component on your site isn't delivered to the reader until the component is actually needed. It's used heavily in the software development world for its obvious performance benefits.
The advantages of lazy loading
On the web, it means HTML, styles, media, and scripts are only streamed to the reader when they need it -- perhaps by clicking something or scrolling the component into view.
It really boils down to creating the smallest payload possible for the reader's browser to download. No need to immediately download components that may never be viewed.
In fact, if you scroll down you will notice the next video in this lesson will pop into view a split second after you scroll to it. That is lazy loading in action.
Lazy loading images is vital
Lazy loading is very important for images for two main reasons.
One, because they are often the largest part of your page load.
A few images on a page can easily add 500kb or more to the payload so it's important to optimize as much as possible.
Lazy loading images means the images that are "below the fold" or, not in view of the reader until they scroll down, won't load until the reader actually does scroll to them.
For long articles with several photos below the fold, this can have a drastic improvement in performance for your reader.
The second reason is that by not loading images that never come into view you could save money on cloud based hosting — where are you pay based on the resources consumed.
I want to point out, besides images, it is very important to lazy load iframes too. Which are usually embedded audio or video, like from YouTube. You don’t want these to load until they come into view as well.
Another aspect of lazy-loading is asynchronous CSS, a way to prevent render-blocking. By allowing the CSS style code to load in parallel with the content you can achieve a faster perceived load time.
There is one catch though.
Since CSS is the code which tells your browser how to style your site, if you let all the CSS load asynchronously there will be a flash of unstyled content (aka FOUC). Which is ugly.
There is a solution: generate the critical CSS.
This is the CSS that is absolutely required to "paint" the initial view of your site. The critical CSS is loaded synchronously (and thus is render-blocking), but because it is the smallest amount of CSS necessary it loads quickly.
Don't worry; an excellent caching plugin like Litespeed Cache, WP-Rocket, or Swift Performance will handle asynchronous CSS for you. But be sure to thoroughly test the user experience on your site when turning on asynchronous CSS.
What is Deferred-Loading?
Deferred loading is when a component will definitely load but will be deferred until later (to load after most others resources).
This usually refers to scripts.
Since scripts can be "render-blocking," or in other words, prevent the reader's browser from rendering your site until the script has loaded -- it can be very important to defer scripts that do not need to run first thing.
While this doesn't necessarily improve the overall load speed of your site, it does improve the perceived performance for your readers. To them, the page loads faster because the content loads fast -- even if the script takes longer afterward.
How to use these techniques
Lazy loading is not something that is on by default. You do need to configure it, and it is not built into WordPress.
As you can probably guess -- your caching plugin will handle much of this for you. They can lazy load and defer scripts and other components easily.
But there is another plugin I want to recommend here. It's called Native Lazyload by Google and as the name alludes to -- adds native lazy-loading to your images.
And it also means there is no additional script your reader's browser will need to download to perform lazy loading -- saving a bit more on the payload size overall.