I haven’t had time to fully research a JS solution, but this is a relatively quick and simple solution for Chrome and improves the scores you’ll get via lighthouse.
So, it’s now possible to simply add:
loading="lazy"
To an iframe and some browsers will instantly support lazy loading these.
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.
To add 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 a div wrap.
I’ve tried scripts to reach the #player id for Vimeo, but seem unable to successfully reach into Webflow’s generation of the iframe code for Vimeo to add the attribute either.
The solution is to embed the Vimeo videos via the embed code generated by 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:
loading="lazy"
To the iframe attributes manually.
Page rendering performance can also be dramatically improved by altering the script, adding a defer or async attribute to it (depending on your needs), either in this embed or if you have multiple videos, add the script call to your custom project or page code and remove the script from the embed entirely, avoiding multiple calls to it.
Hopefully Safari will catch up and include lazy loading fully in the future the same way Chrome, Edge and Firefox have.