How To Eliminate render-blocking JavaScript and CSS


Download PDF

Share


When trying to improve the PageSpeed of your website, one of the most common items you will need to do is ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content

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.

You may even have them on a CDN for so they are served from a data centre closest to the user or route all of your traffic through CloudFlare.

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 CSS and JavaScript, improving your PageSpeed grade by a significant margin as a result.

Testing your site performance?

Try PageSpeed Plus. Like PageSpeed, but better

Contents

How to Eliminate render-blocking JavaScript and CSS 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

Effect

To demonstrate the impact this has, we performed it on one of our client sites, vuelify.com.

Firstly, here are the grades from before the change:

vuelify-before-inlining.png

It already has a decent score because we Leveraged Browser Caching and Enabled Caching on the server

Here are the results after deploying the change and running the site through PageSpeed Insights again:

eliminate-render-blocking-javascript-css.png

As you can see, inlining the CSS and JS improved the PageSpeed Insights score by a further 10 points.

Additionally, we no longer have the warning to Eliminate render blocking JavaScript and CSS 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.

As a Laravel Development Company, we use Elixir to build our .scss and .js modules as it provides a nice wrapper around Gulp. It 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 a single 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 JS and CSS to boost PageSpeed score or providing a top of the line user experience.

PageSpeed Problems? Let us solve them. Talk to the pro's and speed up your site.

Contact

Is This Good Practice?

Web Performance purists will disagree but the PageSpeed scores don’t lie and with that comes better search rankings.

Most technical guides will say that Eliminating render-blocking CSS and Javascript is not important and instead you should focus on serving static assets from a CDN close to the user.

However, not every domain has a global audience that requires a CDN from which they can pull down assets quickly. If your user base is predominantly located within a reasonable distance to your server, then you will be just fine, even without a CDN.

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 gaining widespread adoption, 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 59 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 quick guide explains at a high level how to remove render blocking JavaScript and CSS 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 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. If you found another way to Eliminate render-blocking JavaScript and CSS, let us know in the comments below.

As masters of Web Performance here at Leader Internet, PageSpeed is of the utmost importance and all of our domains score 90 or above on mobile or desktop. Join our newsletter to stay up to date with tips and tricks on how we do it.

Bonus Content

Enter your email to download our Web Performance Checklist. It contains proven techniques for creating blazing fast sites with high PageSpeed scores.

Posted in Web Performance on Aug 16, 2017

Comments


Empty

Leave a Comment: