One of the things you’ll notice if you run a Chrome Lighthouse report over a Webflow site using video is that it will flag the fact that the video iframes can be lazy loaded.
It reads like this:
Some third-party embeds can be lazy loaded. Consider replacing them with a facade until they are required.
This is relatively easy to fix now with Chrome, Edge and Firefox (hopefully support from Safari is coming).
You can read more about the technique here:
But TL:DR it’s now possible to simply add:
loading="lazy"
To any iframe and browsers will instantly support lazy loading.
Despite what Can I use states, Firefox does actually have the iframe lazy loading enabled, as outlined here by Mozilla—which clearly states iframes are supported.
For video, adding this simple attribute to the iframe isn’t possible via Webflow Designer at the moment. Adding a custom attribute to the video element, merely adds it to the div wrap.
The solution is to embed the video via the embed code in designer.
For Vimeo, it typically looks like this:
<div style="padding:62.5% 0 0 0;position:relative;"><iframe src="https://vimeo.com/channels/staffpicks/507360544?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="HOA"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
Using Embed with Webflow, you can add this code easily and simply add:
<iframe loading="lazy" ...
Page rendering performance can also be dramatically improved by altering the script call in the embed as well, simply adding a defer or async attribute to it (depending on your needs).
<script src="https://player.vimeo.com/api/player.js" defer></script>
If you have a lot of videos across your website, you might want to consider adding this script call to your page or project custom code instead and deleting it from the embed to avoid multiple script calls.