Should I embed all CSS and JS for static SPA?

Question

I am creating a one-page application consisting only of 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 embedding all of JS and CSS in an HTML file, which will simplify processing a bit.

Since there is no content created by the server and the .html page is also cached, do you see any pitfalls or flaws when embedding all JS and CSS? As far as I understand, this can even improve performance, since there are fewer hits for the browser, but maybe there are good reasons not to embed these (rather huge) files?

Do you have any experience with this?

[edit] It seems this is not entirely clear. I don’t want to manually put all the JS and CSS that I work with into the resulting HTML file. I have a clean project structure, and think about letting grunt generate the inline version as a release. I will not work with the built-in version, neither for development, nor for debugging. My question concerns only the technical part: will there be any negative impact on the browser (with the exception of caching, all html is cached, and I can live with its invalidity in general)? Why is embedding as a result of the automated build process still considered bad practice (with the exception of the caching topic)?

Answer 1

This is a really good question.

The only serious drawback that I see is caching.

You cannot cache your CSS or JavaScript neatly, and you must somehow invalidate the cache on your entire page (including JS and CSS) every time you change any of them.

I would even take it one step further and include all your images using data URIs , arguing that additional HTTP requests are more expensive than downloading additional ~ 33% of the data, thanks to how TCP works (it starts slowly, and then exponentially increases the download speed until the packets start to get lost), an additional few KB at maximum speed may simply be better than a lot of new requests.

Answer 2

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

Modern browsers block external CSS before drawing content on the screen. This causes additional network latency and increases the time required to display content on the screen. To optimize the rendering time, if external CSS resources are small, you can paste them directly into an HTML document. Embedding a little CSS in this way allows the browser to render the page.

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

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

Answer 3

No, you should not introduce CSS and JavaScript in HTML. Individual resources will be cached. Think about sharing problems! How to run JavaScript through JSLint? How can you check CSS when all this is inline?

Answer 4

Leave your CSS and JS apart. If there is a change in your HTML but not your CSS, you are asking the user to download all their CSS again. If CSS is a separate file, then the browser will use the locally cached version, no additional trips to the server are required.

If you use grunt, use a task like grunt-filerev to add a hash to your CSS and JS file names after they are mined and concatenated.

Answer 5

If you embed JS and CSS in the SPA site itself, you will get code that does not support the code, as well as a problem when the browser cannot cache CSS and JS files.

If you use grunt to prepare the assembly, why don't you just create a lot of small JS and CSS files, as in regular applications, and then use grunt-contrib-concat to concatenate (possibly also minimize) them into a single file and have it like link in your HTML.

Let me know if you need some sample code.