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.
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
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="../../uploads/myhero.png" alt=" width="400" height="300" />
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.
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.
“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' );
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.
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
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
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.
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.