Understanding Lazy Loading
Lazy loading is a very useful pattern to optimize data fetching. It's quite common to load scripts and images lazily. Here's how it works.
What is Lazy Loading?
Lazy loading sounds strange but is a straightforward concept: You load a script or image only when it's needed.
The opposite is eager loading which means that you load everything at once (e.g. when the entire page is loaded for the first time).
Eager loading of course has the advantage that everything is available immediately when needed, which is great, but it has the big disadvantage that you're fetching lots of data ahead of time - even data that might never be needed (e.g. an image which is rendered in a part of the page that is never visited by the user).
Lazy loading can speed up the initial page loading time since you avoid downloading unnecessary resources ahead of time. In addition, you can save users' bandwidth.
How Do You Implement Lazy Loading?
As mentioned, there are two main areas for lazy loading:
Images: Only load an image when the user is about to view it
Scripts: Only load a script when you really need it
For images, lazy loading used to be quite tricky, if you wanted to implement it yourself.
You basically needed to listen for scroll events, find out when a user is about to view an image and then set the
src of an
<img> just before it comes into view. That could also be optimized by loading a low-res image first which would be shown as a placeholder until the real image was downloaded.
You find an example implementation here.
However, newer browser versions actually have built-in image lazy loading capabilities.
All you need to do is
<img src="my-image!jpg" loading="lazy" />
loading attribute takes three possible values:
lazyto signal the browser that this image can be lazy-loaded. The browser then does all the rest.
eagerto force the browser to always load this image eagerly
autoto leave the decision up to the browser
Of course not all browsers support
For scripts, it's different.
const lazyLoadedScript = document.createElement('script');lazyLoadedScript.src = '/scripts/my-lazy-loaded-script.js';document.body.append(lazyLoadedScript);
You can run this code in some event listener that fires when a user scrolls somewhere, clicks a link or a button or does anything else that should trigger this script to load.
Instead, you can implement lazy loading as described in these dedicated tutorials:
Should You Always Use Lazy Loading?
Lazy loading can speed up initial page loading by a lot. In addition, it can save valuable bandwidth for your users since you don't download (possibly unnecessary) images and files in advance.
These are important advantages.
But that does not mean that you should lazy load everything.
Because every web app also has resources that are probably going to be required all the time. There are images which are likely to be viewed by every user (e.g. a big hero image right at the top of your page) and there are scripts which always need to be executed (e.g. scripts that run right after page loading).
If you lazy load such essential resources, you're just delaying their availability. Because you're running redundent code to check whether they should be loaded just to then find out that you always need them. This causes an extra delay which is simply not required.
So use lazy loading wisely and only apply it on resources that you won't need all the time and for every user. Then, lazy loading can really provide a benefit and speed up your initial page loading time.