javascriptvideoiframeyoutubecraftcms

Site page speed (Youtube non cookie )issue - when implementing Youtube video play using <iframe>

We developed a CMS using craft cms. We are having several company youtube videos to play in our site.

Now we are implemented like

<iframe loading="lazy" id="clickVideo" height="635" width="100%" src="https://www.youtube.com/embed/<code>?rel=0"> </iframe>

When we checked the page speed using google and several other sites. They are showing errors as in the screenshot below:-

enter image description here

The urls they are showing errors is

https://www.youtube-nocookie.com/s/player/7acefd5d/player_ias.vflset/en_US/base.js
https://www.youtube.com/s/player/7acefd5d/player_ias.vflset/en_US/base.js

How we need to fix this issue? Any other way for implementing this? Please help.

Solution

  • First of all, the warnings indicate that you have iframes from both youtube-nocookie.com and youtube.com on one page. Those are essentially the same (the former being slightly better at preserving privacy), but since they are a different origin, the browser can't reuse any assets between them. You can see this in your screenshot – the browser is loading base.js from both origins, which means the performance impact is doubled. So the first step would be to decide whether you want to use youtube-nocookie.com or youtube.com and then use that domain for ALL iframes on your page. This will cut the performance impact in half.

    Beyond that, embedded YouTube videos will load whatever resources Google wants them to, so you can't really optimize the player itself. You're already lazy-loading the iframes. Beyond that:

    1. Consider if you actually need an iframe or if a link to the video would suffice. If you don't embed any videos, they don't impact performance.
    2. You can also defer loading the iframe until a user explicitly clicks a button to load it. This will help with initial loading performance and have the nice side-effect of being privacy-preserving, which is relevant if you have users in the EU. There are several tools to achieve this, for example the Contextual Consent feature of klaro.