New to the community? Start here

Defer parsing of JavaScript

I’ve installed the Hummingbird plugin, but I’m still having some Defer parsing of JavaScript report in the GTMetrix for my website. The reports are for my Maps and Youtube video, can you help me, please?

Fri, 19 Oct 2018 4:44:13
More Hummingbird Pro discussions
Hummingbird Pro
  • jnkfrancis
    • Recruit

    Hi Stephanie,

    I’m here to help you out with your Render Blocking issue. I took a look at your Hummingbird configuration and it appears that maybe you have changed your settings since you chatted with Patrick. As of my last review of your site, almost none of your assets in Hummingbird have been moved to the footer or have been deferred.

    One thing to keep in mind is that while you are optimizing your site you may not always be able to defer or move all the assets. It depends largely on the way your theme, and the plugins you are using are set up, and sometimes theme and plugin authors don’t always use best practices or there is some reason why a file shouldn’t be moved or deferred.

    We have a couple of great articles that explain in depth how challenging it is to get a perfect 100 or even 90 for your site speed score:

    https://wpmudev.com/blog/100-score-google-pagespeed-insights-not-happening/

    https://wpmudev.com/blog/why-trying-to-get-95-on-google-pagespeed-insights-will-drive-you-mad/

    So you will want to make sure that your expectations are tempered. In your chat, we found that some of the files that were not deferring were from iframes from Google (YouTube & Maps 360). There is something you can do but it will require you to manually add your videos and maps by placing the <iframe> code into your page or theme. This will not work if you are using a plugin, theme setting or using WordPress’ built-in embedder by just dropping a link. So remember if you are placing videos or maps on a page you will need to switch to the text editor and add the <iframe>.

    Now that’s not to say that it is not possible if you are using a theme or a plugin, but that will require you to contact a developer to alter your theme or plugin.

    So now that I’ve said all that, you could try this method:

    We will need to create a function and hook it into your theme, then we will need to slightly alter the video embed iframe from YouTube and Google maps.

    To start you can use this plugin to add custom functions to your site: https://wordpress.org/plugins/my-custom-functions/

    Then you will want to add the following code to your new functions:

    function my_defer_google_scripts () {
    
if (is_page('sample-page')) { ?>  //Change this from sample-page
    
<script type="text/javascript">
    
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;
    
</script> <?php
    
}
    
}
    

    
add_action( 'wp_footer', 'my_defer_google_scripts');

    Now, remember you will need to edit the second line so that the script is loaded onto the page you want it to load on to. We don’t want to needlessly load this script to any page if it doesn’t have a video on it. You can use either the slug or the ID. You can also add multiple pages to the function using an array for example:

    if (is_page(array('sample-page','another-page','147'))) {?>

    Finally you will want to make sure that when you embed the iframe you change the src to data-src and add a blank src like this:

    Original -> <iframe width="560" height="315" src="https://www.youtube.com/embed/SQt_kyh8RgQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    Edit -> <iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/SQt_kyh8RgQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    I tested this and it worked well for me and improved my relatively un optimized test site from a C- to a B with just this one tweak.

    I hope that works out for you, if you have more questions please feel free to reach out.

    Thanks!

    Jeremy

  • Abby
    • WPMU DEV Initiate

    Hey Jeremy,

    Thanks for your help, I just have a few questions.

    When we build this into our code will it be across the whole website and not just the homepage.

    For example: on our contact page we have a our appointment booker as well as google maps. I ran the GTmetrix score and we have the same problem. Would the code we implement for the home page also fix the other pages on the site or would we have to go through and do it to every page? Also if you look at the GTmetrix score for the contact page it’s pulling as sorts of random plugins and it looks like they’re all going through flywheel… Is this something that code will fix? Do I need to address this with flywheel as well? What do you guys think?

    Let me know and thanks again for your response.

    Best,

    Stephie

  • jnkfrancis
    • Recruit

    Hi Stephanie,

    When we build this into our code will it be across the whole website and not just the homepage.

    The code is set up to only run on the pages you want, so on the second line of that code, you can change the “sample-page” to a list of pages you want to run that script on using an array. So it would look like this:

    if (is_page(array('sample-page','another-page','147'))) {?>

    The part ‘sample-page’,’another-page’ is where you would make a list of pages you want to run this code on. You can put as many slugs or page IDs as you want using that format. The benefit to that approach is that we are not going to load a script unless we actually need it. If your site has a Google Map or YouTube video on every page, or the vast majority of the pages, then we may want to consider adding the code globally. The code for that would look like this:

    function my_defer_google_scripts () {
    
?>
    
<script type="text/javascript">
    
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;
    
</script>
    
<?php
    
}
    

    
add_action( 'wp_footer', 'my_defer_google_scripts');

    This will add the script to the footer of every page on your site. This script should work with all iframes, but be aware I am not able to test it with flywheel. It would depend on how flywheel loads your scheduler on your page.

    I could take a look, but I would need you to enable Support Access again.

    Keep us posted,

    Jeremy

  • jnkfrancis
    • Recruit

    Hi there again Stephie,

    Were you having trouble implementing the code, or is there something you would like me to walk through with you?

    If you could let me know what you would like me to look at, I would be happy to help :slight_smile:.

    Have a great day!

    Jeremy

  • Abby
    • WPMU DEV Initiate

    Hi Jeremy,

    Sorry for the confusion,

    I was just responding to you saying

    “This will add the script to the footer of every page on your site. This script should work with all iframes, but be aware I am not able to test it with flywheel. It would depend on how flywheel loads your scheduler on your page.

    I could take a look, but I would need you to enable Support Access again.”

    I haven’t added the code yet because I don’t know how and I don’t want to mess anything up with my level of knowledge.

    Support access is currently open

    Let me know how you can assist, please :slight_smile:

    Thanks

  • jnkfrancis
    • Recruit

    Hi Stephie,

    I took a look and your booking module should work the same as well. I have included a screenshot to show you how to edit the iframes.

    [attachments are only viewable by logged-in members]

    You can do this with any iframe, the procedure will still be the same: 

    Original -> <iframe src="...
    

    
to...
    

    
Edit -> <iframe src="" data-src="...

    Then, of course, you will want to use this code here:

    function my_defer_google_scripts () {
    
?>
    
<script type="text/javascript">
    
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;
    
</script>
    
<?php
    
}
    

    
add_action( 'wp_footer', 'my_defer_google_scripts');

    Either in a custom function like I mentioned earlier, or if you don’t want to install another plugin, you could always just drop that code into your own plugin and activate it as normal or make it into a mu-plugin. This post explains that process really clearly: https://wpmudev.com/blog/why-you-shouldnt-use-functions-php/

    You will want to scroll down to nearly the end for the information about making plugins.

    Give that a shot and if you run into any more trouble let us know.

    Jeremy