One YouTube Embed weighs almost 1.2 MB
The default YouTube embed is… well… atrocious (sorry). Consider an embed for this sample video:
1149 kBtotal weight, including:971 kBJavaScript61 kBPoster Image (jpeg, 1280×720)48 kBCSS41 kBof iframed HTML28 kBfor ×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 kBtotal weight, including:6 kBJavaScript3 kBCSS22 kBPoster 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:
Poster image by Javier Miranda
11 Comments
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.
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
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?
Zach Leatherman
@Chronotope unfortunately no!
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.
Ryan Mulligan
@zachleat May as well call it a "California king embed" at that size, amirite?
Zach Leatherman
@hexagoncircle hahahahaha
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
Zach Leatherman
@bzdev ???? can a therapist somewhere please quantify psychological weight
Ryan Mulligan
@zachleat Ah, thank you! My site would be nothing without the top shelf excellence that comes with using @eleventy ????
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