Defer Parsing of JavaScript

You may have benchmarked your WordPress website’s speed only to find you need to “remove render-blocking JavaScript,” “defer parsing of Javascript,” or “eliminate render-blocking resources,” WordPress-related files included.

This may make you wonder, “How can I make JavaScript load faster? What do scripts have to do with my site’s speed, anyway?”

In short, this means you need to alter when your Javascript files execute or load to speed up your site. In other words, you need to defer parsing of JavaScript.

You can defer loading of JavaScript WordPress files, through code such as with JavaScript defer. Or, you can use a plugin like WP Rocket to safely resolve the issue in a couple clicks.

Today, I’ll share more details on how to defer parsing of JavaScript as well as deferred loading of JavaScript and how to do it with code as well as with WP Rocket. I’ll also answer the question “What is JavaScript defer?” so you can speed up your WordPress website and resolve diagnostic warnings.

What It Means to Defer Parsing of JavaScript

To understand what it means to defer parsing of JavaScript or to defer loading of JavaScript, (WordPress, web apps, and other types of websites included) it’s essential to get a refresher on what parsing is first.

A Quick Reminder on Parsing

Parsing is the process of converting human-readable code, in this case JavaScript, into a language that a computer can understand. That way, the functions your code is supposed to carry out can do just that.

You can also indicate in a file that you want to load one or more separate JavaScript files when the main file runs.

This lets an ordinary site with some text and images suddenly have a lot more robust capabilities that you can code with JavaScript.

Loading Multiple JavaScript Files

In a website file, when you set JavaScript files to load, there are two main types:

There is also the inline option. This refers to JavaScript that’s delivered inline in an HTML file, for example, instead of having a separate JavaScript file that’s called in the main file.

Defer Loading of JavaScript: WordPress and Other Websites

When you indicate in your code that you want to load JavaScript files, you can choose when files are parsed and even when they’re loaded. That way, you can choose to execute critical JavaScript files first and delay the execution of non-critical files, which you can set to run after the primary content on the page has been displayed.

This process is what it means to defer parsing of JavaScript, at least when execution of JavaScript files are delayed.

To defer loading of JavaScript, WordPress and other types of websites included, would mean you’re delaying the files from being loaded (and then executed) until after the rest of the page has been displayed.

Defer Parsing of JavaScript in Plain English

This can all be confusing when you’re trying to figure out what it means to defer parsing of JavaScript for your WordPress site. This is especially true if you’re seeing “remove render-blocking JavaScript,” “defer parsing of JavaScript,” or “eliminate render-blocking resources” WordPress site results in Google’s PageSpeed Insights, GTMetrix, or similar tools.

It may help to think of your site like a cake. They typically have a layer of the cake on the bottom, then a layer of frosting followed by another layer of cake, then topped with icing.

If you defer parsing of JavaScript, your site becomes like a well balanced-cake: Enjoyable.
If you defer parsing of JavaScript, your site becomes like a well balanced-cake: Enjoyable.

A well layered dessert like this can be seen as WordPress site that loads content and JavaScript quickly and efficiently because you have opted to defer parsing of JavaScript. 

You can think of the icing as critical JavaScript files and the filling as non-critical JavaScript files.

If you built the cake to have two layers of cake directly on top of each other, then put all the frosting on top instead of in between the layers, it takes someone longer to get to the cake part when they dig into it with a fork.

It’s also unbalanced and unappetizing because of that.

This is similar for WordPress sites. Having all your JavaScript files load or execute first before everything else just slows the page’s speed. It ends up taking a long time for users to see much or any content.

That unappetizing feeling comes in the form of disengagement in terms of your WordPress site.

Instead, if you move some of the frosting (or JavaScript files) to appear later on, the cake or site becomes a lot more engaging after that.

This would be an example of what it looks like to defer parsing of JavaScript or to defer loading of JavaScript WordPress files.

Remove Render-Blocking JavaScript in Plain English

The “remove render-blocking JavaScript,” or “eliminate render-blocking resources” WordPress site results in the PageSpeed Insights tool is basically letting you know you need to defer parsing of JavaScript, or to defer loading of JavaScript WordPress files or CSS files in some cases.

Why It’s Important to Know: How Can I Make JavaScript Load Faster?

That may be all well and good, but why would loading or executing a bunch of JavaScript files toward the start of a page load be such a problem? The reason is that by default, loading JavaScript files will interrupt the parsing of HTML.

This makes the browser have to wait to load the rest of the page such as content including text and images.

If you’re loading all your JavaScript files before any or most other content and you didn’t defer parsing of JavaScript, your site may not display much of anything. This could go on for several seconds as the loading of a page is further delayed. 

When it comes to ranking higher in search results, every second counts.

The longer your page takes to load, the less likely it is that your site will rank well.

Plus, if you’re loading non-critical JavaScript files before crucial things on the page like your main content and focus, such as text, your site’s user experience goes way down.

If you force people to wait several seconds before they can read anything useful, they could lose interest and navigate away from your site.

Google’s research has even shown that a one-second delay in loading times for mobile sites can decrease conversion rates by up to 20%. Not to mention that every additional second creates another drop in conversions by 20%.

That’s why Google recommends your page loads 90% its main visual content in, at most, 100 ms. Otherwise, your site will lose favor in search results.

That’s also why it suggests you defer parsing of JavaScript or defer loading of JavaScript WordPress files to resolve the “eliminate render-blocking resources” WordPress site diagnostic results in PageSpeed Insights.

How Can I Make JavaScript Load Faster?

So, to answer the question, “How Can I Make JavaScript Load Faster?”: One of the things you can do is defer parsing of JavaScript files. There are two main ways to do this in WordPress: With a plugin or with code.

What Is JavaScript Defer and Async?

To answer the question “What is JavaScript Defer and Async?” you need to turn to HTML 5.

When trying to defer parsing of JavaScript, you can use boolean attributes “defer” and “async” for the script tag in HTML 5. When set in a file that calls JavaScript files, they’ll load when indicated.

The async attribute can be used to load JavaScript files asynchronously, which means the rest of the page can go ahead and load, uninterrupted, as the JavaScript files execute at the same time.

The defer attribute, on the other hand, can be used to have JavaScript files executed only after the rest of the document has loaded. Although, these files are still loaded asynchronously.

Files are also executed in the same order in which they were called.

Here’s an example of how you would use the async boolean attribute:

Be sure to change /path/to/file/script.js to the actual name and path of your external JavaScript file.

Below is a basic example of the defer boolean attribute in action to defer parsing of JavaScript:

Again be sure to update /path/to/file/script.js to your real file’s location.

If you want to defer loading of JavaScript WordPress files instead of the option to defer parsing of JavaScript, check out How to Really Defer Loading of JavaScript.

Alternative Coding Options to Defer Parsing of JavaScript

Other than those, you can also defer loading of JavaScript WordPress files or defer parsing of JavaScript by adding code with the “script_loader_tag” filter to your functions.php file. Just be sure to create a child theme, first, then add the code to your child theme’s functions.php file.

That way, the code won’t be erased when the WordPress core or your theme is updated.

For details, check out How to Defer Parsing of JavaScript Files in WordPress.

Using a Plugin to Safely Defer Parsing of JavaScript

If you’re not keen on adding the code you need to defer parsing of JavaScript or to defer loading of JavaScript WordPress files, then you can use a plugin.

The trick is, many options out there can break your site. One reason is because you have to manually decide which files to defer. You may defer parsing of JavaScript files that are critical which would cause errors.

But, if you use WP Rocket, you can safely and appropriately defer JavaScript files in a couple clicks.

It also has the added benefit of helping your site load faster.

After installing the plugin, everything’s already set up for you and you can defer files. There’s an option to defer loading of JavaScript WordPress files instead of only letting you defer parsing of JavaScript.

Go to Settings > WP Rocket.

Then in the WP Rocket menu, click on the File Optimization tab.

File Optimization settings in WP Rocket
You can optimize your site’s speed in many ways with WP Rocket.

Under JavaScript Files, check the Load JavaScript deferred box. It’s also recommended you check the Safe Mode for jQuery box that dynamically appears underneath the former option.

If you want to deactivate Safe Mode, be sure to test the changes on a staging site before you choose the safe mode option on a production site.

Finally, click Save Changes at the bottom of the page.

Load JavaScript deferred: WP Rocket settings
Load JavaScript deferred: WP Rocket settings

If for some reason you decide you want to revert the change, you can uncheck the Load JavaScript deferred box and click Save Changes. Then, clear your site’s cache.

In Conclusion

By now, you know the answers to the questions “How can I make JavaScript load faster?” and “What is JavaScript defer?”

You also know how to defer parsing of JavaScript or to defer loading of JavaScript WordPress files. Not only that, but you can resolve the “remove render-blocking JavaScript” and “eliminate render-blocking resources” WordPress site results in page speed diagnostic tools.

You’re ready to speed up your WordPress site.

Were you able to successfully defer parsing of JavaScript or defer loading of JavaScript WordPress files? Were you able to resolve the “eliminate render-blocking resources” WordPress site warning? Share your experience in the comments below.

Author's avatar

A copywriter, copy editor, web developer, consultant, course instructor and founder of WP Pros(e), Jenni McKinnon has spent the past 15 years developing websites and almost as long for WordPress. A self-described WordPress nerd, she enjoys watching The Simpsons and names her test sites after references from the show.

5 comments

Maybe you could consider to build in a function which lists all js and css files and allow a file-by-file selection of load order and load-type.

Cheers
Hansjörg

I am on SiteGround so I use their SG Optimizer with WP Rocket, but sometimes I have to use one or the other. Would it be better to just use Rocket?

    Hi Richard, you can use SG Optimizer and WP Rocket together. You can find all the info in our documentation: https://docs.wp-rocket.me/article/115-can-i-use-wp-rocket-with-sg-optimizer

I am using WP Rocket and followed the steps above. I'm still in the red on GTMetrix with no improvement. Do you have some troubleshooting suggestions?

    Hi Maggie :) The best thing would be to get in touch with our Support Team, they will be happy to assist you. You can contact them from here: https://wp-rocket.me/support/

Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}