Defer Parsing of Scripts

Question

this is my first time to try this "Defer Parsing" thing, and I don't really have an idea how to do it.

Using PageSpeed tool, I found out that one of the reason why my page is loading too slow (currently 92/100) are the scripts. And the PageSpeed suggested that I need to Defer Parsing all those scripts.

Is there anyone that can help me with this. Thanks.

Answer 1

At the first glance, you sure have a lot of Javascript included in your Website. You can take a few steps towards reducing/speeding up this section.

Before I start, please let me remind you that the PageSpeed by Google is not an actual tool to keasure how fast a website loads, it is more a tool to see how you can set up your website to ensure to get the most best load time your server allows. To see the actual load time, go to the network tab on your console and load the page without the cached files (cmd - f5) and look for the two vertical bars, the first being document ready and the second for the fully loadedpage.

Enough with the theory, let's get working :-)

Determine which scripts you actually need

This may seem trivial, but it is a really important step.

You should just load the needed Javascript on each page. In your example, you have the cool, but extensive JWPlayer installed. Are you sure you need it on every Page?

Also check through your files to see leftovers from Plugins or not needed other files, and eliminate those.

Load minified versions

The next step would be to minify your files. For example, you load jquery.js instead of jquery.min.js. This will allow you to reduce the transmitted data.

For non-standard Javascript files like your own scripts.js, there are a lot of free Javascript minifyers out there. Just save the minified file and you are good to go by adding this line of code to your functions.php: (this example is with jQuery, but it works for every properly enqueued piece of Javascript)

function modify_jquery() {
if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', get_bloginfo( 'template_url' ) . 'js/jquery.min.js', false, '1.8.1');
    wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');

Load common Javascript from the Google Library

Now talking of the files like jQuery, you can load them very fast and reliable from Google's (or other sources) CDN, by adding this code to your functions.php (please note that you should not do both this and the befor action with jQuery - the last point was just to illustrate how to change the include path of enqueued Javascript files)

//Making jQuery Google API
function modify_jquery() {
    if (!is_admin()) {
    // comment out the next two lines to load the local copy of jQuery
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js', false, '1.8.1');
    wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');

Combine Javascriptfiles

Another Step you could take is to combine some of your Javascriptfiles into one, to reduce the amount of Requests the Browser sends to your Server.

Load Javascript in the Footer

This is very important!

Move all the Javascript that is not necessary on the Pageload from your Head to the Footer section, to allow the buildup of the Page before the heavy Javascript is loaded.

This does not change the amount of transferred data, but the user of your Website can see results faster, as the Page is loaded first.

The wp_enqueue_script() function has a parameter to load the specific script in your Footer (the fifth parameter has to be set to true). Please see the code refence here.

Using the same functions as above, you can accomplish that behaviour.

Pease be sure to set the dependencies right, so the javascript loads in the right order. The dependecies (third parameter) tell WordPress which files should be loaded first, so if you put 'jquery' in there, it will always load after 'jquery' is loaded.

So far so good, a lot of work to be done

You may get frustrated by modifying the code as mentioned above, because it's not always clear, especially if you use a lot of plugins, how the dependecies work, which files actually can be loaded in the footer, etc.

Always take one step at a time, and check out if your site still works as expected.

What about a plugin that does it all?

Of course, you can always use a Plugin like W3 Total Cache that handles the combination, minifcation and position of your Javascript, but this is hard to handle. If you figure it out, how to do it, great! It takes a lot of time to really understand how this works, and it is the one Part of W3 Total Cache that I often get frustrated about.

However, if you follow the above rules, and make sure you and all your plugins enqueue the javascript correctly in the WordPress way, this should be a huge step towards a faster loadingtime concerning your Javascripts.

last but not least

Wow, I hate this words. But then again, I always wanted to write 'last but not least', for at least once in my life ;-)

Your Google PageSpeed is already really good. The Javascriptstuff will only lead to a few points increase max, so don't just look out for that - look at the actual load times, and post the results.

And now, have fun! :-)

Answer 2

My help will be to recommend not to bother with it. When you use defer you tell the browser not to parse the JS being loaded. The implication for not parsing the JS is that any code that is supposed to be executed when the JS is loaded will not be executed. Therefor in order to use defer you have to be 100% sure that the defered JS are not executing code at parse time.

From your screenshot you are loading 6 JS files from sources beyond your control which means that even if you can defer them today they might change in the future without you having any indication for that. Most of the rest of the JS is probably core or plugin files about which you can't know if they can be defered unless you put the time for code inspection or ask the authors.

Basically you should defer only code you have written yourself. It is up to the plugin and theme authors to start deferring their own JS.

[rant] This is a pointless advice made by PageSpeed. Most JS files are relatively small and the parsing time is insignificant, and if you load the JS at your footer no one notice it in any case. [/rant]

EDIT: I guess the word "defer" can be interpretated as calling for several different type of actions. I was assuming here that it refers to using defer="defer" in your JS links, but this answer applies also for other types of defering, if your JS is loaded in the footer it should be good enough for 99% of sites. The only exception is mobile in which you simply don't want to load the JS at all untill the point in which it is absolutely needed.

Answer 3

Add following code at the bottom of theme functions.php file:

    function add_defer_attribute($tag, $handle) {
   $scripts_to_defer = array(
                            'contact-form-7',
                            'et_monarch-idle',
                            );

       if (in_array($handle, $scripts_to_defer))  return str_replace(' src', ' defer="defer" handeler="'.$handle.'" src', $tag);

  return str_replace(' src', ' handeler="'.$handle.'" src', $tag);
}

add_filter('script_loader_tag', 'add_defer_attribute', 100, 2);