Hacker News Reader

Comment by patio11 | Hacker News Reader

This worked about as well for me as it did for Firefox, when I implemented it a few years ago, after reading the YSlow presentations. I've said it three times on HN but I'll say it a fourth: watch one of the YSlow presentations, get their checklist, go down and tick off items on it. It is the easiest money you'll make in your life. Look at the improvements here: combining uncombined JS files and inlining CSS. These are tweaks that you can have coded, tested, and live in ten minutes or less.

As an aside: It is a little disturbing to me that I'm ahead of Mozilla on the Internet technology adoption curve.

View on HN

Inspired by this comment, I just spent 8 hours re-optimizing one of my sites. I managed to cut loading time in half. We'll see if that has any effect on sales...

does it make sense to inline css if it's the same across multiple 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.

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.

Reply on news.ycombinator.com