Pagespeed performance issues

[todd-kruger]

I went from 99 to 40 on page speed with this. It is complaining about the Youtube JS. Just wondering if anything can be done? I did see someone made a YouTube lite js that maybe could be used in combination? https://github.com/paulirish/lite-youtube-embed. Thank you for all your work! Do you think mp4/webm would be better for SEO/Pagespeed over Youtube?

Example on your demo page: https://pagespeed.web.dev/analysis/https-stamat-info-youtube-background/5yoh9d0cn7?form_factor=mobile

[todd-kruger]

[stamat]

Hey @Xeno4j I seriously doubt that something can be done, it's the youtube script... Maybe we should try and add async to the script injection...

  injectScript() {
    if (window.hasOwnProperty('YT') || document.querySelector('script[src="https://www.youtube.com/player_api"]')) return
    const tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

Basically that's the only thing we can do, that comes to mind.

To gain on performance, try hosting your own, small MP4s that loop in the background, or maybe host the videos on Vimeo. This script also accepts MP4s and Vimeo. I mean eather using your own bandwidth or reducing your page speed by using youtube/vimeo bandwidth... a tradeof has to be made 😬

I'll let you know when I have a solution... Pretty swamped with work atm, so it might be a while... Sorry dude!

[stamat]

@Xeno4j alright, I did it right away. Please use the new version 1.1.7, I've added the async attributes for the injected scripts. I'm not sure that it will increase the performance so much because youtube injects it's own scripts, but at least is should reduce the blocking of the main thread.

Do let me know if there is any improvement when you try it out. And thank you for testing! ✨

[todd-kruger]

@stamat Thank you for the quick update. It did move the needle about 5 points on average up. However it is still wrecking the score. That other link I sent, scores a perfect 100 with YouTube embeds. So it must be possible? It is amazing that it can get a perfect 100 on this page https://paulirish.github.io/lite-youtube-embed/ I don't program in JS hardly ever so it is not my expertise but if that other script had the background abilities of this script it would be amazing for page performance.

[stamat]

@Xeno4j I'll take a deep dive when I have a moment. It is probably possible - we can make a lite version of this, that doesn't use the iframe API and this would solve all of your issues. There were requests that this gets play, pause, and other shananigans, this is why the API was introduced. It also has the pause outside the viewport ability, to prevent the usage of the bandwidth when the visitor is not looking at the video background.

Dropping all this functionality and having only the video loop in the background like it used to do several years ago would solve your problems. But keep in mind, it will drain the visitors bandwidth and impact the performance constantly.

I'll soon get back to this. I'm planning to start a new version of this code as a custom component which would make things much easier.

Thanks for making me look into the performance of this! ✨ Appreciate it hombre!

[todd-kruger]

@stamat Sound exciting! Can't wait to test the new version. I will say though I really appreciate the play/pause for WCAG/ADA compliance, and offscreen pause.

I'm building a pretty big brand website and they need WCAG / ADA / 501 compliance, but also want a video header.

Here is an image. I've put two SVG layers on top to give it a curve look, and a custom CSS button for play/pause.