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.
So let’s find out what does it really means?
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 top towards bottom of the webpage. That means what comes first rendered first and so on.
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 load 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 the SiteSpeed?
Wondering, why is that?
Because when the web browser comes across a script, it executes the script first before continue to load HTML that includes the content users are looking for.
Why not defer this heavier task of JS execution so that critical rendering path remain 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 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) gives priority to execute the script over parsing rest of the 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, a good web hosting is a must for better pagespeed?
If you are already using a good web hosting?
Not sure? whether your hosting is as good as your website deserves, don’t worry. We recommend SiteGround Hosting and Kinsta Hosting for better sitespeed.
Read our SiteGround Review and Kinsta Review.
Do you know, a good web hosting is a must for better pagespeed?
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 back-up before making any changes in the code. If something went wrong, you can use that back-up 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 the plugin lovers.
- Using the Script mentioned above (without plugin method) – suitable for geeks who don’t want to use a plugin.
- Adding a Code Snippet to function.php file – suitable for those who are used to playing with code and editing files in WordPress.
- Speed Booster Pack
- W3 Total Cache
In WordPress, the code mentioned above can be placed in HTML file just before the
</body> tag using hook content option.
Most of the popular WordPress themes come with hook content provision. If you are not using hook content option or it is not available in your theme. Then, either you can use a WordPress plugin to add the script in 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.
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.
Take a complete backup before making any changes to 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 files 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 to be pasted in functions.php file.
Wrapping it up
The ‘defer’ attribute delays JS execution until HTML parsing has completed. However, with ‘async’ HTML parsing & script execution happens simultaneously and the script executes as soon as it’s ready.