Hacker News Reader

Comment by jacquesm | Hacker News Reader

There is a small penalty but it does not seem to weigh up against the advantage of having all the data in one shot even on first page view on that site. Total overhead of the CSS 'in flight' is about 6.6K, versus doing another request which would require another round-trip to the server.

Inlining the CSS was considerably faster in all my tests.

View on HN

How much of that win was only on the first time a page from your site is requested?

I'd expect in-lining the css to be a slight net loss once the data is cached - my strategy would be a `style-<md5sum>.css` with a long max-age.

I wish browsers could cache page fragments!

> I'd expect in-lining the css to be a slight net loss once the data is cached

I expected that too but it didn't work out that way. I'm not sure why, possibly a cache lookup is still slower than reading the style info out of the same page. I don't know enough about the guts of a modern browser to make the call but the numbers aren't there.

In chrome, I'm getting extremely similar times for the two approaches without caching (I am in-network, so my roundtrips are ~1ms). With the style.css fully cached, I'm getting ~15ms faster on the sideband approach than with inline styles.

Can you expose your methodology, or are you using a common tool for testing these things?

Using FF development tools. Shift-ctrl-Q, reload.

It looks like inline performs better on firefox and not on chrome - I just made a bunch of attempts both ways, and I'm seeing cached sideband as significantly better on Chrome, and only roughly equal on firefox.

I was not expecting to see such a difference between the two browsers, but I'm not familiar enough with firefox to guess what's causing it :-\

Ah! Thank you for that datapoint, I don't use Chrome but I really should have tested that too.

if you care about bytes, you could minimise the css & html also

then the ultimate, which would be whether you use web components to minimize tag lengths/define structures to compress.

Though at that point gzip is probably the better solution.

gzip should already be enabled on any modern server/browser.

Reply on news.ycombinator.com