Youtube embed is tanking performance

Design help General
1

My client has a couple youtube emebds. But they are tanking performance. Google Page speed with them is like 55 and without them 85.

I didn’t have this issue with Wordpress (though there are major reasons why were moving from Wordpress to webflow) so trying to figure out my options.

I know an “extreme” option, at least to the client, would be to remove them.

One options I thought of was keep them off home page and just have a dedicated page for them.

Just not sure what else Webflow users do with embedded youtube.

thanks

Here is my site Read-Only: [LINK] Not sure if you need this but here it is

2

I haven’t investigated how Chrome / Safari handle youtube embeds, but there are a few things I’d explore;

  • If you’re using WF’s native vid element, it’s using embed.ly as an intermediary. Compare that to a raw, native youtube embed to see if there’s a loading difference.
  • WF’s native youtube element might use embed.ly, or might not. Check to see what it generates and try both native elements to see if you get a performance difference.

If all three configs ( WF vid element, WF youtube element, native youtube embed ) have performance issues, you can try using a fast loading image thumbnail representation with a play button, and on click…

  • WF lightboxed vid
  • Script-load the vid embed only after the thumbnail is clicked

If you just want the vid and don’t care much about using the YT platform itself, I’d look at hosting the vid elsewhere, like Vidzflow, Vimeo, or cloudflare R2 depending on the size and nature of the vid. You’ll get more player and player-loading options that way, which is often easier to script control.

3

Yes I am using the native solution.

Okay I need a site plan for that so when we go live today or tomorrow I will try using the “custom code” block(correct?) and embed the youtube directly in.

Oh I like the 3rd way work around too.

thanks