Embedding a YouTube video, live stream, or gallery can add a dynamic and engaging component to a webpage. Unfortunately, however, it can also increase the page's load time and worsen its speed score due to the additional work a browser performs to render. To add to the problem, we all want faster page speeds for higher search engine rankings, user experience, and conversions.
As of version 13.2.3 of our YouTube plugin, it is possible to defer both the parsing of the plugin's own scripts and those scripts from the YouTube's iframe containing the embedded player. Regarding the latter, note that regardless of whether you use a plugin, oembed, or any other method, embedding a YouTube video will require your browser to parse scripts from YouTube/Google's servers. In fact, these are the standard three scripts you'll always see loaded by a YouTube oembed:
Together, they add over 1MB of content to a page's size.
Deferring plugin scripts with the script defer attribute
To defer the plugin-specific scripts, simply go to the Performance Tab as shown below:
To defer the parsing of scripts represented by the two options above, the plugin uses the HTML script defer attribute, which follows this template:
<script src="script.js" defer></script>
Each of the plugin's scripts has its own instance of this attribute with the particular script name between the quotes. We'll refer to this usage of the attribute as direct deferral since the syntax is explicit.
Deferring YouTube embed iframe scripts with lazy loading
Deferring the parsing of YouTube's own iframe, on the other hand, requires a less direct approach since the YouTube player is loaded in its own iframe from YouTube's servers. Browser restrictions prevent a plugin from directly deferring (or manipulating) the JS inside the third-party iframe. To address this, we use lazy loading.
As shown, the plugin includes an additional option to choose how the video is presented upon its load. You can read more about these special effects here. For our tests we choose the more conservative animation that simply pulses the player once.
Experiments with GTmetrix
To test the benefit of combining all the deferral options of the plugin, we ran a simple experiment by running GTmetrix on a WordPress post with one embedded YouTube video. GTmetrix is a highly robust site performance testing tool. Here, we'll focus on its script execution profiling capabilities, but note that it can perform a vast amount of analyses for free and paid users.
Our particular comparisons were with the fully optimized version of our plugin and the default (oembed) embedding option without any active plugins (including ours).
Here's a screenshot of the post we tested with oembed:
Here are the top level GTmetrix results for that page:
A PageSpeed score of 85% isn't bad, but you'll see that it could be better for such a simple page. The core of the problem is shown by looking at the recommendations section GTmetrix provides :
In particular, you'll see a recommendation to defer the three YouTube iframe scripts mentioned earlier. With them undeferred in this case, GTmetrix assigns a grade of F to this particular criterion.
Let's now contrast that with all plugin scripts deferred and lazy loading of the YouTube embed iframe. Below is a screenshot of the tested post, which contains the same video from the oembed run -- and also placed on the top of the post.
Here are the top level GTMetrix results:
That particular criterion receives a 100 A!