Understanding 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.

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" />

The loading attribute takes three possible values:

• lazy to signal the browser that this image can be lazy-loaded. The browser then does all the rest.

• eager to force the browser to always load this image eagerly

• auto to leave the decision up to the browser

Of course not all browsers support loading so if you want to bring image lazy loading to older browsers as well, you still need to write your own JavaScript solution for that.

For scripts, it's different.

If you're building an app with just JavaScript, i.e. without any framework like React, you can implement lazy loading like this:

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.

If you're building an app with a JavaScript framework instead of "just vanilla JavaScript", you don't have to write this code on your own.

Instead, you can implement lazy loading as described in these dedicated tutorials:

• Lazy Loading in React Apps

• Lazy Loading in Angular Apps

• Lazy Loading in Vue Apps

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.