If you have wrecked your brain trying to get those perfect Google PageSpeed insight scores, then you understand that it is not an easy feat.
This is a techy subject, but, I will try to remove the fluff and make it as easy as possible for anyone to follow along.
However, before we get to the meat of the article, it is crucial that you understand what exactly we are doing, that is why it is helpful to understand the terms.
If you do not care about that the techy terms, just skip to the good stuff.
Want a techy definition then check out this Wikipedia article.
Now that you know what your website is built with, you can easily understand what render-blocking is.
When you or your user opens a website, your browser establishes a connection with the server hosting the website, the server responds by sending the browser the data that requested.
The returned data includes the CSS script that tells the browser how to position the different content on the browser; the browser will know where to place the banner, the text, image and everything else based on the instructions in the CSS script returned.
When you open a web page, and there is a bit of lag, or when you see content displayed one by one, this is usually what is happening in the background.
Google expects content to load or render fast, but if the scripts are being called first, the content is not displayed until the browser completes interpreting them –that is where the term Render-blocking comes from.
That is a plain way to help one understand the jargon.
We do all this to improve on our user experience by creating websites and webpages that load very fast.
So next, let’s see:
There are several ways to do this; one can defer the loading of these scripts – these scripts are called after the above-the-fold content loads.
I promised to make this simple, so, we shall use a WordPress plugin to do all the dirty work for us.
Explore it and see how it can help improve on your website performance.
As usual, install and activate the plugin.
Once it is activated, on your menu go to Performance, then click Minify.
Scroll down the page until you see JS – the JS Minify settings should be enabled.
Under Operations in areas, click the drop-down icon under embed type of the before head and after body tags.
Change it from Default (Blocking) to Non-blocking using “defer.” What we are doing is instructing the browser to defer loading of the scripts before and after the content in the head and body section of the website are loaded.
Click Save all settings after that.
Now, we move on to the CSS.
Next, scroll down and find CSS.
Enable the CSS minify settings, select Eliminate render-blocking CSS by moving it to HTTP body – unfortunately, this is only available for the premium users. (If you prefer not to spend on this, I will share with you alternative plugins that you can try).
Then click Save all settings.
As I mentioned earlier, you can do a lot more with W3 Total Cache for Search engine optimization and improving the performance of your website.
W3 Total Cache helps you do that easily in your WordPress website.
Very competent substitutes I have used and recommend are;
Before we end, it is important to remind you that, there are chances that moving around code will break your website, before you install or do anything with such plugins ensure that you have a backup of your website.
Finally, do not be so hangup on getting the perfect 100/100 scores, yes it is important to get the best scores on the Google PageSpeed Insights, but, you are not building your website for Google bots, you are creating it for your user – strive for an optimal performance that does not compromise on the functionality of your website.
You may also want to setup CloudFlare CDN in WordPress to speed up your WordPress website.