How To Eliminate render-blocking resources

Posted on Aug 10, 2018

Share

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

Following all the good practices you were taught about web development means that you probably have your Javascript and CSS in separate files, with a link to them in the footer of your site.

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.

Contents

How to Eliminate render-blocking resources explained

The answer is really quite simple. All you have to do is inline the JavaScript and CSS

To do this, add an inline style block just before the closing head tag and insert your compiled CSS within:

inlined-styles-1.png

Do the same for JS but add it to the footer just before the closing body tag (as JavaScript is not needed for the initial page render):

inlined-js-1.png

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.

Effect

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:

eliminate-render-blocking-resources.jpg

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:

after.jpg

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

The first point you will notice is that some edits are required to your workflow when writing JavaScript and CSS. Rather than including external JS and CSS files in the header or footer of your site, you must inject the code into the head tag. Therefore, you need to work out a process for automating this so you don’t have to makes changes and manually paste them into the head tag every time.

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:

elixir-task.png

styles.htm is a partial that is then included in the head:

inlined-styles.png

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.

Web Performance tactics previously centred around the idea that you should minimize the size of responses but with high speed internet now commonplace and HTTP2 widespread, developers can afford to break from tradition with techniques like this to Eliminate render-blocking JavaScript and CSS.

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.

code-coverage.png

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.

Conclusion

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.

Try PageSpeedPlus Now