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.
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:
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:
Attachments Open full size