How To Defer Parsing of JavaScript For Youtube Embeds

Authored By: James LePage
Published On: May 1, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

amazon elementor E book

Many GTMetrix users are discovering that embedded Youtube videos are causing significant render-blocking and interpreting page loading speed for WordPress Websites.

If you haven't directly optimized your YouTube embeds, they're probably impacting your Google PageSpeed Score and Y-Slow score (not to mention the actual load time of your site).

The fix is pretty simple: Defer all Youtube JS. Here's how to do it.

First, make sure the video is embedded using the iFrame generated by YouTube. Go to your video on Youtube, right click and select "Copy Embed Code".

If the codes match, continue on. If not, replace the existing code with the copied code. It should look something like this:

<iframe width="768" height="432" src="https://www.youtube.com/embed/BJRxhCy1Qmk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Now make these two changes:

Here are what your changes should look like:

<iframe src="" width="768" height="432" data-src="https://www.youtube.com/embed/BJRxhCy1Qmk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

What this does is basically turn off the loading of the iFrame until we tell it to do so (using Javascript). The script tells the browser to load the iFrame, so whenever the browser gets to loading the script, the (deferred) loading of the iFrame occurs after. The script:

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;

You can install this script in your footer using any built in WordPress theme tool, using <script> tags or our favorite method, adding it directly into the themes functions.php.

Instead of installing directly into your theme's functions.php, we recommend going ahead and using the "Code Snippets" plugin. Install it, make a new Snippet, and paste this code in:

add_action( 'wp_footer', function () { ?> <script> 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; </script> <?php } );

You can also filter it to only run on the WordPress frontend. It calls your javascript on footer load, which in turn loads your YouTube embed.

If you installed the script correctly, re-run the GTMetrix report and you'll see that all deferral opportunities for YouTube are gone. You'll also see a higher PageSpeed score and quicker load times (in many instances, you can chop seconds off your load time via this super simple fix).

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.