Zach’s ugly mug (his face) Zach Leatherman

One YouTube Embed weighs almost 1.2 MB

A grid of 6×5 YouTube logos, each with a slightly different rotation
December 11, 2023 #20 Popular

The default YouTube embed is… well… atrocious (sorry). Consider an embed for this sample video:

  • 1149 kB total weight, including:
  • 971 kB JavaScript
  • 61 kB Poster Image (jpeg, 1280×720)
  • 48 kB CSS
  • 41 kB of iframed HTML
  • 28 kB for ×3 Roboto Web Fonts

(compressed wire weights reported)

This, uh, conspicuously—does not include any preloading of video content.

The weight also grows linearly with every embed—resources are not shared: two embeds weigh 2.4 MB; three embeds weigh 3.6 MB (you get the idea).

A better solution

Instead of the above, I typically use Paul Irish’s lite-youtube web component for better YouTube embeds on my site. The results speak for themselves: the entirety of this blog post weighs a grand total of 229 kB (and that includes the demo YouTube embed below)—just 17% of the original YouTube embed.

Even better, <lite-youtube> is a web component which means it can be managed with <is-land>.

If you look at just the weight of <lite-youtube>:

  • 31 kB total weight, including:
  • 6 kB JavaScript
  • 3 kB CSS
  • 22 kB Poster Image

This is a huge improvement: a reduction of 1149 kB to 31 kB.

Higher quality posters

<lite-youtube> does provide an eagerly loaded JavaScript-only 480×360 poster background-image for you (usually ~20–30kB). This behavior is skipped if you’ve added your own background-image in a style attribute on the tag.

This works fine but I wanted my poster images to be a bit higher quality and I used the 11ty OpenGraph API to easily accomplish this. I pointed the background-image property to the API and required a JPEG format in the output, which seemed to average about 80–100kB each, instead (and didn’t require JavaScript).

<lite-youtube
	videoid="YYJpFdEaAuc"
	style="
		background-image: url('https://v1.opengraph.11ty.dev/https%3A%2F%2Fyoutube.com%2Fwatch%3Fv%3DYYJpFdEaAuc/auto/jpeg/');
	"></lite-youtube>

One Weird Trick to Lazy Load the Poster

These components were being managed by <is-land> for lazy initialization and despite the components being lazily initialized the poster images were still being eagerly loaded (before the is-lands were initialized).

Here’s how I fixed it:

is-land[ready] lite-youtube {
	--yt-poster-img-url: var(--yt-poster-img-url-lazy);
}

We are using a double custom property method to work with the existing feature of background-image overrides in lite-youtube:

<lite-youtube
	videoid="YYJpFdEaAuc"
	style="
		--yt-poster-img-url-lazy: url('https://v1.opengraph.11ty.dev/https%3A%2F%2Fyoutube.com%2Fwatch%3Fv%3DYYJpFdEaAuc/auto/jpeg/');
		background-image: var(--yt-poster-img-url);
	"></lite-youtube>

As this is using <is-land> this re-enables the JavaScript dependency for the poster images but I’m okay with that, as I also include a text link to YouTube for each video embed (as part of the WebC component).

You can see all of this in action below:

Watch on YouTube: Partial Hydration and Islands Architecture—Eleventy 🎈 Weekly №12

IndieWeb Avatar for https://unsplash.com/Poster image by Javier Miranda

< Newer
snow-fall Web Component
Older >
is-land Web Component

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 77 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

32 Reposts

IndieWeb Avatar for https://jeffbridgforth.comMatt Hogg :mastodon:max frühschütz – нет войнеAndrea De PirroTom Arild JakobsenJWEysteinThe Spicy WebDoug Parker ????️Arnold BoerInnostusRyan MulliganTroy KitchMatt SteinHenri HelveticaGerry McGovernDavid O'BrienApple Annie :prami:Aram Zucker-ScharffTim van der LippeJean Pierre KolbFynn BeckerJean-Pierre VincentDanny van KootenErnie SmithBryce WrayRaymond CamdenwestbrookAlex Russelljalciné needs a job but alsoHenri SivonenIndieWeb Avatar for https://jamesg.blog

44 Likes

James' Coffee Blogmax frühschütz – нет войнеJBFrancis Rubio :verified:Luke ChapmanThe Spicy Webpetes_bread_eqn_xlsMiguelMarc-Antoine RuelBjarne Oldrup ☑Laryn Kragt BakkergryzzlyroyciferAndrewTobias WolfSamir Saeedi :firedoge:Jan MiksovskyNoah KennedyTroy KitchPaul HendrickAndreu Casablanca ????Matt SteinJacob Burch-HillmiwebguyJedidiahxraAram Zucker-ScharffTim van der LippeNoah Liebmanlogoninternethello•proximo•• :ivory_boost:Thomas BroyerFynn BeckerDave RupertDrew BlakeKurisu(masu)Ondrej SevcikAdam StoddardBryce Wrayjalciné needs a job but alsoStuNelson Chu PavloskyRich TrottLeon Brocard
11 Comments
  1. Ernie Smith

    Ernie Smith

    @zachleat This is what always makes me laugh about how aggressive Google has been with core web vitals—it’s literally their external code that is slowing everything down. When I added a script that replaced YouTube embeds with images, that helped my CWVs a lot.

  2. Zach Leatherman

    Zach Leatherman

    @ernie Yeah: Google is basically hundreds of different companies—most of Google’s performance advice can be viewed as though it is aimed directly at other teams at Google. I think in many cases the web performance resources were prepared with that in mind.Notably, the solution I … Truncated

  3. Aram Zucker-Scharff

    Aram Zucker-Scharff

    @zachleat I've been playing with the YouTube API and embeds lately as well, but I find it frustrating that if I want to use the API inside and postMessages I *have* to use the whole YT API package. Did you find any way around that?

  4. Zach Leatherman

    Zach Leatherman

    @Chronotope unfortunately no!

  5. Stuart :progress_pride:

    Stuart :progress_pride:

    @zachleat As well as saving 1.1MB, I think you also avoid Google tracking your visitors before they've had a chance to decide if they want to click play or not.

  6. Ryan Mulligan

    Ryan Mulligan

    @zachleat May as well call it a "California king embed" at that size, amirite?

  7. Zach Leatherman

    Zach Leatherman

    @hexagoncircle hahahahaha

  8. Bill Zaumen

    Bill Zaumen

    @zachleat The idea that one 'youtube embed weighs 1.2 MB' reminds me of something I heard years ago. A government project required developing software going into an airplane. "What does it weight?" "Huh?" "Everything in an airplane has to specify a wei… Truncated

  9. Zach Leatherman

    Zach Leatherman

    @bzdev ???? can a therapist somewhere please quantify psychological weight

  10. Ryan Mulligan

    Ryan Mulligan

    @zachleat Ah, thank you! My site would be nothing without the top shelf excellence that comes with using @eleventy ????

  11. Skora, Will

    Skora, Will

    @zachleat a single embed of google maps with 1 Marker is 978kb (i implemented paul Irish's library for YouTube a few weeks ago) but haven't found a similar tactic for googlemaps just yet (i checked out competitor mapbox-gl, & its 2.5mb) #webperf webperf

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)