CSS Is 2.4x Slower Than Inline Styles (Oh No...)

I hate to share this with you all. But if I have to have this cursed knowledge, so do you. Inline styles being faster than CSS is not too surprising. The speed difference, however, is a bit insane.

SOURCE

S/O Ph4se0n3 for the awesome edit 🙏

[allinvanguard]

Daily reminder that while interesting, this will not affect 99.9% of the applications we write. If CSS speed is a concern to you, you are likely to have people dedicated to dealing with these small differences. Don't go and rewrite your app. Just don't.

[deluksic]

6:40 DO NOT make bar charts with non-zero baseline! 😡

[fredbluntstoned]

TLDR on the DX front. If your bosses worry about the speed of CSS vs inline styles, you need different bosses.

[Atmos]

You can't use this video to sell Tailwind though. Tailwind is a CSS file. It's the worst case performer here, as it shares the same problems (render blocking, longer parsing, etc).

Also he did say that he was using some form of atomic CSS in his tests. The fight isn't "normal CSS vs Tailwind", it's "CSS file vs inline CSS".

[lukasmolcic]

before watching the whole thing, just a quick initial thought, inlining css will be faster for that one page load, cause its one jump less to the server before the page can visually render, but having the styles in separate files means they will be cached locally for all other pages, which in my opinion is a much better win

[TheMoonWatcher]

My guess here would be that inline styles are simpler to apply, since you don't have to do the parsing of selectors and applying the styles to all things that match. So it is faster to apply the inline style to the current element.
I think the reason why people moved away from inline styles was more for maintainability and less for performance(but I could be wrong).

[fronix]

Making a problem out of something that isn't a problem, this is the way.

[TheThirdWorldCitizen]

Was there a challenge in “how many times can I bring up tailwind before it’s relevant to the actual video”

[dWHOHWb]

[ graph of straight line ]
[ grows exponentially ]
> pick one

[nicholasbrown]

I'm going to push back on some of this. I think we've entered into a coding era where people think oh gzip, webpack, whatever will automatically fix everything and make it performant for me

The browser still has to unpack all of this

Just because a 500kb file can be gzipped down to 30kb doesn't mean you shouldn't try to trim the original as much as you can

:(

[KnightYoshi]

8:30 the hash shouldn't change just because it was rebuilt. The hash should be derived based on the file contents. That way it will only change when that file changes

[jeremyholman]

@16.41 If you think a straight line is "grows exponentially", we've got a problem.

[chepossofare]

Inline CSS are faster only because are non-blocking, but if you have a decent CSS file (eg: above 14kB) caching comes in so you save a block, a connection and payload, so... You only have to pick the right poison. Absolutism is the bane of this job.

[szymdzum]

Nothing else will start loading until html files are loaded. Inline CSS is adding to this payload.

[yahi]

"CSS Is 2.4x Slower Than Inline Styles" the test is in a react application...

[BrankoDimitrijevic]

8:20 - I believe bundlers will generally hash the content, so if your CSS hasn’t changed, the hash will not change even if you make a new build?

[scragar]

RE: cache
I think when discussing cache an important factor is also how often you deploy. At my current company we're very focused on stability and release infrequently(every 2 months), as a result the vast majority of requests will hit the cache because of how long the same film is served.
At my previous place of work the focus was very much on rapid deployment, we did biweekly deployments(2 a week) which meant the cache was only ever useful for more than a couple of days.
Cache lifetime is always important to consider when talking about the cache, it's useful for reducing overall download to the user long term, but if the cache expires before that's likely to happen you're getting the opposite effect.

[Kazyek]

Tailwind would bench lower than all of these in rendering time and vitals; it would have been the LOWEST.
It's similar to the regular external CSS file, *except* that on top of that you also bloat your DOM with countless useless non-significant elements just for styling hierarchy purpose.
DOM should only be a structured representation of the actual data (document), and non-content nodes (div/span) only added when extraneous containers are *specifically* needed.

[JasonLeBel]

What about caching? Can't cache inline styles (unless the HTML is cached)
Inline styles should be faster, because they styles are immediate. But at the same time, your styles are repeated.

And this example is using a single page? What about an entire site?

Not sure anyone said inline styles were bad for performance (in terms of rendering). They're "bad" because of the overall payload. For a small site, it may not matter. But large sites it would.

[thekwoka]

Wouldn't this be obvious?

It doesn't have to do selector tree matching, which is really heckin hard (and was one of the first things Firefox did in Rust)