DEV Community

loading...
Cover image for Do you need lazy loading?

Do you need lazy loading?

jmau111 profile image Julien Maury Originally published at blog.julien-maury.dev ・3 min read

Is it worth it?

The purpose of lazy loading is to load only the necessary resources and delay everything that is not critical.

Whether it's your images or an iframe, lazy loading can be an excellent optimization for your website.

Disclaimer

Lazy loading is not the only optimization. It's only a part of it.

What does "above the fold" mean?

It's not rare to read this expression, but do you know what it means?

It's an old legacy from the print press. It's the visible part of folded newspapers in kiosks. By convention, this part often contains catchy headlines and a big hero image.

In terms of Webdesign, it's the visible part of the page without scrolling, so it's the first thing people see when browsing your pages.

How to use it

For a long time, Lazy loading has been JavaScript code that checks and loads only visible images and other resources according to the browser's viewport.

Technically speaking, we used to add a data-src attribute instead of a traditional src attribute to your images and iframes. The js added the src attribute only when the element is visible.

Now, it's available as a simple HTML attribute, for example:

<img loading="lazy" src="./images/myhero.png" alt="" width="400" height="300">
Enter fullscreen mode Exit fullscreen mode

Source: WHATWG

However, browser support is not ideal:

Firefox only supports lazy loading for images

Can be enabled in Settings under the Safari > Advanced > Experimental Features menu.

Source: caniuse.

A crazy popular CMS such as WordPress has recently implemented this attribute in its core. It also provides advanced filtering for developers cause you may not want that everywhere.

Source: Make Core WordPress

"Above the fold" is a tradeoff

A common misunderstanding with lazy load is to believe it's for anything and everything. Unfortunately, any automated approach will add the loading attribute on all images and iframes, including big hero images above the fold, introducing some delay in LCP (Largest Contentful Paint).

So, on the one hand, you optimize stuff, and on the other hand, you lose something.

It's the reason why WordPress encourages developers to "granularly handle loading attributes for images anytime they rely on".

You can even disable the entire feature with one line of code:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Enter fullscreen mode Exit fullscreen mode

According to Google, it's only a "fairly small" part of all cases, which would legitimate the introduction of lazy load by default in WordPress core, for example.

Content Reflow

Always add width and height to your tags. Otherwise, you will end up with Content Reflow.

Content Reflow happens when an image tag for a lazy-loaded image has no dimension. When the user scrolls and your image appears in the browser's viewport, it jumps from height 0 to your image height.

It isn't good because the browser has to recalculate the layout, leading to jank and layout shifts.

In the best-case scenario, you have full control, and you can easily provide width and height for both iframes and images, but it's not always like that.

Again, it seems that you optimize stuff on the one hand, and on the other hand, you lose something. Fortunately, CMS such as WordPress skip elements with no dimensions when adding the loading attribute.

No fallback policy

Google discourages the use of JavaScript as a fallback for browsers that do not support the loading attribute.

To them, it's not worth it, as there are "no adverse effects on browser versions that do not support it yet". In that perspective, it would potentially create more problems than it would solve.

Source web.dev

I don't get it. Should I add it or not?

IMHO, yes. While there are still some issues you have to consider, the risk-benefit balance is pretty correct, and I think it's safe to expect even more benefits in the future.

There's no doubt it saves bandwidth, especially if the user does not scroll the entire page where you have your fancy image gallery or YouTube iframe.

The "not loaded if not used" philosophy is not only seducing but more meaningful for everybody, including developers, users, business owners, etc.

I implement it only for content elements for now, not for the hero/featured images, which are, by nature, above the fold.

Discussion (0)

pic
Editor guide