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/jOMaEKW Referenced Article: https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/ Get Bounding Client Rect Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect 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