Page speed is a very important aspect for best website performance. Page speed is measured as a total number of time taken by a browser for website rendering.
Faster loading websites will always make your visitors stay for a longer time on the website. The rank on search engine results is also determined by page speed.
Therefore it is very crucial to speed up your website. Always make your page speed the top most priority.
In this blog, we will learn about defer parsing of JavaScript in WordPress plus we will learn some methods to eliminate heavily loaded items from your website to make it load faster.
For a good user experience, it is important to have a fast page speed and this measure depends on so many elements. The main focus is given to those factors which need to remove from your website for making it run faster.
Table of Contents
Reason to defer parsing of JavaScript in WordPress
The pages which are sending by the server when the request is made to the web server by your browser are downloaded in HTML Document.
And this document is full of code, text that needs different DOM elements and resources including style sheets, images, and scripts.
The large resources can get a problem to your website page speed as it takes much time to get loads. For example images and other visual content take much time to load because they come under heavy elements.
It is recommended that whenever you use images on your website first optimize it. To render your website pages properly, JavaScript will recognize the essential scripts.
Thus you can all ignore such nonessential scripts by getting it downloaded to enhance the website speed.
Which type of scripts should be suspended?
For a small scale website, there is no need of finding essential scripts for loading the pages. If your website is more complex then you should analyze all your website scripts that are essential for loading website pages.
And one of the best ways to do this script analysis is to delete all unnecessary scripts also during the page load make sure there is no technical problem or a bug in JavaScript console.
Actually this technique needs to have experienced in web technologies and JavaScript.
Another easier and simplest method to recognize the scripts which are getting problem to your website page speed is GT Matrix. GT Matrix is a WordPress tool where you just need to enter your website URL and hit ‘test your site’ button.
The result page will appear where you need to navigate mouse over PageSpeed tab and click on ‘Defer parsing of JavaScript’.
Now you will get access to some links which are not important scripts and getting problem through website rending process.
Async vs. Defer Attributes
In two different ways, you can make sure that the process of downloading the script will not get the problem to you while rendering the web pages.
First of all, you will need to add an async attribute in the tag . by doing this it will tell the browser to load the script asynchronously. one sample is given below
Another way is to add defer attribute in the script tag. By doing this it will tell the browser to not download that resource unless it is completed. One sample is given below
Different methods to parsing of JavaScript in WordPress
Modify the functions.php file
If you are a website developer or have basic experience in website development you might have noticed that it is never suggested to add scripts via HTML Markup. Whereas you need to use premade WordPress function to request for resources.
However if you are looking to add defer or async attribute on your scripts, the function is listed below that should be added to the functions.php file of your theme.
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;
}
Do not miss to add enqueue script before adding the async and defer attribute to the script tags. code is given below
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’);
}
Add plugin
Modifying the source code via functions.php might be not an ideal option for you or someone else due to a lack of coding skills. If you are a beginner and not tech guy then the best way is to make the use of a plugin to ignore parsing of JavaScript in your WordPress site.
Async JavaScript is a WordPress plugin by Frank Goossens which has more than 100,000 active installations.
This plugin is totally free for every user. You can download and install this plugin from the WordPress repository directory to execute this task.
In setting the area of this plugin, you need to enable ‘enable async JavaScript’. After this scroll down the page and you will find the ‘async JavaScript method’ section that needs to be selected if you would like to defer or async method.
You will find some more options if you scroll the page.
Another plugin that can be used for parsing of JavaScript in WordPress is AutoOptimize. This plugin is also developed by the same author.
In the setting page, you will check the ‘optimize JavaScript code’ option. By doing this all non-essential scripts will be suspended and will move to footer.
In another tab, you will get the option to list all scripts that need to be added to the async attribute.
Conclusion:
In this blog, we have added important methods for parsing JavaScript’s plus we have to learn how page speed plays an important role in getting high search engine rankings.
We have looked upon the two easiest ways to achieve our goal and plugins to optimize your website scripts.
