justinribeiro / lite-youtube

The fastest little YouTube web component on this side of the internet. The shadow dom web component version of Paul's lite-youtube-embed.
https://www.npmjs.com/package/@justinribeiro/lite-youtube
MIT License
836 stars 63 forks source link

Mobile double-tap and autoload #61

Open FreekGille opened 2 years ago

FreekGille commented 2 years ago

I run a little hobby project and the core functionality is displaying specific YouTube videos. 85% of my users are mobile, the YT video is above the fold and 100% of visitors play the YT video. I initially implemented your fantastic module as Pagespeed Insights tagged the YT iframe as an area of improvement and a facade would improve loading times etc. and therefor hopefully ranking. The issue now is that on mobile, without autoload activated, it requires two tabs to play the video (as mentioned in #23 and #30). If I activate autoload, the Intersection Observer will basically instantly trigger as the video is above the fold. This does "work" but I wonder how much of an actual improvement this is over the just embedding the iframe.

Do you have any opinion on this scenario? Will adding lite-youtube in this case actually improve things or does it not make any sense in this case?

An example of a page is: https://www.cocktailexplorer.co/cocktails/rebujito/behind-the-bar/

justinribeiro commented 2 years ago

If I activate autoload, the Intersection Observer will basically instantly trigger as the video is above the fold. Do you have any opinion on this scenario? Will adding lite-youtube in this case actually improve things or does it not make any sense in this case?

Intersection Observer is async and non-blocking so from a perf-standpoint, you're not going to lag unless the calc is heavy (which in the case of the loader, it isn't). I haven't measured the above-the-fold autoload, so I'll put that on the to-do list. :+1: