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?
These components are stacked one over another in the code structure of the web page.
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.
So during this time browser stop rendering rest of the web page.
This way visitors need not wait more to see the meaningful content of the website.
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.
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
That led to more loading time and a longer wait for users to see the content; bad user experience, right.
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.
On the contrary, you want your website audience to engage with your site and eventually turn into a customer, subscriber or ad-viewer.
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.
For example, in some animation, effect, or some functionality, etc.
And hence, better user experience to your readers.
And by making your site load faster, you also improve your search ranking on desktop as well as mobile.
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.
This one (GTmetrix) is another good free tool to test site speed.
2. PageSpeed Insights by Google
Google PageSpeed Insights (PSI) is an exclusive pagespeed testing tool by Google.
PageSpeed Insights Tool results give information about warnings and their solutions/fixes.
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.
ead 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.
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.
Unfortunately, not all the code snippets work fine.
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.
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.
The above-explained script method is considered more appropriate by several experts and webmasters.
But the people who use WordPress know that using a WordPress plugin is like bliss.
If you are facing any problem implementing the above methods or have a question.
Let me know via comment section.
I will be happy to answer.