Page Speed is one of the most important aspects of your website. No matter how much your website has to offer, nobody likes to wait for minutes before your website loads. Simultaneously, if your website loads faster, it is more likely to retain visitors.
Besides, Page Speed also accounts for your website's rank in Search Engines. It helps the crawlers understand how effective and maintained your website is. In this tutorial, we will see How to Defer Parsing of JavaScript in WordPress.
Why Defer Parsing Of JavaScript is Important?
To completely grasp the concept of Defer Parsing of JavaScript, you will need to understand how a browser renders a web page. When your browser requests a page, your web server sends it back, which is downloaded in the form of an HTML document.
The HTML document contains several elements and resources which the browser reads elements while the additional resources are downloaded. And finally, the page is rendered only when all of the resources are downloaded.
Create Amazing Websites
With the best free page builder Elementor
Start NowResources that are larger in size take much more time to be downloaded. Images account for most of these resources, which is why it is important to optimise your images. Besides, you can defer the download of unnecessary scripts by identifying them and speed up your webpage.
How To Identify Which Scripts To Defer?
For a minimal website that doesn't use much JavaScript, there might be no scripts vital to load the page. On the contrary, it is important for a rather complex website to have a detailed analysis of all the scripts to understand which ones are essential for the loading of the page.
The first method of eliminating unnecessary scripts is by removing the scripts one by one and simultaneously checking any errors in the JavaScript console. At the same time, this method requires considerable effort and knowledge about JavaScript.
The other method is to use the speed test tool to assess which scripts are essential for the page load. One of these tools includes GTmetrix, where all you have to is enter your website's URL, showing the results. In the Page Speed tab, you will find Defer Parsing For JavaScript section, which will show the list of unnecessary scripts loaded during the rendering of your page upon expanding.
Using the information, you can remove the scripts that do not account for the rendering of your page.
Defer or Async Attributes
There are two ways to eliminate the downloading of scripts when pages are rendered.
First, by adding the Defer attribute to the script tag, you can ensure that the browser doesn't download resources unless parsing of the page is done. Once the rendering and parsing of the page have completed, the browser can download all of the deferred scripts. Given below is a sample script tag that shows how to add defer attribute to an HTML page.
<script src="path/to/script" defer></script>On the other hand, you can add an async attribute to the script tag. This will guide the browser to load the script separately. This means the browser will start downloading the resources when it encounters the code while separately parsing the HTML simultaneously. Below given sample script shows how to add an async attribute.
<script src="path/to/script" async></script>Both of these attributes differ in their way of downloading resources. For a minimal website, it isn't easy to notice differences between async and defer attributes. At the same time, for a more complex web application, it is recommended to use the defer technique.
Defer Parsing of JavaScript
Here are the two methods that you can use for Defer Parsing of JavaScript.
1. Customize the functions.php File
If you accustomed to WordPress development, you must know that it is not a good idea to dd scripts directly the HTML markup. But you can use Built-In WordPress Functions to request resources.
To add an async or defer attribute to your scripts, you should add the following function to your WordPress theme's functions.php file.
add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
# List scripts to add attributes to
$scripts_to_defer = array('script_a', 'script_b');
$scripts_to_async = array('script_c', 'script_d');
# add the defer tags to scripts_to_defer array
foreach($scripts_to_defer as $current_script){
if(true == strpos($tag, $current_script))
return str_replace(' src', ' defer="defer" src', $tag);
}
# add the async tags to scripts_to_async array
foreach($scripts_to_async as $current_script){
if(true == strpos($tag, $current_script))
return str_replace(' src', ' async="async" src', $tag);
}
return $tag;
}Make sure to enqueue each script before you add the defer and async attributes to the script tags.
add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js');
wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js');
wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js');
wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js');
}2. Plugins for Defer Parsing of JavaScript
Understandably, not everybody has considerable knowledge and skill to follow the method above. Hence, for beginners, some plugins can be used for Defer Parsing of JavaScript.
Async JavaScript
Async JavaScript is a free to use WordPress plugin that you can install on your WordPress to perform the task.
Once you have installed and activated the plugin, go over to the plugin settings and check the Enable Async JavaScript option.
Scroll down to select between async or defer method.
Scroll down for more advanced options where you can separately add or remove scripts to async and defer. Besides, you can eliminate plugins and themes from the changes this plugin is going to make.
Autoptimize
Autoptimize is another plugin that allows you the Defer Parsing of JavaScripts.
After installing and activating the plugin, check the Optimize JavaScript Code option on the settings page. This will defer all the unnecessary scripts and move them to the footer.
You can also add the scripts for async attribute in the Extra tab.
Either you can edit the functions.php file or use plugins such as Autoptimize and Async JavaScript. These are the two reliable methods to add the async and defer attribute to script tags.
We hope these techniques will help you speed up your website. Feel free to join us on our Facebook and Twitter to stay updated about our posts.
