Merged idea

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).

Enable the HTML specification's lazy-load attribute by default for all images & iframes Merged

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. 

 

  • Tiada Guru
  • Feb 15 2020
  • Shipped