Webflow & LazySizes.js - How to Reduce unused JavaScript & impact of third-party code from iFrames (YouTube Example)

By Ezra Siton

Improve your website performance & google Page Insight score (Mobile/Desktop) by lazy load Iframes with LazySizes.Js (popular JavaScript library for lazy loading images and iframes).

1. Webflow Video Widget problem?

Webflow Video Widget

Webflow Video Widget do not support lazy load (True to Jan 2024). If you load below fold Iframes (Like Youtube) it is dramatically decrease your Google Pagespeed Insights Score (Mobile/Desktop) and could slow down your page load.

1.1: Audit => Reduce unused Javascript (LCP)

Unused JavaScript can slow down your page load speed. The tool audit shows you opportunity to improve page performance by reduce unused Javascript (LCP) by remove Youtube Code.

Reduce unused Javascript (LCP)

1.2: Audit => Reduce the impact of third-party code (TBT)

The tool audit shows you YouTube third-party script that slowing down your page load.

Reduce the impact of third-party code (TBT)

‍

2. The Solution - Lazy load Third-Party Youtube Resource

One minute implementation.

LazySizes is a popular JavaScript library for lazy loading images and iframes.

2.1: Step One: Under your page setting add the library CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async=""></script>

Related: Webflow custom code in head and body tag

2.2: Step Two: Put youtube link as embed code

  1. Change the src to data-src
  2. Add class "lazyload" to iframe.
HTML Embed Code Editor

Related: Webflow Custom code embed widget

2.3: Step Three: Publish

If everything done correctly when the video will enter into view LazySizes will add the class "lazyloaded".

Chrome Inspect - Elements tab

2.4: Done

LazySizes clean up the audit errors related to Youtube Iframe.

Google Speed Insights Score on Desktop with Lazy Load

‍

3. The con of this technique:

Main con: It will work only as embed code (The client/Editor could not update the video URL easily) so use this only if it necessary.

4. Related Resources:

‍