Slow site speed and lagging after including vimeo videos

Hello guys,

i included some vimeo videos on my site, but they seem to have a massive impact on the site speed. Google PageSpeed Insights says that i should “remove unused JavaScript”.

I noticed that my site loads faster and has less lagging when i put the video in though the HTML Embed element, so this is what i did instead of including the normal video element.

But as i said, i could not launch the site like this. Way too much lagging and slow loading. Please recognize that the video elements exist twice because of desktop and mobile position.

How can i fix this big problem?

Here is the normal link: https://vimeo-lazy-load.webflow.io/

Here is the Read only link: https://preview.webflow.com/preview/vimeo-lazy-load?utm_medium=preview_link&utm_source=dashboard&utm_content=vimeo-lazy-load&preview=d44180cc1a46e47cf91d746b1fce0a6a&mode=preview

Thank you for your help

Any idea, guys? This would help me a lot.

Still got no solution for that. Does anyone know what to do, to make vimeo videos lazy load?

Hi Valentino. Yeap, I agree this is pretty annoying. It might be possible to use JS or Jquery to delay this from loading. It might need to be an inline Javascript that alters the DOM before page render. I will be investigating today and let you know.

1 Like

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&amp;autopause=0&amp;player_id=0&amp;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.

4 Likes

Great reply. Thank you Stephen using this method worked wonders for me and the loading speed of the website I am curently working on.

Giving this a try since Vimeo videos are really very surprisingly slow to load!

Many thanks for all your hard work and investigation.