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.
Testing your site performance?
Try PageSpeed Plus. Like PageSpeed, but better
- Things To Consider
- Is This Good Practice
- Bonus Material
The answer is really quite simple. All you have to do is:
To do this, add an inline style block just before the closing head tag and insert your compiled CSS within:
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:
Here are the results after deploying the change and running the site through PageSpeed Insights again:
As you can see, inlining the CSS and JS improved the PageSpeed Insights score by a further 10 points.
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
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:
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 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.
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.
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.
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.
PageSpeed is Important and inlining is a very effective method for improving your score but comes with side effects.
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.
Enter your email to download our Web Performance Checklist. It contains proven techniques for creating blazing fast sites with high PageSpeed scores.