Performance: Inline CSS into the head

[oliverjam]

You only have ~6kb of CSS (which will be even smaller after minifying), so it is probably worth inlining this into the head of the HTML file. That way you don’t have the browser stalling page render whilst it waits for the CSS file to come from the server.

There is probably a way to automate this so you don’t have to manually.

You should also minify the SCSS output, which will make the CSS way smaller (and strip out the comments). I think you can use --output-style compressed for this.

The advantage of all this is that if you have an index.html with no blocking external resources that’s under 14kb it should load in the first TCP packet, without having to make any more trips to the server. More here:

https://webmasters.stackexchange.com/a/89545