Table of Contents
Last update on
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:
- Critical – JavaScript files that are essential to load before all other types listed below since they are crucial to the functioning of the page.
- Non-critical – Other JavaScript files that need to be loaded on a page, but aren’t considered essential.
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” recommendations 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.
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 Making JavaScript Load Faster is Important
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 and your Core Web Vitals scores will suffer. Tackling JavaScript issues, in fact, is a good way to optimize the First Input Delay and the Largest Contentful Paint performance.
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% of 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 to Defer Parsing of JavaScript and Make JS Files Load Faster
By deferring parsing of JavaScript files, you’ll make JavaScript load faster – which is great for boosting your WordPress site’s performance. There are three main ways to do this in WordPress.
1. Use the Defer or Async Attributes
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.
What’s the Async Attribute?
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.
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.
What’s the Defer Attribute?
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.
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.
2. Using a Plugin to Safely Defer Parsing of JavaScript in WordPress
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.
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.
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.
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.
3. 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.
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.
Save yourself time and let WP Rocket do the job for you!
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!
