How To Defer Parsing of JavaScript In WordPress
Introduce
There are many reasons for you to implement Defer Parsing of JavaScript for your Web site. However, the most important reason is to improve Website speed. Usually the JavaScript code will be placed in the <head> </head> tag. When the Website is downloaded, the code will also be read from top to bottom. So if you have a lot of JavaScript or a lot of code here, it will take a long time to load the content on the page (because it has to load all the JavaScript code first). Therefore, Website acceleration will be done when Defer Parsing of JavaScript, because at this time the site will be loaded without waiting for the JS code to complete. This tutorial will show you 2 ways to defer the parsing of JavaScript in WordPress.
What do you need
Before you start you need to prepare:
- Authorization to access the WordPress admin page
- Accessible FTP/cPanel
Step 1 — Website Analysis
To see if you need to do this for your WordPress site, you can use the GTMetrix tool.
The ideal GPA on GTMetrix should be at least 71%. Here are the results from testing a WordPress website:
Step 2 — Defer Parsing of JavaScript in WordPress
There are many options for you to perform defer parsing of JS on your WordPress site.
IMPORTANT! Make sure to back up your website before proceeding.
Option 1 – Deferring parsing of JavaScript using WordPress plugins
One of the easiest ways to defer JS parsing in WordPress is by using the WP Deferred JavaScript plugin.
Another plugin that can help you defer parsing of JavaScript is the Speed Booster Pack, which also provides some features to optimize WordPress.
After installing the Speed Booster Pack you will need to go to the Settings plugin.
Check the box Defer parsing of javascript files and click Save Changes
If you don't know how to install the WordPress Plugin, you can refer to detailed information here.
Option 2 – Deferring parsing of JavaScript via functions.php
To defer parsing of JS, this code needs to be pasted at the end of the wp-includes/functions.php file:
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
Step 3 — Check for changes
Use the same tool to test website speed. Here is the performance result after deferring JavaScript parsing:
Congratulations, by following these steps, you have accelerated your website's performance faster and for a better user experience!
Conclusion
In this short tutorial, we show you how to speed up and increase the performance of your WordPress website by deferring the parsing of JavaScript. Remember, the faster and smoother your website, the more visits and happy visitors you get!
Related tutorials:
