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 changesrctodata-src - Add another empty parameter
src="". This replaces thesrcwe just changed todata-src
Your <iframe> should look something like this now:
<iframe src="" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen" data-src="https://www.youtube.com/embed/123456789"></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.
Hi, it worked for me but the video stopped beeing responsive.
Is there a way to keep responsiveness?
You can do that with some CSS. Check out this tutorial for some guidance: https://benmarshall.me/responsive-iframes/
Where does the Css from this tutorial from Ben go?
You would need to add that to either (1) your child theme’s style.css, (2) the Appearance > Customize > Additional CSS, or (3) in a custom stylesheet in a plugin. #2 is probably the easiest place to put it.
Where do I need to paste this Javascript Code?
You would need to add it to it’s own JS file and enqueue it on your pages as needed. Check out the codex source for how to do this.
Hello im having issues with doing this where i can now not pause the video?
HI Scott,
Thanks for the very helpful script.
I added it to our homepage with the Google tagmanager. In about 50% of the cases, i.e. page reloads it doesn’t work: blank space where the videoplayer should appear (to wait further doesn’t help…). Any idea what I am doing wrong. Page load speed drops from 0.952 s to 0.781 s with your script. Thats cool actually.
Great trick! Thanks a lot!
Hi can you please tell me which is the file where I have to paste the last Javascript code. I am not so good about coding
Thanks
You will have to create a JS file and include it in your plugin with the wp_enqueue_scripts function.
My site home page have 4 youtube videos
only first iframe src apply working other three iframe src value is “unknown”.
I did this with only one video on the page, so I can’t say for sure how it will work with multiple videos. But you can try something like this (untested) code:
function init() {
var vidDefer = document.getElementsByTagName('iframe');
var iframes = Array.prototype.slice.call(vidDefer);
iframes.forEach(function(iframe) {
if(iframe.getAttribute('data-src')) {
iframe.setAttribute('src',iframe.getAttribute('data-src'));
}
}
}
window.onload = init;
Incredible advice. Changed the two YouTube videos on the home page of my site and just went from an ‘F’ grade in defer parsing of JavaScript on GT Metrix for a 100% ‘A’. Can’t thank you enough.
Now – next question. I have over 200 other YouTube videos on my site. Do I have to change each of those individually to help the load speed for those (if I’m sending people to those individual pages via social media) or is there a better way?
You shouldn’t need to add the JavaScript for each video (the one time is sufficient), but the
src="" data-src="https://youtube.com/..."bit will need to be modified for each video to get the benefit.Hi! First thing I’ve tried to defer parsing of JavaScript was to activate the option in the cache plugin I use (Litespeed Cache), but I had some visualization problems about Rev Slider and translation plugin also (Transposh), so I excluded the corresponding JS of deferring, but not fixing the error… After that, did the same but using Fast Velocity Minify plugin instead, same results. Maybe adding the code to functions.php skipping these problematic JS could be the solution but, how can I exclude it by code?
Many thanks for the help!
Great! It worked for me. Saved me the trouble
Glad it worked for you Kelvin!
Hi Scott,
Great tutorial. But not working on Firefox. I mean, no display.
Try clearing the browser’s cache and use a Private Window (CTRL + Shift + P) so no browser extensions are conflicting with what’s on the page.
It should work on any browser.
You did not mention for newbies where to paste that Java Script Code ?
in tag or after tag?
Where?
You could place that in a separate JavaScript file and use the WordPress wp_enqueue_script() function to load it as needed.
Some themes also have a way to add scripts to individual pages, which should work as well.
Hello Scott how are you? I am new to wordpress and I have been searching a lot to solve the problem with render-blocking javascript on the website that I’m making.
I tried to implement this solution on my website but the elementor page builder doesn’t accept the HTML code to embed the video into the page. Its gives me an error.
My HTML for the video has this format:
I also created a .js file with this code and Iv’e put it into my site’s main folder:
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;
And in my theme’s functions.php file I have added the function to enqueue the script like this:
function enqueuescripts() {
wp_enqueue_script (‘miguel’,’videos.js’, false);
}
add_action( ‘wp_enqueue_scripts’, ‘enqueuescripts’ );
Do you spot what may be wrong?
Thank you very much in advance!
In your
wp_enqueue_script()function, you need to make thevideos.jseither the full URL to the file, or a path of the file relative to the WordPress root directory.Something like:
wp_enqueue_script( 'miguel', 'https://yoursite.com/wp-content/themes/your-theme/videos.js', false );Or:
wp_enqueue_script( 'miguel', get_template_directory_uri() . '/videos.js', false );You should be able to tell if the correct file is loading by viewing the source code of your site to see if the videos.js file shows up or not.
Brilliant! Thank you.
It is not working if you use AMP.
I haven’t had the opportunity to use this on AMP so unfortunately I don’t really know what changes you would need to make to get it to work.