LazySizes Webflow Demo

lazysizes noscript/progressive enhancement extension

by Jeff S.

published: 04/20/2019

Integrating lazy loading into webflow requires different methods depending on what you want to accomplish. I am choosing to use http://afarkas.github.io/lazysizes/.

This technique is using an html embed before and another html embed after any element or group of elements on a page. This method uses plugin from lazysizes called "lazysizes noscript/progressive enhancement extension". Whatever is inside will be lazy loaded. This includes sliders, CMS images, standard webflow responsive images and the like.

Credit for working out this technique on webflow goes to forum user @cheechee, thanks!

The noscript extension is the true ultimate progressive enhancement extension for lazySizes. It allows you to transform any HTML inside a noscript element as soon as it becomes visible. - Alexander Farkas, lazySizes Developer
Note: Google Chrome, Mozilla Firefox, and MS Edge current releases support native lazy loading by adding a custom attribute to image tags. The attribute is: loading="lazy", best used on images where dimensions are defined. Coming soon to Safari as well.  It does not support LQIP however.

Installing the Library

Webflow does not allow the uploading of JavaScript to the projects assets panel. So you need to find a CDN that hosts the file for you or you need to upload the script to a resource you can reference via a URL. For ease and performance reasons, this demo will leverage JSDeliver as the CDN. The project is located at https://www.jsdelivr.com/package/npm/lazysizes

The current version (at the time of this writing is 4.18) is available at https://cdn.jsdelivr.net/npm/lazysizes@4.1.8/lazysizes.min.js

I added the script tag to this page's settings => Custom Code before body text area using the SRI version. You could paste it in the head since there are no dependencies.

<script src="https://cdn.jsdelivr.net/npm/lazysizes@4.1.8/lazysizes.min.js" integrity="sha256-fTBo7ekO22pjfhP1rQs1prKEo4Iu8eVPODvm0oOL5Xc=" crossorigin="anonymous"></script>

Webflow site settings -> custom code
Fig. 1 - Adding the core code code to site head tag (all pages).

Next we add the ls.noscript.js library extension. It is small and not currently available on jsdelivr.com's cdn. I am going to add the script to this page's head in the page settings -> custom code -> before body area. If you are using it on all project pages, add the minimized version to your site Custom Html - as above.

Screen cap of webflow embed dialog box
Fig. 1 - Adding the plugin code to this page. Add to site custom code if needed for all pages.

Implementation

lazysizes noscript/progressive enhancement extension

This technique involves wrapping the lazy load target with a Webflow embed element which is available to paid accounts.

The code we need to add is some basic HTML.

Convert that embed to a symbol called "lazystart" or whatever name you want. Next duplicate the procedure using the code below, then name the symbol "lazyend"

Now just add the symbol "lazystart" before the content you want lazy loaded and the symbol "lazyend" at the end.

Navigator sidebar of this webflow page in designer.
Fig. 1 - A peak at the webflow navigator shows the addition of the custom code symbols as noted above.

The Demo

OK, so where is the DEMO? Your looking at it. This entire content section on this page was lazily loaded. How can you tell? Look at the page source. You will see that a class of "lazyloaded" was added to the embed div that is the parent of the <main> child element that represents this content. You can also look at the network tab in devtools (chrome) and watch the downloads on scroll. </main>

The image above was just added to the page normally. Responsive generation by webflow.

Demo Image LQIP (Lazyloaded)

Note the LQIP method can work with this method as well. The demo image below is using LQIP. You can read more about that method in this LQIP article / demo on this website.

Actun Tunichil Cave Image
When the script finds a data-src attribute, it loads the HQI referenced in the data-src value (fig. 2), replacing the LQIP. While it is loading the image, the img class is changed from "lazyload" to "lazyloading"; when completed the class changes to "lazyloaded". So a quick inspection of the source can confirm replacement (plus it looks better).

Reference LQIP

Below is the LQIP you can use for visual reference since the Demo Image above was quickly replaced.

Actun Tunichil Cave Image (LQIP) for demo

Source Image - Wikimedia Commons - Mayan Pottery located in the cave of Actun Tunichil Muknal, Belize Author: Jkolecki