Defer or Asynchronously Load JavaScript in WordPress Without a Plugin

As a WordPress developer, you may have encountered situations where you need to load JavaScript files on your website. However, loading JavaScript files can slow down your website’s performance, which can lead to a poor user experience. To avoid this, you can defer or asynchronously load JavaScript files in WordPress. In this article, we will discuss how to defer or asynchronously load JavaScript in WordPress without a plugin.

What is Defer or Asynchronous Loading of JavaScript?

Before we dive into the technical details, let’s first understand what defer or asynchronous loading of JavaScript means. When you load a JavaScript file on your website, the browser stops rendering the page until the JavaScript file is fully loaded and executed. This can cause a delay in the page load time, which can negatively impact your website’s performance.

Defer or asynchronous loading of JavaScript allows the browser to continue rendering the page while the JavaScript file is being loaded in the background. This can significantly improve your website’s performance and user experience.

How to Defer or Asynchronously Load JavaScript in WordPress?

Now that we understand the benefits of defer or asynchronous loading of JavaScript, let’s discuss how to implement it in WordPress. There are two ways to defer or asynchronously load JavaScript in WordPress: using the built-in WordPress functions or by manually adding the code to your theme’s functions.php file.

Method 1: Using the Built-in WordPress Functions

WordPress provides two built-in functions that allow you to defer or asynchronously load JavaScript files: wp_enqueue_script() and wp_register_script(). These functions are used to register and enqueue JavaScript files in WordPress.

To defer or asynchronously load a JavaScript file using these functions, you need to add the ‘defer’ or ‘async’ attribute to the script tag. Here’s an example:

function my_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), '1.0.0', true );
    wp_script_add_data( 'my-script', 'async', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

In the above example, we are registering and enqueuing a JavaScript file called ‘my-script.js’. We are also adding the ‘async’ attribute to the script tag using the wp_script_add_data() function.

Method 2: Manually Adding the Code to Your Theme’s functions.php File

If you prefer to manually add the code to your theme’s functions.php file, you can use the following code:

function defer_parsing_of_js ( $url ) {
    if ( strpos( $url, 'my-script.js' ) !== false ) {
        return "$url' defer='defer";
    }
    return $url;
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

In the above code, we are using the clean_url filter to add the ‘defer’ attribute to the script tag. We are also checking if the URL contains the name of the JavaScript file we want to defer.

Conclusion

Defer or asynchronous loading of JavaScript can significantly improve your website’s performance and user experience. In this article, we discussed two ways to defer or asynchronously load JavaScript in WordPress: using the built-in WordPress functions or by manually adding the code to your theme’s functions.php file. By implementing these techniques, you can ensure that your website loads quickly and provides a seamless user experience.