S c r o l l t o E x p l o r e S c r o l l t o E x p l o r e S c r o l l t o
November 19, 2019
How to Defer JavaScript Parsing in WordPress

By: Category: Uncategorized Tags:

How to Defer JavaScript Parsing in WordPress

  Have you ever run a webpage speed test and come across an error recommending JavaScript parsing? If so, you’re not alone.  Overview gtmetrix defer javascript screenshot Though not specific to WordPress, understanding this error is a crucial step in making your website run faster.  So what is JavaScript parsing and what does this error actually mean?  More importantly, how do you fix this error yourself? Today we’re going to take a look at what JavaScript parsing is and why you need to defer it.

What is JavaScript Parsing and Why Defer

  A webpage (or website) is made up of a number of resources. They include the webpage code itself (HTML), the styling (CSS), images (JPG, PNG, GIF, etc.), and JavaScript.  In addition, there are other resources such as fonts and video content. But the resources mentioned above are the most important resources to focus on. At least when it comes to optimizing your website for speed that is.  The problem is, when it comes to optimizing JavaScript, things get a little complicated.  When your browser fetches and uses JavaScript, the browser has to fetch and then parse, or execute, the code to make it do what it’s meant to do in that moment.   When someone lands on your website, it executes the HTML code it finds to render the site in a visual way for site visitors to see. As the site visitor’s browser scans the HTML code, it also looks for JavaScript code. If it finds JavaScript, the browser stops rendering the site until it can fetch and parse the JavaScript files. This process takes more CPU resources than any other task that helps load a webpage. And this process can take a lot of time to finish, slowing the load times of your website and negatively affecting the user experience. This happens for JavaScript that’s hosted on your own website as well as the third-party resources you load such as Google Analytics, Facebook pixel, or any other dynamic element. 

So What Does It Mean to Defer Parsing of Javascript?

  When you defer parsing of JavaScript, you tell your site visitors’ browser to wait to download and parse JavaScript until after your site’s main content (the HTML) finishes loading. This way you site visitors can see and engage with your site’s content and the JavaScript can finish parsing in the background.  As a result, your site’s speed is maintained and the user experience is preserved. Plus, you make Google happy and rank higher in search results. asynchronous screenshot JavaScript Parsing - Async, Defer - by www.growingwiththeweb.com

Async vs Defer

You can defer parsing of JavaScript in many different ways. But to start, it’s important to discuss the two attributes you can add to your scripts:  
    1. Async: does not pause HTML parsing to fetch JavaScript (as it normally would). However, it does pause HTML parsing to execute the JavaScript once it’s fetched.
    2. Defer: downloads the JavaScript while parsing the HTML, but will wait to parse the script until after the HTML parsing is done.
    Both of these attributes are used in the <script> tag like these examples: Async example: <script async src="https://example.com/javascript.js"></script>   Defer example: <script defer src="https://example.com/javascript.js"></script>   In the end, the main difference between async and defer is that async blocks the parsing of the webpage and defer does not. That’s why you should use defer any time you can.

How to Defer JavaScript Parsing Using WP Rocket

  The easiest way to defer JavaScript parsing in WordPress is to use a plugin.  Of course, if there are just a few scripts that you need to defer, and they are third-party or manually included scripts, then you can simply add the keyword ‘defer’ into the code as mentioned above.  However, WordPress normally has a lot of JavaScript files. This makes manually adding keywords impractical. A great WordPress caching plugin like WP-Rocket will help you achieve JavaScript parsing. In fact, all you’ll have to do is enable a few backend settings.   To start, go to the File Optimization tab: backend of plugin screenshot     Next,  select the option Load JavaScript deferred   It’s ideal to keep Safe Mode for jQuery (recommended) enabled too to avoid any jQuery errors, especially for the inline code (code used within the page itself, instead of being loaded from an external file). wp rocket settings   And that’s it. You now successfully know how to defer JavaScript parsing using WP Rocket.  Just remember to test your website after performing these optimization steps to make sure the browser is not showing any errors.  You can do this by viewing the Developer Console, which is available in all web browsers. You can enable the Developer Console by pressing F12 and then clicking the Console tab. developer console in google chrome    

Other Ways to Defer JavaScript Parsing

  Most caching plugins offer the option to defer JavaScript parsing. However, if you’re not already using a caching plugin, or your solution doesn't offer this option, you can add deferring to your scripts by installing a plugin like Autoptimize This lightweight plugin has minimal features compared to a fully-featured caching plugin like WP-Rocket. And it’s free too, which is great for those on a budget. Another WordPress plugin called Async JavaScript is a good option too. However, this will only work if you’re not using any other plugin for deferring or async.  To use this solution, all you need to do is to install the plugin and then go to SettingsAsync JavaScript. async javascript in Wordpress   Next, go to the Settings tab inside the plugin menu and click Apply Defer (jQuery excluded). Then, click Save at the bottom of the page. plugin settings   Here’s a look at what the scripts look like before applying defer: before plugin settings activated   And here’s what it looks like after applying defer using the Async JavaScript plugin:   after plugin settings enabled Webpage source code - After adding defer attribute Note that some plugins use defer=’defer’, which is exactly the same as using the keyword ‘defer.’

How to Defer JavaScript Parsing Manually

  To manually defer JavaScript parsing of a third-party script, all you need to do is include the keywords ‘defer’ in the calling script as mentioned above. When you do, the script will be deferred or loaded in async mode. Note that the position of the ‘defer’ keyword within the script tag does not matter. You can add it to the beginning like above or at the end.  The key is to remember to add it within the opening tag (shown in red below), and not the closing: <script src="https://example.com/javascript.js" defer></script>

Wrapping Up

And there you have it! You now know what it means to defer JavaScript parsing, why it’s important, and how to do it both using a plugin like WP Rocket and manually. Don’t let the natural processing of your website’s code drag your site speed and performance down or ruin the user experience and your search engine rankings. Instead, take a proactive approach to site optimization and defer parsing. It’s so simple, there’s no reason not to. If you’re interested in speeding up your WordPress website in more ways, get in touch with us at Revealize. We offer specialized website design services that are meant to help you stand out from the competition, grow your following or business, and provide an exceptional user experience to everyone that lands on your website, no matter where they come from.