How to Defer JavaScript in WordPress

Defering JavaScript in WordPress

Defering JavaScript in WordPress is crucial for optimizing website performance and improving loading times. By deferring JavaScript, you can delay the loading of non-essential scripts until after the main content has loaded, ensuring a faster initial page load.

To defer JavaScript in WordPress, you can use the following code snippet within your theme’s functions.php file:

function flashify_defer_scripts($tag, $handle, $src) {
    if ('your_script_handle' !== $handle) {
        return $tag;
    }
    return str_replace(' src', ' defer="defer" src', $tag);
}
add_filter('script_loader_tag', 'flashify_defer_scripts', 10, 3);

This code snippet utilizes the script_loader_tag filter to modify the script tag output and add the defer attribute to the specified script handle. Make sure to replace your_script_handle with the actual handle of the JavaScript file you want to defer.

Additionally, you can also combine deferring JavaScript with asynchronous loading for further performance improvements. Here’s an example code snippet to achieve this:

function flashify_async_scripts($tag, $handle, $src) {
    if ('your_script_handle' !== $handle) {
        return $tag;
    }
    return str_replace(' src', ' async="async" src', $tag);
}
add_filter('script_loader_tag', 'flashify_async_scripts', 10, 3);

With the above code snippet, you can defer and asynchronously load JavaScript files in WordPress, further enhancing website performance.

Remember to test your website thoroughly after implementing these changes to ensure that all scripts are loading correctly and that there are no compatibility issues with other plugins or themes.

For more information on deferring JavaScript in WordPress, you can refer to this resource from Mozilla Developer Network.