Lazy Load
Lazy Load... anything!
A frequent request among Webflow designers is the ability to lazy load embeds like Calendly, or Google Maps, so that no loading occurs until the user scrolls down to that portion of the page.
The idea is to maximze page speed on the initial load for optimal user experience and SEO.
SA5 solves this by pulling your tagged elements out of the flow of the generated document object model ( DOM ), while ensuring that they are fully editable and stylable in the Webflow Designer.
Then, when you scroll to that position of the page, we re-constitute them and they become fully functional.
Goals
Prevent an Embed or a group of elements from loading in the published page until they are scrolled into view
Ensure that those elements are fully accessible in the Webflow Designer at design time
Usage Notes
Design and style your elements as normal in the designer- SA5's Lazy Load can be easily configured on top of that.
Best Practices
Lazy loading is triggered when elements scroll into view. That means for it to be of value, you want to configure it on elements that are below-the-fold.
Lazy loading works best when all of the code and HTML is together in a single embed chunk, in the body of your page. This is commonly the case for embeds like
Google Map embeds
Calendly embeds
YouTube embeds
If you have CSS outside of the lazy loaded content, it will not be lazy loaded ( but will work fine once the element is lazy loaded.
If you have scripts outside of the lazy loaded content, they may have initialization issues since they will likely perform initialization on page load- and your lazy loaded elements have not been loaded yet.
Getting Started
STEP 1 - Add the Library
STEP 2 - Configure the Embed or Elements for Lazy Loading
First, create your Embed or other element set the way you want it to work
Wrap that embed in a custom element
Right click, wrap in DIV
Right click the DIV, change to Custom Element
Set the custom element's tag to
templateAdd a custom attribute to the custom element of
wfu-lazyload, no value
Repeat STEP 2 for any other element groups on the page that you want lazy loaded.
Techncial Notes
In HTML5, a <template> element contains is interpreted so that that its contents become a document fragment. It is not processed as part of the DOM and is effectively invisible- much like an HTML <!— comment --> is.
When you use SA5's HTML library and add the wfu-lazyload attribute directly to the <template> element, we do some magic with an intersection observer.
When the element is scrolled into view, this triggers SA5 to reconstitute that element from the template, and replace it.
Last updated
Was this helpful?