Speed up WordPress – Defer JavaScript Parsing

Deferring JavaScript parsing is an excellent way of speeding up your WordPress website, but it is also the one area that causes the most problems. Why do we need to do this?

As a rule, JavaScript tends to be loaded in every page of your website. When a page is called, the code on it is read by the web browser. When a script is called, it must run to obtain all the data before it can load the resources onto the page.

It is down to you, as the owner of the website, to make sure that all the important content is loaded onto your web page first, followed by the less-important stuff like widgets, comments, images and social media buttons.

The idea is to serve the important content to the reader and that is your content – only your content. However, when the code has JavaScript in it, it will be called in the order that it appears in the code and this can slow down the loading of the important stuff.

This is why JavaScript must be deferred and many of you will already have seen a warning message in Page Speed, Pingdom or GT Metrix that tells you to “Defer Parsing JavaScript.

How to Defer Parsing JavaScript

To do this, we need to make some edits to the functions.php file for your chosen WordPress theme. Find it, go to the bottom of the file and add the following code:

// Defer Javascripts
// Defer jQuery Parsing using the HTML5 defer property
if (!(is_admin() )) {
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
if ( strpos( $url, ‘jquery.js’ ) ) return $url;
// return “$url’ defer “;
return “$url’ defer onload='”;
}
add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );
}

This piece of code will stop external JavaScripts from loading until the main content has loaded.

Other Solutions

If the above doesn’t work for you use one of the following code snippets. If any code that you add does not work, please make sure you remove it before trying the next one.

By adding the attribute ‘defer’,

Add this code before the last body tag () instead of in the head tag:

‘<script type=”text/javascript” defer=”defer” src=”YOUR_SOURCE_HERE”></script>’

Move JS to the Footer

By default, WordPress puts all core JavaScript and plugin JavaScript in the HTML header or the HTML footer. Anything that is in the wp_head file must be moved to wp_footer. Add the following code to the function.php file:

if(!is_admin()) {
// Move all JS from header to footer
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
}

Create a Separate JS File

Here’s how to do that:

  • Create a JS file and call it ‘defer.js’
  • Put inside it all the JS code you want deferred
  • Save it and then upload it to the theme folder
  • Open the header.php file and put the following code in before the end head tag:

‘<script type=”text/javascript”>

function downloadJSAtOnload() {

var element = document.createElement(“script”);

element.src = “defer.js”;

document.body.appendChild(element);

}

if (window.addEventListener)

window.addEventListener(“load”, downloadJSAtOnload, false);

else if (window.attachEvent)

window.attachEvent(“onload”, downloadJSAtOnload);

else window.onload = downloadJSAtOnload;

</script>’

Do make sure that the correct path for defer.js is input. It should look something like this:

/wp-content/themes/theme_name/defer.js

Does Parsing JavaScript Really Matter?

Yes, it does. Google uses page speed as one of their ranking factors, basically because all users like web pages to load up fast.

The speed of each page is measured from the second the page gets called to the second the page is initially loaded – the faster it is, the better because that initial load time is what Google uses.

The less unnecessary stuff there is to load before the main event, the faster your page will be.

If it makes Google and your users happy then you should do it. Remember:

  • Your priority is your users – get the content to them as fast as possible
  • Users should never have to wait for the JavaScript to load before they see your content
  • Really, it doesn’t matter how nice your footer is, your users don’t care – they want the content, not the footer.

Leave a Comment Below

>