{"id":2881,"date":"2024-07-01T06:56:07","date_gmt":"2024-07-01T12:56:07","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2881"},"modified":"2024-07-01T06:56:08","modified_gmt":"2024-07-01T12:56:08","slug":"youtube-embeds-are-bananas-heavy-and-its-fixable","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/youtube-embeds-are-bananas-heavy-and-its-fixable\/","title":{"rendered":"YouTube Embeds are Bananas Heavy and it’s Fixable"},"content":{"rendered":"\n

TL;DR: YouTube Embeds are like 1.3MB in size with no shared resources between multiple embeds. Using a <lite-youtube><\/a> Web Component is more like 100k, does<\/em> share resources, and sacrifices no functionality. <\/p>\n\n\n\n

You can put a YouTube video on any website. They help you do it. Under the Share <\/strong>menu right on youtube.com there is an option to <> Embed<\/strong> and you’ll see bit of HTML with an <iframe><\/code> in it. <\/p>\n\n\n\n

\"\"
<iframe>s are never wonderful for performance, but they make sense for protected third-party content.<\/figcaption><\/figure>\n\n\n\n

This is what I’m getting as I write:<\/p>\n\n\n

<iframe<\/span> \n  width<\/span>=\"560\"<\/span> \n  height<\/span>=\"315\"<\/span> \n  src<\/span>=\"https:\/\/www.youtube.com\/embed\/LN1TQm942_U?si=EfW_M4bEHEO-idL3\"<\/span>\n  title<\/span>=\"YouTube video player\"<\/span>\n  frameborder<\/span>=\"0\"<\/span>\n  allow<\/span>=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"<\/span>\n  referrerpolicy<\/span>=\"strict-origin-when-cross-origin\"<\/span>\n  allowfullscreen<\/span>><\/span>\n<\/iframe<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
If I were Team YouTube, I’d get loading=\"lazy\"<\/code> on there to help with performance right away. No need for videos that aren’t even visible on the page to load right away. <\/p>\n\n\n
<iframe<\/span> <\/span>\n<\/span><\/span>  ...<\/span><\/span>\n<\/span><\/span>  loading<\/span>=\"lazy\"<\/span><\/span>\n<\/span><\/mark>  ><\/span>\n<\/span><\/span><\/iframe<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Plus I’d put some inline styles on there to keep the video fluid and maintain the original aspect ratio. Or you could target these and do that yourself in CSS. Here’s assuming the videos are the standard 16 \/ 9 aspect ratio:<\/p>\n\n\n
iframe<\/span>[src^=\"https:\/\/www.youtube.com\/embed\/\"<\/span>]<\/span> {\n  inline-size<\/span>: 100%<\/span>;\n  block-size<\/span>: auto;\n  aspect-ratio<\/span>: 16<\/span> \/ 9<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
But… let’s not keep this HTML at all. I’m sure you read this blog post title, but let’s put a point on it:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
On a page with literally nothing at all on it<\/em> other than a YouTube Embed, we’re looking at:<\/p>\n\n\n\n