When trying to improve the PageSpeed Insights score on a website, one of the most common items you will need to do is ‘Eliminate render-blocking resources’
However, neither of these methods are enough to gain a good PageSpeed Score, which is important for SEO.
This quick guide will show you how to Eliminate render blocking resources, improving your PageSpeed grade by a significant margin as a result.
- How to Eliminate render-blocking resources explained
- Things To Consider
- Is This Good Practice
How to Eliminate render-blocking resources explained
To do this, add an inline style block just before the closing head tag and insert your compiled CSS within:
That's it. This will successfully Eliminate render-blocking resources and remove the warning from PageSpeed Insights. You can leave it here or read on for more details on how we go about implementing this on a technical level.
To demonstrate the impact this has, we performed it on one of our client sites, vuelify.com.
Firstly, here is the PageSpeed Insights results from before the change:
It already has a decent score because we Serve Static Assets With An Efficient Cache Policy and Enabled Compression on the server
Here are the results after deploying the change and running the site through PageSpeed Insights again:
As you can see, we no longer have the warning to Eliminate render blocking resources in above-the-fold content.
Things To Consider
The change is simple and the results are immediate but it will present two issues that require some thought before proceeding:
1) Development Impact
We use Larvel Elixer to build our .scss and .js modules as it is a nice wrapper around gulp that allows us to easily inject the CSS and JS into the head by configuring the tasks and running the gulp command.
Hopefully, you have already split everything into modules that are compiled into a single minified JS or CSS file. This will allow you to change the location that they are compiled to from a file to a partial or include that is injected into the head tag.
For reference here is what our Elixir task looks like:
styles.htm is a partial that is then included in the head:
Wordpress sites can benefit from the Autopmise plugin, which does this automatically without any technical work.
If you have individual CSS or JS files that everything is dumped into, pasting the contents into the head tag will work for now but you need to find a way to automate the process to save time and effort in the future.
2) Impact on users
The second consideration is that user experience may decrease slightly.
As the code is inlined, it cannot be cached and has to be downloaded by the user's browser each time they load a new page.
This was an intense source of internal debate for us as higher search rankings are only useful if users receive a pleasant experience when they land on your site. If pages don’t load in three seconds, users will leave, which will increase your bounce rate and cause more damage than anything a good PageSpeed score can offset.
To settle the argument, we carried out vigorous testing with GTMetrix and WebPageTest before and after inlining the JS and CSS. We found milliseconds of difference in load time from applying this change, which gives us the confidence to inline the assets without worrying about damaging our client's high search rankings.
You have to decide which is more important, Eliminating render blocking resources to boost PageSpeed score or providing a top of the line user experience.
Is This Good Practice?
Most technical guides say that Eliminating render-blocking resources is not important and instead you should focus on serving static assets from a CDN close to the user. Web Performance purists will disagree with this tutorial but the PageSpeed scores don’t lie and with that comes better search rankings.
The results of our tests showed that more data has to be downloaded on each request than loading assets in external files. This isn’t an issue for users on WiFi but if you have a lot of mobile traffic on a 4G connection, the site may consume more of their data than it should, depending on the size of your CSS.
Eventually, this could become an issue for SEO as Chrome dev tools now show the amount of unused code in each request. This suggests Google may be planning to penalize sites that serve bloated responses in the future.
While it isn’t a problem, for now, there is no guarantee it will stay this way forever. SEO is not a set and forget task because the web changes and Google are constantly editing their recommendations for best practice in response. It is not uncommon for them to penalize something that they previously encouraged, leaving website administrators scrambling to roll out a fix.
This guide explains at a high level how to remove render blocking resources in above-the-fold content, without going into platform specific approaches.
PageSpeed is Important and inlining is a very effective method for improving your score but it comes with side effects. The answer is simple but it’s worth explaining the process and impact it will have on other parts of your application. Hopefully this post offered balanced views from both sides of the discussion so you can arrive at a suitable choice yourself.
If you are interested in Technical SEO, sign up for PageSpeedPlus.com to run Pagespeed Insights scans in bulk across all pages of your website. This will help you find out how many need to Eliminate render-blocking resources to achieve good PageSpeed scores. The best part is scans can be automated so you can set them to run without having to manually trigger things yourself.