How To Lazy Load in Webflow (But the Right Way)
Webflow have added native lazy-loading but this conflicts with Google's Cumulative Layout Shift (CLS) algorithm so how do we fix this? With code obviously! Some simple JavaScript will not only load your images lazily but will prevent CLS from happening.
The Code: https://codepen.io/FakeSamGregory/pen...
Referenced Article: https://gomakethings.com/how-to-test-...
Get Bounding Client Rect Documentation: https://developer.mozilla.org/en-US/d... Slightly modified so wherever you add Custom Attribute of data-images this function will work.
00:00 - Intro
00:17 - What is Lazy Loading?
00:42 - Add Lazy Load in Webflow
01:28 - Lazy Load in Action (Network Tab)
02:58 - Problems With Lazy Loading
04:16 - A Better Way to Lazy Load (JavaScript Walkthrough)
-
Affilated With Webflow: https://bit.ly/2ZzlJnd
Namecheap: https://namecheap.pxf.io/P53Az
-
Get to know me!
Instagram: @fakesamgregory
X: https://x.com/@0x5am5
-
#Webflow #JavaScript #lazyload