Content:
Embedding YouTube videos into your site is a great way to introduce your audience to your content. WordPress makes it easy to do this, with a built-in YouTube embed block.
The downside to this is performance – not only is the player code heavy, but it’s render-blocking by default. Not so much of an issue on a PC, but on a mobile device, it can destroy the performance of your site.
Worse still, the code isn’t deferred, meaning it will block the page even when it’s currently off the screen.
While there are YouTube plugins that can defer loading, or speed up your YouTube frame, these are likely to come with additional features which themselves have a performance impact.
Here’s how you can do it without resorting to a plugin.
The Lite YouTube Facade
Facades are a common way to speed up embeds. They load an image in place of the content, that takes the appearance of the real thing. Only when the embed is interacted with, does the real player load.
Better still, some facades will prime the embed code after page load, so there’s no performance drop when interacting with the content either.
The facade I’ll be using is called Lite YouTube. It can be found over on Github.
It’s fast, easy to use, and improves user privacy by using a no cookie variant of YouTube.
Adding Lite YouTube to WordPress
To add Lite YouTube to your site, you first need to add one line of code to the header template used by your active theme.
You can access your theme files by navigating to Appearance >> Theme File Editor in your admin nav bar. The header content is usually found in header.php – double check with your theme documentation if header.php doesn’t exist.
In the <head> section, add the following line.
<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.3.1/lite-youtube.js"></script>You can then save the file. This does add a small JS file to your site, but it’s much lighter than the full-blown YouTube embed code.
Next, you’ll need to replace any embedded YouTube videos you have on your site, where you want to use the facade.
Videos embedded using the facade need to be added using the custom HTML block, with the ID of the YouTube video you’re trying to embed taken from the end of the video URL.
<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>The above code will embed the Lite YouTube demo video.
Additional Features
On top of the basic use shown above, there are a few additional options you can use to tweak your facade.
The full list of options available, taken from the project Github page, are listed below.
| Name | Description | Default |
|---|---|---|
videoid | The YouTube videoid | “ |
playlistid | The YouTube playlistid; requires a videoid for thumbnail | “ |
videotitle | The title of the video | Video |
videoplay | The title of the play button (for translation) | Play |
videoStartAt | Set the point at which the video should start, in seconds | 0 |
posterquality | Set thumbnail poster quality (maxresdefault, sddefault, mqdefault, hqdefault) | hqdefault |
posterloading | Set img lazy load attr loading for poster image | lazy |
nocookie | Use youtube-nocookie.com as iframe embed uri | false |
autoload | Use Intersection Observer to load iframe when scrolled into view | false |
params | Set YouTube query parameters | “ |
On responsive sites, you might want to consider the autoload attribute. If your content is in-view on a desktop, using autoload can provide the full experience for desktop users. Mobile devices, for which the content is out-of-view, would still benefit from the speed increase as the video is not loaded on page load.
If you’re concerned about GDPR compliance, the nocookie attribute will ensure that the embedded YouTube client will not place any tracking cookies on the user’s device, until the video is played. For full GDPR compliance, a cookie consent dialogue is still required, however.
Setting Parameters Across Your Site
If you regularly embed videos into your posts/pages, consider adding a function to your theme to add additional parameters for you. This would ensure consistency across your site, and make it easier to change settings in the future.
function qb_youtube_plugin_filter($content)
{
$doc = new DOMDocument();
@$doc->loadHTML($content);
$yt_tags = $doc->getElementsByTagName('lite-youtube');
foreach ($yt_tags as $yt) {
$yt->setAttribute('nocookie', '');
}
return $doc->saveHTML();
}
add_filter( 'the_content', 'qb_youtube_plugin_filter' );This code adds the nocookie attribute to the videos. You can call setAttribute() as many times as you want, to add multiple attributes.
Just remember, setAttribute() requires two parameters – an attribute, and a value. If you’re setting an attribute that doesn’t need a value, use '' as the second parameter, as above.
What You Lose
The use of a facade is never going to give the same level of features as a plain embed – there’s a reason an embed uses so much code.
For example, the facade will exclude content such as the pulsating channel icon, and there’s no integrated caption (though you can easily add one yourself).
The image above shows a comparison between the standard WordPress YouTube block, with a basic implementation of Lite YouTube.
Speed Increase
After swapping the embed used in the last test for the Lite YouTube alternative, rerunning Google PageSpeed gives a much different result.
Now, some of these numbers will vary from run to run, regardless of the page content. For example, the small decrease in ‘First Contentful Paint’ would be down to this variation, not the embed change.
However, we can see a massive decrease in the ‘Time to Interactive’ – the time it takes for the site to become interactive for the user – of over 75%.
The blocking time has also reduced, all the way down to 0.
It demonstrates how small changes can have a dramatic impact on the performance on your site. It seems more than worth the small functionality loss, to provide a better experience for the user.