YouTube Embeds Are Bananas Heavy and It's Fixable

Just because one person in a thread shares a YouTube video doesn’t mean everyone else loading that page should have to download 1MB+ of YouTube’s JavaScript bloat and have their IPs tracked by google.

I, on the other hand, fully believe that.

The recommended lite-youtube-embed project page has a demo of both lite and regular players [0], and the lite version takes noticeably longer to start playing the video.

Every additional millisecond of load time will reduce engagement, and here the difference is more on the order of hundreds of milliseconds or more.

[0] https://paulirish.github.io/lite-youtube-embed/

I am not surprised to hear that a different player will be treated differently by users. You just need it to look slightly different or behave slightly differently and it's completely alien and not to be trusted.

The lite-youtube-embed as demoed (even with the title visible) doesn't let me click through to the actual youtube page. There's no link. It could even appear as a no-right-click-esque attempt to prevent me from going to the actual source of the "content" -- it's hostile. Of course, this specific feature could be added easily enough, but it points out a bigger issue.

I almost never play embedded video, but when I do it might as well be the normal youtube experience. If you've wrapped it in what looks like yet another layer (for an unknown purpose), I'm going to be less likely to click on it. You're asking me to contend with youtube/google and another unknown entity.

This article's "nothing sacrificed" is an example of the mistaken belief that developers know how their (or other) software is used by users. You don't and you can't. Not really. You're always guessing.

To be clear, I also want less videos everywhere, less google in everything, less megabytes of javascript in everything, etc. Please stop embedding youtube videos everywhere, to vote for a better web.

[0] https://paulirish.github.io/lite-youtube-embed/

https://gohugo.io/content-management/syntax-highlighting/

https://highlightjs.org

Example META tag:

  <meta http-equiv="Content-Security-Policy" 
  content="default-src 'self' 'unsafe-inline' *.your-cdn-if-any.com 
  www.youtube.com *.googlevideo.com *.ytimg.com">

We’re clearly missing some huge part of the story.

Obviously, faster load times should improve engagement. So if engagement went down with lighter embeds, that implies that some feature or functionality had to be sacrificed. Yet this blog post claims nothing is sacrificed.

Something is missing from this story.

  !||youtube-nocookie.com^$3p,frame,redirect=click2load.html,domain=~bing.com|~google.com|~duckduckgo.com|~video.search.yahoo.com
  ||youtube-nocookie.com/embed^$3p,frame,redirect=click2load.html,domain=~bing.com|~google.com|~duckduckgo.com|~video.search.yahoo.com
  ||youtube.com^$3p,frame,redirect=click2load.html,domain=~bing.com|~chatreplay.stream|~google.com|~duckduckgo.com|~video.search.yahoo.com

Why aren’t these resources retrieved from cache? Shouldn’t the same-origin policy should allow for use of cached resources since they are all loading from www.youtube.com?

> They found, quite counterintuitively, that average page load times went up. But with a deeper look, they found that the lighter page was able to reach more people, including people on low-power low-internet-speed devices who were able to actually use YouTube for the first time, and them using it much more slowed those averages. That’s awesome! The speed of using the site was up relatively for everyone. The metric of the average page load speed was a red herring and ultimately not meaningful.

I originally wrote it because my phone didn't have flash and flash embeds were common. But it was nice to extend it to cover iframe embeds as well which were much faster and opening the embed in a full YouTube website or app was better UX than a tiny embed window in most cases.

I never migrated it to a WebExtension after being annoyed that I wrote it to the new high-level extension API at the time that was supposed to be supported across browser versions. But this post makes me want to port it.

I'm pretty sure even embedding their poster thumbnail results in them getting your IP and other information so consider downloading that as well (from https://img.youtube.com/vi/[TAG]/hqdefault.jpg).

For me the website is slow as to border on unusable. I have one core at 100% on Firefox 115 / Debian 11, I guess there is a busy loop somewhere in the JS.

Works fine on Chrome(ium).

I know it is usually frowned upon to comment on the website itself rather than the content, but considering the nature of the website, I think it is relevant.

Edit: Looked in a bit more detail and it looks CSS-related, not JS-related as removing the main style sheet fixes the problem. It happens even in safe mode (no extensions). Possibly a Firefox bug (version is 115.12.0esr, from the Debian 11 repository), but it doesn't happen anywhere else.

Edit2: Updated my system, rebooted, etc... it fixed the problem. So either I had something messed up with my system, or the author fixed it, anyway, everything is ok now.

No, The Solution is to publicly shame Google Inc for wasting the resources.

When it would be on WSJ and The Guardian front page then, maybe, you would see the result.

Replacing the embed a one server/page is like pissing in the ocean - feels great, does nothing.

Is that a term for curly braces I am unfamiliar with or something with? Is code being "banana heavy" a term for code having a lot of scopes thus being bloated? I'm grasping at straws here.

This would hurt advertising impressions.

I don't usually care, but when you hand out advice to other sites and call your little text blog "Frontend-Masters", it better work.

  <img src="thumbnail.png" onclick="[replace image with embed]">

I suppose the moral of the story is that software will grow to consume the resources available to it. Often, if not most of the time, there will be benefits to that increased resource usage. Yet that won't prevent people who prioritize factors like efficient resource usage from seeking alternatives they view as better.

https://paulirish.github.io/lite-youtube-embed/variants/yt.h...

Privacy Badger can replace YouTube embeds with "click to activate" placeholders. Faster browsing, better privacy, easy-to-use controls (when the replacement works properly ...).

See "Pro tip #1" in https://www.eff.org/deeplinks/2024/01/privacy-badger-puts-yo...

It's really pretty simple. Any video embed must be "below the fold", and the iframe must be lazy-loaded. Now our pages don't see any page speed hit from video embeds, they only get loaded when the page is scrolled and the video is in view. Any other solution that isn't lazy-loaded will still impact page speed, and if that's important to the client, then don't load anything that isn't absolutely necessary to display what appears "above the fold".

For video backgrounds, our pages make a call to one of our APIs that gets the media URL from Youtube or Vimeo, and we then play that in a standard HTML 5 video player. It works great, and our Google Lighthouse score is above 95 even on pages with above-the-fold HD video that auto-plays. Loading a JS library from anywhere just to play a video is going to hurt page speed a bit no matter what.

e.g. lately the thumbnails have a popup overlay that pops into existence at last second over the thumbnail, basically hijacks your click and navigates you away from yt and to a support.google.com page that discusses paid product placement. No google thats not why I clicked on a video thumbnail.

Are those websites themselves choosing that in a setting of their embed?

But why? It actually makes me navigate away from your website as I go to youtube instead to find the video there to view it properly there.

No, the solution is to host your own videos and use a plain <video> element. Or it would be if Browser vendors would add native DASH/HLS-like adaptive streaming support to it, but even without that the user experience is much better with a <video>.

> Or link it from a CDN

Pure insanity.

I would even go further and wonder why lite-youtube still requires 100K? And why they are not shared across different sites.

We implemented our own thumbnail image trick on TestDome homepage a few years ago (https://www.testdome.com/). Thumbnail is from: https://img.youtube.com/vi/gPQQg4yZqt8/sddefault.jpg

https://swyxkit.netlify.app/faster-youtube-embeds