isotropic-2022
Share
Blog
Search
Menu

How To Defer Parsing of JavaScript For Youtube Embeds

By James LePage
 on May 1, 2020
Last modified on January 6th, 2022

How To Defer Parsing of JavaScript For Youtube Embeds

By James LePage
 on May 1, 2020
Last modified on January 6th, 2022

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>Code language: HTML, XML (xml)

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>Code language: HTML, XML (xml)

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;Code language: JavaScript (javascript)

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 } );Code language: JavaScript (javascript)

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).

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram