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:

• Change the src="https://www.yo..." to data-src="https://www.yo..."
• Add a new src=""

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