Optimizing page load time with a YouTube facade

While YouTube embed options are powerful and effective, they are not always the most efficient use of resources when it comes to bandwidth. Using a facade can help decrease page load time and increase site performance without sacrificing any of the utility of the native YouTube embed options. 

YouTube offers a simple option to embed videos directly in pages on a website. This convenient tool offers editors a powerful way to communicate with their audiences using videos or audio, and it does not require a complex implementation or even any web developer knowledge. A video can be fully available on your page with just a few clicks on YouTube and a basic paste-on-the-page editor.

However, this magic costs some resources that can considerably impact your page ranking in search engines. The video embed code provided by YouTube includes additional elements, beyond the video itself. The mechanism loads an iframe that accesses all libraries, images, buttons, and code required to play the video on the page. These YouTube files will increase the load time of your page, lowering your page performance. 

Moreover, the default embed code loads the video on the page even if the user does not play it. Video content can account for a significant percentage of a page’s bandwidth, even if the video is not actually watched. This can be a problematic usage of the page’s resources. Loading all the scripts and libraries to make the video accessible should be dependent on the user interaction with the element, not the initial page load. We have lazy loading for images; why not for videos? Here’s where the YouTube facade library comes in.

What is a YouTube facade?

A YouTube facade creates a placeholder for the YouTube video. It does not load the YouTube iframe with all libraries and required files until the user interacts with the placeholder. A small library and an image will replace the heavy YouTube iframe on the page, reducing the number of files on the page load and keeping the current page speed of the page. The YouTube facade is an option in the Opportunities section of the Lighthouse documentation. Check this comparative table below:

There are a couple of YouTube facade options available on the web. The comparative chart above used the Lite YouTube library from Justin Ribeiro. The library is free, and super simple to use.

How to use a YouTube facade

First, add the library to your site. You can use the CDN link of the library. In the head HTML tag, load the JavaScript tag.

<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.5.0/lite-youtube.js"></script>

Finally, use the following template to add video to your page instead of the YouTube code. Remember to replace the Video ID and the Video description on the code.

<lite-youtube videoid="VIDEO-ID-HERE">
  <a class="lite-youtube-fallback" href="https://www.youtube.com/watch?v=VIDEO-ID-HERE">VIDEO TITLE/DESCRIPTION</lite-youtube>

That is all that you need! Publish your page and check how fast your page loads with a YouTube facade.

[UPDATE] An interested reader of the Mugo Blog pointed out that this is a good library which has a couple of interesting features like title and image customization. It is also worth mentioning that there is a list of official Recommended Facade libraries.

Let us help you improve your site

A YouTube facade is a great option for pages with YouTube videos. Its implementation impacts the page performance, reducing the page load time considerably. Looking for more tips on how to improve your website’s performance? We can help! We have wide experience with site performance optimization and as proper full-stack developers, we can help dramatically speed up your site, improve the user experience, and help it rank better with search engines.