Hacker News Reader

Comment by exit | Hacker News Reader

does it make sense to inline css if it's the same across multiple pages?

This would depend on your goals. If first load speed is paramount, for example the landing page for Firefox or on google.com, then go with the inline. If you anticipate (or, ahem, have measured) multi-page interactions from your users and can deal with a mild hit on the first page, minify+combine+gzip one CSS file.

I'm very much in group #2... everywhere except my landing pages.

Should do, since it's one less connection/round trip back to the server to get more data.

Shouldn't it be cached, though? You can't cache if it's in-line. (I'm not a web expert)

Not if it's the first time that they've visited your site, and in the case that Mozilla are optimising for (a single landing page for people on IE who might want to switch to FF) the first impression counts. Apparently by quite a lot if 15% is anything to go by :)

The short answer is no. Even an extremely intense, CSS heavy page might have say 16 kilobytes of CSS. After gzipping, that should turn into about 3 kilobytes. 3 kilobytes, inline with the rest of your content, is utterly negligible and caching that would probably classify as a micro-optimization, even though every instinct is telling you to put it in a nice, cacheable stylesheet.

It feels dirty not to cache it, but if you look at a download waterfall and see how much time it takes to send that separate http request (while blocking the display of the page) it is well worth it.

So what you would need is a bit of logic that applies your site-wide css to your landing page html on the server side and sends that to the browser, either on demand or by statically producing a transformed html page. Does anybody know about something like that? "html css server" are not really the terms to enter into a search engine if you want specific results...

There's probably not anything like that because it's a fairly rare situation. A particular company is only going to have one page like that, it'd be easier just to make the custom css for that page.

No, you really just want to use inline CSS. Is it really worth all of the trouble just to cache 3 kilobytes of data (probably 20 milliseconds of download time)?

That is what I said, yes, except that I wanted a tool that does the inlining. But as another comment said, that tool would probably not worth the hassle, too.

I'm not totally sure what you mean by tool. Whatever framework you're using surely can include an external file, and if not, even Apache itself can handle this via SSI. It really depends what your web app looks like.

Reply on news.ycombinator.com