The warning can become a bit challenging to understand. This post explains what is it and ways to implement this on your website. Implementing it has a positive effect on your site’s web page load times. It is specifically very helpful for mobile visitors.
As told at the beginning of this post, If you’ve ever tested your web site via Google PageSpeed Insights, GTmetrix, or other page speed testing tool, you’ve probably run into the recommendation of it.
By accelerating your content’s above-the-fold load instances, your potential visitors may experience a speedier & responsive webpage.
Is defer loading JS an essential performance consideration?
when someone visits your WordPress site, your site’s server provides the webpage contents of your site in the visitor’s browser.
If a particular script isn’t essential to the core functioning of your website, you should prefer to do it. As you don’t want to buy time to block the way of loading more important elements of your site. Exactly, for this reason, page speed testing tools always recommend firmly to it.
Analyzing Your Website With Page Speed Testing Tools
To understand whether you should do it on your WordPress website, first you should analyze your website with an online page speed testing tool such as for example Pingdom, GTMetrix, Google PSI etc.
GTmetrix will provide you with a grade and in addition list out particular scripts that require to be deferred.
The common score for this suggestion in GTMetrix reaches at least 71%. Listed below are the outcomes after analyzing a web site.
With async attribute, it will not pause HTML parsing to fetch the script. It can pause the HTML parser to execute the script once it’s been fetched. It is the default behavior.
With defer attribute, visitors’ browsers will still download the scripts while parsing the HTML. However, they will wait to parse the script until following the HTML parsing has been completed.
There are primarily 3 different techniques to do it. They are given below.
To start, you will have to log in to your WordPress Dashboard and go to Plugins > Add New section.
Choice 1.1 – WP Rocket Plugin
Choice 1.2 – Autoptimize Plugin
Choice 1.4 – Speed Booster Pack
An alternative solution plugin with extra optimization techniques, such as for example query string removal, more and loading JS from Google Libraries. To begin, Activate the plugin and install it.
Next, navigate to your WordPress Dashboard, select Settings and enter Rate Booster Pack.
Note, You may download code of above from here.
Use Varvy’s Recommended Technique (Code)
Or, you can include below code snippet to child theme’s functions.php file to automatically defer loading java scripts.
Note, You may download code of above from Varvy Code
With this approach, you may wrap Varvy’s code in something similar to below snippet:
add_actions( ‘wp_footer’, ‘my_footer_scripts’ );
Finally, another approach that you’ll see is to move your JS to underneath of the webpage. Nevertheless, this method isn’t an excellent solution. It is because, despite the fact that your web page will be visible sooner in the browser, visitor’s browsers will still screen the web page as loading until all of the scripts finish. This may give the impression that the web page isn’t fully loaded.
Testing the changes
Check thoroughly your site to ensure that deferring particular scripts hasn’t broken your webpages/website. Usually, this can generally happen with jQuery. Because of this, many plugins provide the option to exclude jQuery.js files. Nevertheless, it may happen with various other scripts too. So, Run your website through the GTmetrix testing tool again to ensure that your website is deferring as many scripts as possible. As you have excluded jQuery.js, you may not get a perfect score of the website. However, your score is much better than the initial testing of the website.
Congratulations, by following above easy steps, you boosted your website’s performance for a quicker and better load time!