Defer Parsing of JavaScript With YouTube Videos

Deferring parsing of JavaScript is one of those messages that you get on sites like GTmetrix and other page speed sites that may sound like it’s from another planet. What on Earth does defer parsing of JavaScript even mean? Basically, what the message is saying is that a browser needs to process all of the content inside <script> tags before it can load the page. By putting off the processing of JavaScript until it is actually needed, you can reduce the initial load time of your page.

Defer Parsing of JavaScript YouTube Videos

I had a site with one YouTube video on the home page. The home page, when loaded was getting a low score in GTmetrix, and I wanted to do something to change it. The worst offender was Defer Parsing Of JavaScript, which had 13 scripts being loaded on the initial page load. Six of those were from youtube.com!

When you embed a video in WordPress by copying and pasting the video’s URL from sites like YouTube, Vimeo, etc. WordPress creates an <iframe> for that video. It’s basically the same <iframe> code that you’d get by copying the embed code directly from YouTube.

So, instead of using the URL to embed the video, go to YouTube and copy the <iframe> embed code.

• Under the video, click the Share button
• Towards the bottom, click the Embed button
• Make any adjustments to the Embed Options you may need
• Copy the embed code at the top that starts with <iframe width=

Next, come back to your site and paste that <iframe> code where you want it to go on your site.

You’re going to need to change a bit of the <iframe> code.

• Find the src="https://www.youtube.com... and change src to data-src
• Add another empty parameter src="". This replaces the src we just changed to data-src

Your <iframe> should look something like this now:

<iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/123456789" frameborder="0" allowfullscreen></iframe>

The JavaScript

The <iframe> we set up by itself won’t load the video correctly. We’ll use some JavaScript to get it to load correctly.

function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

The next time I ran the GTmetrix test on that page, the Defer Parsing of JavaScript score went from an F (0) to a B (85). Initially, there was 2.2MB of JavaScript being loaded during the initial page load. After optimizing, it was down to about 168KB.

Other Considerations

In my case the video was only on the home page, so I made sure the JavaScript file only loaded on the home page. In the future, if I have other pages that need this adjustment, I can add them to this conditional in my wp_enqueue_scripts function. If the video is set up the same way, you shouldn’t need any other JavaScript to load other videos on your site as the JavaScript looks for any <iframe> elements that have a data-src attribute.

Also, special thanks to Patrick Sexton, for the initial guidance for this post.