This idea has been merged into another idea. To comment or vote on this idea, please visit WEBFLOW-I-318 Add option to 'lazy-load' images to improve load time, UX (and SEO).
Lazy loading means that when a page loads, images & iframes that are significantly below the viewport are not downloaded on first load. This means pages open faster & use less bandwidth; this is especially beneficial on mobile. Only when a user scrolls close enough to those images do they get downloaded, in real-time.
For a long time, most webdevs used a JavaScript library to enable lazy loading, which incurred its own performance & bandwidth penalties, but overall was a win. But, this took significant effort and a rewrite/re-factoring of the current code. It was difficult, if not impossible, for most "no-code" developers to implement this on Webflow.
Suddenly, in Chrome 76, now the *browser* could handle lazy-loading if the loading attribute has been set on the <img> element to "lazy". However, Chrome is not a standards body. This week, the HTML specification now includes lazy-load. Subsequently, Firefox has now indicated support will land in Firefox 75 in some way (perhaps by default)!
Thus in a few short months, over 65% of global internet users will benefit from loading="lazy" attribute (source).
Read more here: https://web.dev/native-lazy-loading/
Firefox news: https://www.neowin.net/news/firefox-75-nightly-comes-with-lazy-loading-flag-for-images-and-iframes
Wordpress has already added this to Wordpress Core 5.4:
https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/
https://github.com/WordPress/wp-lazy-loading
What Webflow should do:
1. Add the loading="lazy" attribute to ALL images & iframes by default.
2. Create a toggle to disable the attribute site-wide (in Project Settings) or disable lazy-loading on certain iframes & images (in the Designer).
Today, this is only possible through brute force (i.e., tedious & prone to errors) in Webflow on every image & iframe by selecting the image, going to Element Settings, and adding the custom attribute one at a time.
Please close this and instead go here:
https://wishlist.webflow.com/ideas/WEBFLOW-I-318