Savvy / Blog / Speed & Performance / Improving Loading Time of Embedded Videos with Lite YouTube

Improving Loading Time of Embedded Videos with Lite YouTube

By Roee Yossef • Updated on Feb 21, 2026 • No Comments

YouTube is a popular video streaming platform owned by Google. With over a billion users and billions of daily views, YouTube videos can be found practically everywhere on the internet.

Using your YouTube account is a convenient way to add videos to your website and utilize their bandwidth. Unfortunately, embedding YouTube videos significantly slows down page loading.

In this guide, you will learn a method (one of many) to greatly improve the loading time of YouTube videos, making the page load much faster and improving the Core Web Vitals scores of pages with embedded videos.

Lite YouTube Embed Library

The Lite YouTube Embed library, written by the well-known Paul Irish, focuses on performance and visuals. The Custom Element renders YouTube videos exactly like YouTube but much faster (estimated to be 224 times faster).

Before diving in, here is a performance comparison of a post on the Savvy blog with a regular YouTube video embed versus an embed using the Lite YouTube Embed library.

Here are the differences according to Google PageSpeed Insights:

And here are the differences according to webpagetest.org:

As you can see, there is a significant improvement, especially in the Total Blocking Time metric.

Basic Usage of lite-youtube

To use the Custom Element from the library, you need to do a few things:

Add the stylesheet to your website or application.
Add the script.
Use the lite-youtube tag using HTML or JavaScript.

<!-- Include the CSS & JS (direct from the package or bundled) -->
<link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" />

<script src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>

<!-- Use the element. You may use it before the lite-yt-embed JS is executed. -->
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

Privacy note – lite-youtube uses youtube-nocookie.com instead of youtube.com for end-user privacy.

Custom Player Parameters

YouTube supports a variety of player parameters to control the behavior and appearance of the iFrame. You can apply these with lite-youtube using the params attribute.

<!-- Example: video player without controls, starting at 10s, ending at 30s,
     with modest branding and JS API enabled -->
<lite-youtube videoid="ogfYd705cRs" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>

Note that lite-youtube uses autoplay=1 by default. See the YouTube Player Parameters documentation for a full list.

Embedding the lite-youtube Library in WordPress

If you are familiar with how to enqueue JavaScript and CSS files in WordPress, the following code should look straightforward. Place it in your child theme’s functions.php:

function savvy_add_scripts_styles() {
    wp_register_script( 'lite_yt_script', get_stylesheet_directory_uri() . '/js/lite-yt-embed.js', array(), '1.1' );
    wp_enqueue_script( 'lite_yt_script' );

    wp_register_style( 'lite_yt_css', get_stylesheet_directory_uri() . '/css/lite-yt-embed.css', array(), '1.1' );
    wp_enqueue_style( 'lite_yt_css' );
}

add_action( 'wp_enqueue_scripts', 'savvy_add_scripts_styles' );

Make sure you are using a child theme or a must-use plugin (MU-Plugin) before adding custom code. Never edit the parent theme’s functions.php directly.

Copy the library files to the relevant directory and make sure the paths are correct. After that, simply use the Custom Element directly in the content editor or in a page template:

<lite-youtube videoid="XXXXXX" params="controls=0&amp;modestbranding=2&amp;rel=0&amp;enablejsapi=1"></lite-youtube>

Replace XXXXXX with the ID of the YouTube video you want to embed. Here is a video embedded with lite-youtube:

FAQs

Common questions about improving YouTube embed performance:

Why do embedded YouTube videos slow down my page?

A standard YouTube embed loads an iFrame that pulls in over 500KB of JavaScript, CSS, and images from YouTube's servers before the video is even played. This adds significant weight to the page and blocks the main thread, directly hurting metrics like Total Blocking Time and Largest Contentful Paint.

Does lite-youtube affect video quality or features?

No. Once a visitor clicks the play button, lite-youtube loads the full YouTube player with all its standard features. The only difference is that the heavy iFrame is not loaded until the user chooses to play the video, resulting in a much faster initial page load.

Can I use lite-youtube with a WordPress plugin instead of custom code?

Yes. Several WordPress plugins implement lite-youtube or similar lazy-loading techniques for YouTube embeds. However, adding the library manually as shown in this guide gives you full control and avoids the overhead of an additional plugin.

Does lite-youtube work with YouTube playlists?

Yes. You can use the playlistid attribute instead of videoid to embed an entire playlist. The library will render the playlist thumbnail and load the full playlist player only when the user clicks play.

Is lite-youtube compatible with all browsers?

Lite-youtube uses Web Components (Custom Elements), which are supported by all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers that lack Custom Elements support, a polyfill can be loaded to ensure compatibility.

Summary

There are many ways to improve the performance of your website or application, and this post covered one that specifically addresses YouTube videos. Another option for improving YouTube video loading time is deferring JavaScript execution for videos.

Additionally, plugins like WP-Rocket can perform lazy loading for iFrames. You can also use JavaScript lazy loading techniques more broadly across your site for even better results.

For more information about the library, including custom poster images and additional performance comparisons, visit the library’s GitHub page.