Integration of LazyLoad

created on

March 6, 2020

Type

Tutorial

Last updated

April 16, 2020

Created by

Let's look at using LazySizes to increase loading speed. Works for both images and video, but comes with some trade-offs.

LazyLoad to help loading speed

Download the script here.

LazyLoad tells the browser to only download the resources (images, video, whatever you like) when it scrolls into view. This helps a lot with the loading speed and therefore also your SEO as Google prefers fast loading websites.

The integration is not perfect with Webflow, and it can quickly become complex. The easiest solution is to wrap each piece of content in a couple of embeds like so:

‍

CONTENT

‍

</noscript>
</div>

‍

The downside is that it kills Webflow's interactions for that content.

You can read more about using LazyLoad in Webflow here:

https://forum.webflow.com/t/lazyload-for-webflow-images/73131/21

‍