Let us take a closer look at the Defer Parsing of JavaScript in WordPress. At Bobcares, our WordPress Support Services can give you a detailed overview of the process.

Defer Parsing of JavaScript in WordPress

When someone visits the WordPress site, the server sends the HTML content of the site to the visitor’s browser. The browser of the visitor then begins at the top and works its way through the code to render the site. If it finds any JavaScript while traveling from top to bottom, it will stop displaying the remaining of page until it can retrieve and parse the file. It will do this for each script it detects, which can slow down the page loading speed.

How to do it in WordPress?

There are three basic methods we can use:

• Plugin – There are some great free and premium WordPress plugins.
• Varvy method – We edit the site’s code directly and use the code snippet from Varvy.
• Functions.php file – We can add a code snippet to the child theme’s functions.php file to automatically defer scripts.

Using the free Async plugin

It provides a simple method for delaying the parsing using either async or defer. To begin, we may install and activate the free WordPress.org plugin. Then, navigate to Async and then to JavaScript Settings to set up the plugin. We may enable the plugin’s functionality and pick between async and defer at the top.

We may also select how to control jQuery further down. Because many themes and plugins rely heavily on jQuery, deferring processing the jQuery scripts may affect some of the site’s features. The safest option is to omit jQuery, however postponing it can be tried. Just make sure to properly test the site.

We may also explicitly add or omit particular scripts from being delayed further down, including a handy user-friendly functionality that allows us to target specific themes or plugins that are running on the site:

Async JavaScript include/exclude rules

Using the WP Rocket plugin

WP Rocket, among other speed optimization methods, can assist us in delaying the processing in the File Optimization tab of the WP Rocket dashboard. In the Files section, look for the Load JavaScript delayed option.

Like the Async plugin, WP Rocket also lets us exclude jQuery to avoid issues with the site’s content.

Using Varvy’s code

We may use this strategy by modifying the code snippet provided by Varvy and then adding the script to the theme just before the closing element. Varvy’s code is as follows:

<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;
</script>

Replace “defer.js” with the actual file name/path of the file to be deferred. Then, using the wp footer hook, we can add the code to the child theme’s functions.php file.

Using this method, we would encapsulate Varvy’s code in the following:

/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

Using functions.php file

Finally, without the need for a plugin, we can add the defer property to the files by adding the below code to the functions.php file:

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 );

This code basically instructs WordPress to apply the defer property to all of the scripts except jQuery. It’s quick and simple, but it lacks the granular control that something like the Async JavaScript plugin provides.

[Looking for a solution to another query? We’re available 24/7.]

Conclusion

To sum up we have now learned about the Defer Parsing of JavaScript in WordPress. With the help of our WordPress Support team, we have now learned more about the process.