Lazy Loading

Lazy loading

As defined by MDN

Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.

So, by applying lazy-loading strategies your page will load much faster as the assets will be loaded only when they're really needed (when they first appear in the viewable area for the user).

A good example of this are images: you won't probably need to load all the images in your page as you only need those images that appear in the viewable area for the user on first load. A better strategy is to load only the images that are in the viewable area for the user, and then load those images as they enter into this viewable area (if the user do not scroll, those images will never be loaded).

The same strategy can be applied to iframes and other resources that require a request to the server.

How to apply lazy-loading in Frontity projects

Frontity provides the <Image /> and <Iframe /> React components that adds lazy-loading to them. They're available through the @frontity/components package.

The <Link> component provides a sort-of lazy-loading behaviour called link prefeching.

Finally, with the Intersection Observer Hooks provided by the @frontity/hooks package you can create your custom logic to be triggered only when the React element reaches the viewable area.