Photo of DeepakNess DeepakNess

Better YouTube Embeds ~77% Faster

I was using the iframe to embed YouTube videos to my blog posts, and it was significantly slowing down the website. I started looking for a way to optimize the loading of embedded videos and have finally found a solution.

But before I start explaining, first, take a look at the GTMetrix loading chart before I implemented the solution. It was taking 3.6 seconds to fully load the webpage, which is just too much.

Slow loading with normal YouTube embed

But after I implemented the solution, the same webpage now takes 0.78 seconds – almost 77% faster than earlier.

YouTube embed – fast loading

Introducing lite-youtube-embed

While looking for a solution, I came across this GitHub repo called lite-youtube-embed that had the exact solution what I looking for. And then I found out that someone has also created a 11ty npm package for the same that I can install and use (for context, I recently moved this site to 11ty).

Initially, it only loads the video thumbnail with an YouTube play icon over it, and necessary scripts are only loaded someone clicks on the video. So... this makes the initial loading faster.

The installation process was fairly easy, first, I just ran the following npm install command and then added it to the Eleventy config file.

npm i eleventy-plugin-embed-everything
# Import at the top
import embedEverything from "eleventy-plugin-embed-everything";

# Add below somewhere inside "export default async function(eleventyConfig)" function
eleventyConfig.addPlugin(embedEverything, {
    youtube: {
        options: {
            lite: true
        }
    }
});

And... it was working.

Make sure, lite is set to true as you see above.

Earlier, I had to manually copy the iframe embed code from YouTube in my .md file which looked like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/H21-e-zy-b8?si=eJzwJ0Xfc53dxy7y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

But now?

## Lorem ipsum dolor sit amet.

https://www.youtube.com/watch?v=H21-e-zy-b8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna ut massa tempus varius sit amet vel eros.

I can just paste any YouTube video URL directly in the Markdown, whether it's short or full URL, and it gets embedded.