I understand that for normal websites you'd want to share scripts and css and therefore liking to them means that each page shares them from the cache. But this question is not about "normal multipage websites", it's about WebApps. Pages where only one page is ever served. Examples include gmail, new google maps, facebook, etc...

We use less etc to compile CSS, possibly from multiple files, and we use various JavaScript minifiers to concat/compress our JavaScript into one file, why don't we just take it one step further and compile put everything directly into the HTML file?

At least for single page web apps (think gmail, google maps, facebook), that seems like it would be the best. A single request gets you everything.

What am I missing? It seems like whatever arguments applied for concatenating the CSS and the JavaScript should apply equally to the entire bundle CSS+JavaScript+HTML

  • The difference is that answer is for general webpages in which case it makes sense. In my question I'm specifically talking about WebApps. Pages for which there is a single page. GMail is a good example of a single page app. So is the new Google Maps. The URL might change but there's actually only one html page so there no caching benefit. – gman May 21 '14 at 15:58
  • I think people are misunderstanding the point that you imagine a webapp where the "main page" is completely static. In that case yes, you can get away with inlining everything. – Michael Borgwardt May 22 '14 at 7:15

Even in a context of a single page application, the idea of caching holds.

Consider that you may be using JavaScript libraries that are publicly available (jQuery, for instance). It's likely other people's webapps (single page or multiple) also use it. If you use the same public URI, we may be able to cache that.

But wait, maybe you have the jQuery version stashed on your own servers, to off-load others, or because you can serve a better connection, or whatever. Now you can inline, right? Yes, provided that you have no other webapps that also use that library, or that it is highly unlikely for users to use more than one of those webapps.

Things that you write specifically for that single page of yours, that have no relevance to other pages or applications, yes, you can safely inline. For the rest, I'd say: think broader than the page.

There are trade-offs to the approach you suggest. It's not inherently bad, and there are clear upsides (fewer HTTP requests), and there are downsides (caching issues). I'd call it optimisation; if you have good, verifiable evidence that inlining will resolve an issue, then that's a good reason to do it.

You may find the comments on the accepted answer for "Why not embed styles/scripts in HTML instead of linking?" relevant, especially:

If you are doing a single page app style site then where the vast majority of the code was specific to one page then it might make some sense still?

If the page is visited only once, yes. If visited multiple times, all the embedded stuff gets transmitted multiple times instead of just once and cached.

Do not forget the effects of a CDN or local caching at the isp. My request for the javascript for google likely never reaches google even if I have a cache miss locally because another person who uses the same isp will have already caused the isp to cache the data.

There is also the potential issue of parsing, though that's more a caveat than a breaking issue.

| improve this answer | |
  • 1
    That makes no sense. The browser caches the entire thing. If you go to the page 2 minutes later nothing will be downloaded whatsoever. – gman May 22 '14 at 4:49
  • @gman Well, maybe a bad example from my end. I changed the answer to provide another perspective. – JvR May 22 '14 at 13:06
  • If everything can fit in one file which is completely static I would think there are some advantages to having a single "does everything" file that can be used directly, as opposed to requiring that a bunch of files be bundled together, delivered, and suitably unpacked before use. – supercat Feb 13 '16 at 3:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.