Should I inline all CSS and JS for a static SPA?

Question

I am creating a Single Page Application that consists of only static HTML, JS and CSS. I need to support IE9+, modern desktop browsers and iOS 6+.

The web is built using grunt, and I'm considering inlining all JS and CSS the HTML file, which would simplify handling a little bit.

As there is no server-generated content, and the .html page is cached as well, do you see any pitfalls or drawbacks when inlining all JS and CSS? As far as I understand it could even increase performance, as there are fewer roundtrips for the browser, but maybe there are some good reasons to not inline those (quite huge) files?

Do you have any experiences with this?

[Edit] It seems to be quite unclear. I do not want to manually put all JS and CSS I am working with in the resulting HTML file. I have a clean project structure, and think about letting grunt generate an inlined version as release output. I won't work with the inlined version, neither for developing nor for debugging. My question is only about the technical part: Will there be any negative influence on the browser (except for caching, the whole html is cached, and I can live with invalidating it as a whole)? Why is inlining as a result of an automated build process still considered bad practice (except for the caching topic)?

Answer 1

This is actually a really good question.

The only major drawback I can see is caching.

You can't cache your CSS or JavaScript neatly, and you have to somehow invalidate the cache on all of your page (including JS and CSS) on every change to any of them.

I might even take it one step further and inline all your images using Data URIs, the reasoning being that extra HTTP requests are more expensive than loading an additional ~33% of data, thanks to how TCP works (It starts slowly, then exponentially increases download speed until packets begin to get lost), an extra few KBs at the top speed might just be better than a bunch of new requests.

Answer 2

Yes. It is actually recommended by Google if the CSS resources are small. (note: this only applies to CSS)

Modern browsers block on external CSS before painting content to the screen. This incurs additional network latency and increases the time it takes to display content to the screen. To optimize the time to render, if the external CSS resources are small, you can insert those directly into the HTML document. Inlining small CSS in this way allows the browser to proceed with rendering the page.

https://developers.google.com/speed/docs/insights/InlineCSS

Obviously, you would keep these resources separate during development and use some build tool like gulp/grunt.