You may have encountered PageSpeed Insights warning of “Defer Parsing of JavaScript” while running a website speed test. Here’s how to accomplish it easily in WordPress.
Defer JavaScript in WordPress
There are three main routes you can take to defer the parsing of JavaScript within WordPress. A WordPress plugin would offer a great solution to postpone JavaScript parsing. You can find both free and premium plugins to do this. With the help of two popular plugins, we will show you exactly how to accomplish this.
Using the Varvy method is an option if you are a tech-savvy user and are willing to edit the code directly on your site to use the snippet from Varvy.
It is also possible to automatically defer scripts from loading in your child theme’s functions.php file by adding a small code snippet to the file. Let’s start with the first method:
1. Free Async JavaScript Plugin
Frank Goossens has created a free WordPress plugin called Async JavaScript, developed by the same guy behind the viral Autoptimize plugin.
With it, you can simply defer parsing JavaScript by using async or defer methods.
You can get started by installing and activating the free plugin from WordPress.org to get the process started. You will then be able to configure the plugin in the Async JavaScript section of the Settings page.
At the top, you can enable the plugin’s functionality and choose between async and defer.
JavaScript is downloaded while HTML is still being parsed during async download, but the HTML parsing is paused to execute JavaScript.
This feature allows JavaScript to be downloaded while HTML is still being parsed and waits to execute it after HTML has been parsed.
You can choose how jQuery will be handled further down the page. You might break your website’s core functionality if you try to defer parsing your jQuery scripts. If you want to be safe, you’ll want to exclude jQuery, but if you want to experiment with deferring it, that’s fine too. Test your website before launching.
There is also a nice user-friendly feature that lets you target specific themes or plugins that are active on your site by choosing whether they should be deferred or not, as well as the ability to manually include or exclude specific scripts from being delayed.
2. Use the WP Rocket Plugin
The WP Rocket plugin is one of the few caching plugins we allow because it has built-in integration for server-level caching that integrates smoothly with the WP Rocket plugin.
The File Optimization tab of the WP Rocket dashboard includes many other performance optimization options and the ability to defer the parsing of JavaScript, which you can find under the Performance tab. On the JavaScript Files section, you can find an option that says Load JavaScript deferred.
Use Varvy’s Recommended Method
Earlier in this post, we mentioned that Patrick Sexton of Varvy recommended using a code snippet that would wait until after the initial load of your site has been completed before downloading and executing JavaScript.
By tweaking the code snippet that Varvy supplies and then adding the script directly before the closing tag of the body tag, you can implement this method by using the code snippet Varvy supplies as a template.
You can find more articles like this at Seahawk Media Blog.
Looking to make your WordPress site fast? Opt for our WordPress speed optimization service.
