Suddenly, in Chrome 76, now the *browser* can 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).
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.
Posted this elsewhere, but doing so here as it is relevant.
The attached image is a recommendation from Google's Page Speed Insights for one of my pages. It says
" Serve images in next-gen formats
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption."
We choose Webflow because they will be ahead of the curve, or follow best practices (which they do a good job of minifying CSS and other stuff) but I am surprised there isn't enough noise about Images which are one of the important factors that affect page speed which in turn affects the SEO.
This functionality was shipped on Aug 27, 2020.
Read the release notes.
This would be awesome. Paired with next gen image formats the webflow sites would be blazing fast!
https://bugs.webkit.org/show_bug.cgi?id=196698
This is now being actively developed again for Safari (iOS + macOS) as well. Webflow, save us the tedium!
Suddenly, in Chrome 76, now the *browser* can 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.
Waiting for that!
I hope it will be done!
Posted this elsewhere, but doing so here as it is relevant.
The attached image is a recommendation from Google's Page Speed Insights for one of my pages. It says
" Serve images in next-gen formats
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption."
We choose Webflow because they will be ahead of the curve, or follow best practices (which they do a good job of minifying CSS and other stuff) but I am surprised there isn't enough noise about Images which are one of the important factors that affect page speed which in turn affects the SEO.
Please prioritise this.
This really would be a great piece to add.
I'm with you, that would be great!
LOVE This!!!
Voting is closed... I get it.
Tryin to show support for this :)