These terms (the above terminology) might be overwhelming for you at first, especially if you’re not a tech guy.
But, don’t worry about that!
I am going to explain everything step by step in simple words. So that you can proceed at your pace and implement the methods to fix ‘Eliminate render-blocking resources’ on your website/blog.
Table of Contents
- Difference between defer or async
- Defer loading of JS & PageSpeed Insights recommendation
- Wrapping it up
When a user types your website URL in the web browser’s address bar and hit enter. The browser first establishes the connection with the server on which your website is hosted.
Once the connection is established, the browser starts rendering the components of the webpage to display the web page.
The browser renders the components serially from the top towards the bottom of the webpage. That means what comes first rendered first and so on.
Difference between defer or async
Before we talk about the difference between defer and async, let’s see how does <script> tag works.
When we use <script> tag to add script in our code, the HTML is keep parsing till the script file is reached, then onwards parsing will be paused until the script file is downloaded and executed.
Suitability: Not recommended in most cases.
When defer attribute is appended with script tag, the script file is downloaded alongside the HTML parsing but the downloaded script executes only after the completion of HTML parsing.
Suitability: For non-critical script files.
When async attributed is used with script tag, the script file downloads during HTML parsing, then HTML parsing pauses just to execute the downloaded-script file.
Suitability: For critical script files that cannot be inline.
Defer loading of JS & PageSpeed Insights recommendation
Let’s try to put this in a perspective with Google PageSpeed Insights warning and recommendation.
When you test, a website using Google Pagespeed Insights Tool, you get some warnings and recommendations to fix those warnings/errors.
The PageSpeed Insights (PSI) text for render-blocking resources says,
Eliminate render-blocking resources.
Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.
And this needs to be fixed.
As Google PageSpeed Insights (PSI) recommendation says you should deliver critical JS inline and defer all non-critical JS.
What does this mean?
Let’s break that down by terminology.
Inline Delivery: Inline delivery refers to loading a resource (in this case JS) within the HTML code instead of calling/importing that separately.
Do you know? how to
- Create and Edit WordPress htaccess file – In two Simple Steps
- Leverage Browser Caching Google Analytics
How does JS Affect SiteSpeed?
Wondering, why is that?
Because when the web browser comes across a script, it executes the script first before continuing to load HTML that includes the content users are looking for.
Why not defer this heavier task of JS execution so that the critical rendering path remains uninterrupted, right?
Pagespeed: is now a Ranking Factor
Site speed has already become a ranking signal.
About a decade ago Google announced 2 in an official blog post on Google Webmaster Central Blog that site speed has become a ranking signal.
In another blog post published on the Official Webmaster Central Blog in 2018, they revealed 3 that Google started using page speed as a ranking factor in mobile search ranking.
Since Google had declared pagespeed a factor in search result rankings for desktop and mobile. Therefore, site speed optimization has become a significant aspect of technical SEO.
User Experience: decides Your Site’s Success
Speed matters a lot, the truth is users do not like slow-loading websites. In fact, studies show that the users leave a slow loading site early and move on.
As I mentioned above, however, the parser (browser) starts downloading and executing the script over parsing the rest of HTML, whenever it encounters the script.
And by making your site load faster, you also improve your search ranking on desktop as well as mobile.
Do you know, good web hosting is a must for better pagespeed?
If you are already using good web hosting?
Not sure? whether your hosting is as good as your website deserves, don’t worry. We recommend Cloudways and Kinsta Hosting for better sitespeed.
Read our Kinsta Review.
There are several pagespeed testing tools available to analyze a website for site speed and loading time. I am sharing with you the most reliable and trusted tools for pagespeed testing.
1. PageSpeed Insights by Google
3. Pingdom Tools
Solarwinds’ Pingdom Tools are also very popular when it comes to site speed testing tools. You can test your site using Pingdom Tools to check the number of JS requests on your site and how much they contribute to the total number of requests.
</body> tag. Read the instructions given below to use this script.
Don’t forget to take a complete backup before making any changes in the code. If something went wrong, you can use that backup to go back.
- Copy the code and paste it in HTML file just before the
</body>tag (near the bottom of HTML file).
- Save changes. And you are done.
- Finally, test your website again to see the effect.
If you want to defer multiple scripts in one go. You can use the same script with little modification. In the following code replace defer1.js, defer3.js, and defer3.js, etc. with the link of scripts that you want to defer.
- Using WordPress Plugins (with a plugin) – suitable for all plugin lovers.
- Adding a Code Snippet to function.php file – suitable for those who are used to playing with code and editing files in WordPress. – without plugin method #1
- Using the Script mentioned above – suitable for geeks who don’t want to use a plugin. – without plugin method #2
Obviously, the process of installing and activating any of the following plugins remains the same.
If you’re not sure about the process of installing a WordPress plugin, you can refer this beginner’s guide to learn different methods of installing a plugin in WordPress.
This tiny plugin offers all necessary settings to tweak deferred loading of JS in WordPress.
- Navigate to WordPress Dashboard > Plugins > Add New.
- There are other options as mentioned below; You can tweak the relevant option as per your need.
- enable asyns js for logged-in user
- on cart/check out pages
- quick settings
- scripts to Async
- scripts to Defer
- script Exclusion
- plugin exclusions
- theme exclusion
WP Rocket is a power-pack of features when it comes to WordPress speed optimization.
Steps involved to enable defer loading of JS using WP Rocket plugin:
- Install and active WP Rocket plugin.
- Go to WP Dashboard > Settings > WP Rocket.
- Now test your site to check results.
DO WE USE WP-ROCKET?
You can read, how we got load time under 1s using WP Rocket.
- Head-over to WordPress Dashboard > Plugins > Add New.
- Search W3 Total Cache in the plugin repository.
- Install and activate W3 Total Cache plugin.
- Go over WP Dashboard > Performance (W3 Total Cache Settings) > Minify.
- Scroll down to JS minify settings. You will see settings like shown in the image below.
- Check/select options as shown in the image below. Click Save all settings and you are done.
- Test your site using pagespeed test to see the results.
LiteSpeed Cache is an amazing optimization plugin for LiteSpeed server hosting. But the general features of this plugin can be utilized on any server like LiteSpeed, Apache, NGINX, etc.
- Go to WP Dashboard > Plugins > Add New.
- Search Litespeed Cache in the plugin repository.
- Install and activate LiteSpeed Cache plugin.
- Navigate to WP Dashboard > LiteSpeed Cache > Page Optimization > JS Settings.
- Scroll down to Load JS Deferred And turn it ON and save changes.
- Now test your website using pagespeed tool to check the result.
Swift Performance plugin has become a well known name in the speed optimization category. Their free version is called ‘Swift Performance Lite’.
The process to delay loading of JS in WordPress using Swift Performance:
- Head-over to WP Dashboard > Plugins > Add New.
- Search Swift Performance Lite in the plugin repository.
- Install and activate Swift Performance Lite
- Navigate to WP Dashboard > Tools > Swift Performance > Settings > Optimization > Scripts.
- Enable the option called Merge Scripts. Once you enable it, other related options will appear.
- Now add the scripts to be deferred under the option called Deferred Scripts and Save changes.
- Finally, test your website using speed test tool to see the result.
Step by step procedure to enable defer loading of js in Speed Booster Pack plugin:
- Go to WordPress Dashboard > Plugins > Add New.
- Search Speed Booster Pack in the plugin repository.
- Install and activate Speed Booster Pack plugin.
- Navigate to WP Dashboard > Speed Booster > Assets.
- Save changes and you’re done.
- Now, test your site using pagespeed test tool to check the result.
Autoptimize another good plugin to optimize WordPress speed. This plugin also offers the option to defer load JS in WordPress.
- Navigate to WordPress Dashboard > Plugins > Add New.
- Search Autoptimize in WordPress plugin repository.
- Install and activate Autoptimize plugin.
- Go to Dashboard > Settings > Autoptimize > JS, CSS & HTML.
- Then enable Do not aggregate but defer option and save changes.
- Now Empty Cache and test your site using speed test tool to see the result.
As I have mentioned above this method is suitable for people who are comfortable with code editing in WordPress.
You might be thinking, but why?
First of all, functions.php is an important theme file. That means you might end up breaking your site easily if anything went wrong with the editing of functions.php file.
How to Edit functions.php File Safely
I always recommend using a child theme in WordPress in order to avoid code editing mess.
Because while editing the code, even if you miss a single comma (,) semicolon (;) or any other symbol/syntax, your website will break completely or partially. And you have to make extra efforts to recover the site.
If you’re not using a child theme, learn how to use a child theme in WordPress and its benefits.
For any reason, if you don’t want to implement a child theme now, you can use this plugin to add code to functions.php file of your theme without editing the original file.
Take a complete backup before making any changes to the code.
I assume that you’re using a child theme. If you’re not, first create and activate a child theme to any trouble because of theme file editing.
- Go to your WordPress Dashboard > Appearance > Theme Editor
- Select/open functions.php file (of child theme) from theme files.
- Paste the code snippet given below at the end of functions.php file.
- You can specify JS files to exclude from defer in the array (‘jquery.js’).
- Finally, click Update File to save changes. That’s all.
The code snippet is to be pasted in functions.php file.
</body> tag using hook content option.
Most of the popular WordPress themes come with hook content provision. If you are not using the hook content option or it is not available in your theme. Then, either you can use a WordPress plugin to add the script to WordPress footer before
</body> tag or you can place the script in the footer file just before the
</body> tag manually.
Facing any difficulty adding the script in WordPress footer? Check out our detailed guide, to learn how to add code in WordPress header and footer easily.
- Copy the code and paste that before the
</body>tag (using a plugin or built-in theme hook) .
- Save changes and you’re done.
- Clear the cache, if there is any.
- Test your website again to see the result.
Wrapping it up
- How to Remove Unused CSS Properly + WordPress Fix
- Remove Query Strings from Static Resources to Speed Up your Website
- How to Increase Page Speed using Htaccess
- Enable Keep-Alive to Speed up Your Site
- Disable Server Signature by Editing .htaccess/Apache
The ‘defer’ attribute delays JS execution until HTML parsing has been completed. However, with ‘async’ HTML parsing & script execution happens simultaneously and the script executes as soon as it’s ready. read more..