How to Defer Parsing of JavaScript from YouTube Embeds and Improve GTMetrix Page Speeds on WordPress

The below article primarily focuses on scripts that are loaded by the YouTube player. However, if you're looking to learn about our new YouTube facade mode feature that is offered in both our free and Pro plugin, we recommend you check out this demo on our WordPress test site.

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.

Fortunately, with a website performance technique called JavaScript deferral, you can reconcile both fast load times and video embedding. Briefly, JavaScript deferral involves executing the associated scripts of certain page content, like a YouTube video, only after the page is loaded. With less work for your browser to perform while generating a page, the idea is that your page speeds are better than with in-line execution of scripts.

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:

https://www.youtube.com/s/player/5e4e8d5d/player_ias.vflset/en_US/base.js
https://www.youtube.com/yts/jsbin/www-embed-player-vfltAUueT/www-embed-player.js
https://www.youtube.com/embed/YVvn8dpSAt0?feature=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:

Both deferral options are checked in the screenshot. The first option ("Defer JavaScript") is recommended for all sites as it defers all the scripts that are unique to helping this plugin run. The second option is for jQuery-specific deferral. jQuery is also used by this plugin along with a vast amount of WordPress themes and other plugins, so we separate it as its own option for you to manipulate. Furthermore, not all themes and plugins work well with deferred scripts, so you may not always want to defer jQuery. You can determine whether to have that option checked after testing out your own site. We had no problems with it checked during our experiments (described below) using the built-in Twenty Twenty theme and all plugins omitted except ours. Such a trimmed down setup avoids as many variables as possible.

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.

Lazy loading postpones the loading of an iframe until it is actually visible in the browser. This indirectly defers parsing of the scripts within that iframe. In our plugin we use JavaScript to realize this technique. Here's the option you'll find to activate it in the plugin's admin/settings page:

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:

The score is 99%, the page size is reduced by over 500KB, and the load time drops by half a second. Below, you'll even see that there no longer any recommendations to defer parsing of JavaScript:

That particular criterion receives a 100 A!