Table of Contents
JavaScript is challenging, no doubt. It is a powerful programming language that enables incorporating engaging and dynamic elements into your website pages to enhance visitor interactions.
When you run audits for your WordPress site through tools for testing performance and speed, you may encounter a recommendation to “defer parsing of JavaScript.” In simple terms, JavaScript may impact your WordPress site’s load times and requires work to sweeten your website speed.
However, this instruction may not be as straightforward and creates confusion. Therefore, this guide will decipher its meaning and help you implement the required change.
Understanding the Meaning of Defer Parsing of JavaScript in WordPress
When a user visits your website, the server will send your website’s HTML content to the user’s browser. Usually, the browsers render your website by beginning from the top and going across the entire code.
Supposedly, if the browser locates JavaScript in this process, it will pause the rendering to retrieve and parse the file for JavaScript. And this continues for all the scripts the visitor’s browser comes across. It adversely affects the speed of your web pages and causes the user to wait longer until the browser parses JavaScript.
Commonly, the tools for testing the page speed suggest deferring the parsing of JavaScript when a specific script is unnecessary for your website’s core functioning. These scripts may be obstructing the loading of crucial website components.
Now, moving on to the meaning of deferred parsing of JavaScript. Your website may suggest the browsers of your users wait to parse/download JavaScript “after” the completion of the loading of the primary content of your website. It enables users to notice and engage with the essential page elements.
Consequently, it will not hurt the user experience with the delayed time for parsing and downloading. The result of speedier load times for above-the-scroll content will help deliver a better user experience and impress the search engines.
How to Analyze the Website?
Before you defer parsing JavaScript, you need to analyze your website to understand if it needs deferring parsing of JavaScript. For this, you require speed or performance testing tools like GTMetrix. It will offer a grade alongside specific JavaScripts in need of deferring.
Methods for Defer Parsing of JavaScript
Moving on to how to defer parsing JavaScript in WordPress, you can follow the three tried-and-true methods.
Defer JavaScript Using a Plugin
When you have problems concerning WordPress, you know there is a plugin for everything. Putting this blessing to full use, you can discover endless plugins ready to customize your website without difficulty. While you have the manual solution discussed in the following method, you can fully utilize the following plugins.
Async JavaScript
The straightforward, lightweight, and free Async JavaScript plugin allows you to select and defer parsing JavaScript with async or defer. To use this plugin, you must first download it to your WordPress dashboard and activate it.
Next, you can visit the settings to access Async JavaScript and make desirable changes. Enable the plugin to function and select whether you want to apply defer or async.
If you choose async, it will download JavaScript and parse HTML simultaneously but later halt the parsing to carry out JavaScript. Conversely, applying defer will download JavaScript concurrently as parsing HTML. It will wait to execute JavaScript until the completion of HTML parsing.
Following this, you can find jQuery and select how to control it. Since several plugins and Popular WordPress themes use jQuery, deferring parsing its scripts can negatively impact the core functionality of your WordPress site. You can try deferring it, but forgoing this aspect is ideal.
WP Rocket
WP Rocket is another excellent tool to defer the parsing of JavaScript. All you need to do is access its menu and visit the “File Optimization” tab. Under the “JavaScript Files” section, look for the choice that says, “Load JavaScript deferred,” and tick the box adjacent to it.
Manual Deferring with functions.php File
An alternative method to using plugins is manually altering your site’s functions.php file to allocate the defer attribute. However, you must be extra careful when editing the files, as any code error can lock your site. Hence, prepare a backup copy of your files and website, provided things don’t go as planned.
Now follow the given steps:
- Using the admin area via the dashboard, visit the “Appearance” tab to access the “Theme Editor.”
- Following this, pick a WordPress theme you wish to alter from the several options in the drop-down menu.
- Now, under the “Theme Files” section, choose the “functions.php” or “Theme Functions” file.
- After opening the file, scroll to the bottom by pressing the ctrl + end keys on your keyboard. Now, you must add the following code to the functions.php file. Once done, you can “Update File” to finish the process.
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
The Ultimate Varvy Method
Another straightforward method is Patrick Sexton’s Varvy method to eliminate scripts that obstruct website rendering using the deferred approach. This method accumulates every script into one external file to simplify the process. And their execution takes place after the page loads completely.
Hence, rather than using separate defer attributes across your HTML, you can add a single script that directs to the external file comprising the defer attribute.
<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;
</<strong>script</strong>>Don’t forget to change the “defer.js” to the JavaScript file’s path or name that you wish to defer. This defer script works well with various scripts using async attributes. Thus, you can have two script sets, the first for executing scripts after loading the page and the other for specific core functionalities.
Conclusion
You now successfully understand how to defer parsing JavaScript. Deferring JavaScript for your WordPress is essential to enhance its performance. After completing this process, you must consider testing your website to ensure no scripts break the above-the-fold content.
Ensure running your site through testing tools to determine the performance metrics and website speed boost. What more can enhance your website’s performance is the WordPress themes for your website. Moreover if you are a developer and require themes for creating website then you can also go for the WordPress theme bundle.
