Add a facade image for YouTube videos to improve performance
In this demonstration we look at what happens when we embed a YouTube video on a web page and then how to fix the performance problems that it brings. You'll be surprised by how much embedded YouTube videos hurt performance and how easy it is to solve it.
Transcript
Hello, I am Stephen Musgrave, partner and head of technology at Capellic. We build durable, impactful websites for world-changing non-profits.
In this demonstration we're taking a look at the YouTube embed performance.
This is one in a series of demonstrations where we look at the impact of design, interactive, and content decisions on website when we embed a YouTube video on a website, it comes in from an iFrame, with the URL to the video that we want.
That source comes with all sorts of JavaScript, which affects the performance of the website. Just how much is that embedded YouTube video costing you in performance?
Well, that depends on implementation. Here's our website. The website's theme is very lean. Images are sparsely used, no interactive JavaScript or jQuery. We don't have any trackers installed on the site, like Google Analytics.
I'm going to click around on some pages so you can see that it is very performant. Pages load in right away. The pages are cached on the CDN, the browser cache is cold, as I first load these pages. So this is accurate to what a user would experience when first visiting the website.
It's so lean, in fact, that the website gets a perfect score from Google PageSpeed Insights on mobile and on desktop.
A note about our architecture. This is a classic Twig-based front end. No React, no Vue, nothing is decoupled. This website is hosted by Pantheon. Pantheon is an enterprise Drupal hosting platform. The Pantheon infrastructure includes the Fastly CDN. Given our caching strategy at the Drupal layer, every page on our website will be served from the Fastly CDN, from the edge.
So back to our home page. This is very, very basic. And let's go ahead and look at one of our blog posts. Again, very basic. Here's a case study.
And here is a page on which we have a tutorial about how to configure Gitpod for Drupal development. As we scroll down, we're going to see that there is a YouTube video embed. Not just one. But three. That's the second one. And the third one. These are actually all the same video. And they just start at different parts of the video.
But these are YouTube embeds all the same. And here's what Google PageSpeed Insights thinks about that page. You can see right now that we have a performance problem.
They only get a 72 on average. On a mobile, and an 88 on desktop. We can improve that. So let's take a look at what's going on.
You can see that total blocking time is critical. And the speed index has been slowed down. And you can see that the diagnostics show that some third-party resources can be lazy-loaded with a facade, reduce JavaScript execution time, minimize thread work, reduce the impact of third-party code, eliminate render-blocking resources –those are the red ones.
And then the warnings are serve static assets with an efficient cache policy, ensure text remains visible during web font load, does not use passive listeners to improve scrolling performance, reduced unused CSS and reused unused JavaScript.
All of this is coming from the YouTube embeds.
We had a clean slate when we started, and now you can just see the impact of what a simple YouTube embed has on the website in these various categories.
I will note that the iFrame is lazy-loaded on the page. But that's not going to be enough to completely defer the loading of the iFrame content.
So let's take a look at this first opportunity here. It's telling us that some third-party embeds can be lazy-loaded. Consider replacing them with a facade until they are required.
Ah yes, this is easy to fix on this website. The videos are being served by a Paragraph component, and that component allows us to set a facade image.
The image sits upon, sits on top of the video, and when the user clicks on the image, the custom JavaScript that we wrote will cause the image to disappear and then play the video.
Give me a moment and I'll add that facade image to all three videos.
Okay, the facade image has been added to all three YouTube video embeds.
You can see the first one. And the second one. And then the last one. And like I said earlier, if I click on play, if I just click on the image, or the play icon rather, it's going to drop that image.
And that's all the configuration that we have to do. We're done. And it starts playing the video. Now, let's go see if that improved performance.
I'm going to run the test, the Google PageSpeed Insights test again. Ah, much better. We've made it back up to 100 for performance. And these key metrics are all green.
Implementing YouTube videos with a facade is important. I've known that for a while, but I didn't realize just how much of a hit to the performance grade a page would take if a YouTube video didn't have one.
It's often such a mystery just how much, a given optimization technique will help a Google PageSpeed Insight performance grade. We've learned that not having a facade on a YouTube video has a significant impact on how Google views our website's performance, and this will have a consequence on SEO.
Thank you for tuning in, and happy optimizing.