Follow us on Webflow for the latest updates!  Follow on Webflow

How to add Lazy Load to your Webflow site and boost site speed

How to add Lazy Load to your Webflow site and boost site speed

Webflow Lazyload (+Performance)

It's a pretty common idea that speed is among the most impactful SEO metrics - meaning your websites need to perform. We also know that slow sites, mean angry users, and if you site takes more than 3 seconds to load, you can bet you're losing visitors.

Thankfully - there is a supereasy way to improve the speed of your webflow website by using Lazyload. Basically, lazyload will prevent images from loading until they are about to enter the viewport. This is particularly useful on sites that rely on large collection lists and can be a simple way to off-set some of this pain. This way we're not wasting bandwidth downloading images that the user might not even see.

page load time
Reference: https://www.section.io/blog/page-load-time-bounce-rate/

1. How to add Lazy Load to Webflow Site

Firstly, you will want to add the following script to the custom code section of either your page, or project settings.

<script src="https://cdn.jsdelivr.net/npm/lazysizes@4.1.8/lazysizes.min.js" integrity="sha256-fTBo7ekO22pjfhP1rQs1prKEo4Iu8eVPODvm0oOL5Xc=" crossorigin="anonymous"></script>
<script type="text/javascript">
 $(document).ready(function() {
   // lazyloading
   window.lazySizesConfig = window.lazySizesConfig || {};
   window.lazySizesConfig.init = false;
   $('.lazyload').each(function() {
       $(this).attr('data-src', $(this).attr('src'));
       $(this).removeAttr('src');
       $(this).attr('data-srcset', $(this).attr('srcset'));
       $(this).removeAttr('srcset');
       $(this).removeAttr('sizes');
       $(this).attr('data-sizes', 'auto');
       lazySizes.init();
   });
 });
</script>

2. Add the combo class 'lazyload'

Now, add the combo class 'lazyload' to your images.

3. Check it's firin'



To ensure it is working as intended, right click on your site and inspect the page (Google Chrome). Here you can view the network trace for images and ensure that lazysizes is firing on some images. You should see additional images trigger as you scroll them into viewport.


Enjoy.

Special credits to our discord server member @Nomsang for making this possible.

This product is not yet available. Join us on twitter for updates.