Improving site performance by shipping more CSS (github.blog)
meerita 15 hours ago
karolusrex 14 hours ago
meerita 14 hours ago
austin-cheney 13 hours ago
Performance is not complicated. You measure something and compare the numbers. Through my career I have encountered the following failures repeatedly:
* The complete inability to measure things. This is common among people with low social intelligence. Many people in this line of work cannot measure things and form all kinds of bullshit excuses. Cannot do it all as if they are disabled. Sometimes it is laziness, sometimes it’s autism masking, and sometimes it’s stupidity/ignorance where they believe they shouldn’t have to or are superior from convention alone.
* The shitty team argument. It’s common for people to intentionally avoid or discard measures because there is fear superior performance may indicate an operating deficit. The last thing anybody in software wants is to change approach if they are on a shitty team, because corporate developers are allergic to training people. This is often justified by asking what happens if you work on a team or about new hires.
* Throwing performance data away and lying about it. This is very common when performance data provides evidence that current conventions or favorite tools harm performance. If, for example querySelectors measure 100,000 times slower than some other approaches developers will pretend the performance evidence just doesn’t exist.
* Guessing. When people suck at what they do they invent their own performance realities. When people guess at software performance they are supremely wrong more than 80% of the time and tend to be wrong by multiple orders of magnitude.
catlifeonmars 13 hours ago
For example:
> performance is not complicated
Not to mention all your assumptions about the motivations of people who don’t do optimization well. That one can’t possibly generalize.
austin-cheney 12 hours ago
catlifeonmars 10 hours ago
vijaybritto 9 hours ago
Saying "Performance is not complicated" is not wrong. People and the systems set up for an application make it complicated. Its harder to check and verify.
I work in UI performance and the biggest thing slowing me down is always people
karolusrex 13 hours ago
austin-cheney 12 hours ago
mexicocitinluez 9 hours ago
lol What? It's always amusing to me when someone makes absolute claims like "the industry" when having seen < 0.1% of it.
meerita 6 hours ago
eviks 13 hours ago
Indeed, you need to waste a few years hurting user experience before investing a few years into migration and writing another "improved performance" blog post.
> that engineers should drop everything and work overtime on optimizing performance
The opposite, they should work less instead of more doing a worse job that results in scraping all their output later in a redesign
jchw 12 hours ago
maccard 12 hours ago
You’re conflating scale with bloat. At large orgs the problem is that nobody is willing to step back and say “this sucks”. Trying to get this fixed involves getting 6 teams to agree upon something with no clear owner for the outcome and with everyone incentivised for not being blamed if one of the other groups tanks the effort.
> engineers should drop everything and work overtime on optimising performance
No, we’re asking for it to be taken seriously by the organisation. I work in games, and on large projects we usually have a small team (2/3 people of a team of 80-100) who are constantly working on this stuff. Their work is “subjective” improvements but often it’s just building tooling and telling other groups what they need to fix.
Xunjin 10 hours ago
maccard 8 hours ago
Jcampuzano2 8 hours ago
If a decent portion of your audience literally cannot even play the game because its performance is too bad or it can't run on their hardware, then that immediately affects your bottom line. And at least until recently, you couldn't really push fixes for it once the game was delivered. And so I think at least a little bit of that mindfullness for performance has carried over to the modern day, though I will say that I do think that performance optimization does seem to subjectively be getting worse even in gaming.
In web dev, while it is true that it affects your bottom line, it's a little bit less obvious. And in the eyes of most management teams that's always something that can be prioritized later since you could always update it after you shipped a feature. Also, there was very much a culture of "the browser will handle it."
Not to mention, most devs are using the hardware that is many times better than their consumers.
maccard 4 hours ago
There is a small, but very vocal group that complain about 30 vs 60fps, and yet there are games that push for 120/240 on consumer hardware (valorant and overwatch both run at very high frame rates on very low specs). As I said, it’s about prioritising it. _Why_ it’s being prioritised doesn’t really matter.
> also there was very much a culture of “the browser will handle it”
That is very clearly still the culture.
> most devs are using the hardware that is many times better than their consumers.
My last work PC was a 32 core 4GHz machine with 256GB RAM, a 4090, and 16TB of NVMe SSD’s with 10GB fibre. Our target platform was 9GB RAM, and an 8 core 1.1GHz processor, yet we still managed (just about).
blfr 10 hours ago
DrBazza 12 hours ago
sourcehut's 128kb raw, and 28kb over the wire.
codeberg is 420kb raw, and 66kb over the wire.
worldsavior 9 hours ago
asutekku 9 hours ago
gdhkgdhkvff 8 hours ago
And the bigger thing here is that this is all cached after it’s downloaded the first time.
troupo 3 hours ago
Download speed isn't the only thing that matters
jonhohle 8 hours ago
troupo 3 hours ago
jenadine 12 hours ago
marginalia_nu 12 hours ago
One weird tangentially related thing is checking whether a PR is merge:able after solving a conflict in this repo[1] for some reason takes several minutes. Maybe because there are 1000 commits in the same file. Doesn't seem UI related but weird regardless.
[1] https://github.com/MarginaliaSearch/submit-site-to-marginali...
aquariusDue 8 hours ago
The emojis I had at the beginning of the list name don't render anymore (they show up as :eyesore_emoji_name: instead) and the list is sorted alphabetically now instead of by last modified. Also it's one looong list instead of a small scroll-able container like it used to be.
This is on Firefox btw. Now I'm seriously thinking about moving these GitHub "bookmarks" into a separate place like a bookmark manager even if I lose a bit of convenience.
eviks 15 hours ago
efortis 15 hours ago
If you use Vite:
css: {
modules: {
generateScopedName: mode === 'production'
? '[hash:base64:8]'
: '[name]__[local]___[hash:base64:5]',
}
}Onavo 15 hours ago
eviks 15 hours ago
robin_reala 14 hours ago
efortis 14 hours ago
53K _long.css
38K _short.css
11K _long.css.br
8.9K _short.css.br
Both, dev and prod, have hashes because that's part of what CSS Modules uses to avoid collisions.Besides download size, smaller names improve parsing speed too.
silvestrov 9 hours ago
It also makes it much more difficult to create personal browser extensions as all css names are now unreadable.
edoceo 2 hours ago
chrismorgan 7 hours ago
Rudimentary experiment on https://github.githubassets.com/assets/te.1288ac5c9584fbf2.m... on replacing /(?<module>[A-Za-z0-9_-]+)__(?<local>[A-Za-z0-9_-]+)__(?<hash>[A-Za-z0-9_]{5})\b/:
${module}__${local}__${hash} (original): 72967 raw, 10993 br.
${module}__${local}: 68459 raw, 8867 br.
${hash}: 48754 raw, 8189 br.
${local}: 52610 raw, 7927 br. (Now in practice a few of these are likely to need disambiguation, so it’s probably a tad smaller than realistic.)
Frankly I think ${local} is the right target, with global disambiguation where necessary. For typical systems, I consider the hash approach to be foolish: its value is when interacting with unknown other styles, but when you’re compiling everything you should know everything, so you can disambiguate more selectively and succinctly/compressibly, as JS build tools like Rollup do (in flattening modules with colliding names, you’ll get Foo, Foo$1, Foo$2, &c.).
efortis 7 hours ago
How?
---
Another approach is using base52 sequential names, such as `aa, ab, …`. I tried that a few years ago in Webpack, I don't remember but there was an issue, IIRC they weren't deterministic.
chrismorgan 6 hours ago
NostraDavid 7 hours ago
efortis 7 hours ago
53K _long.css
11K _long.css.br
14K _long.css.zst
38K _short.css
8.9K _short.css.br
11K _short.css.zstnotpushkin 14 hours ago
The only thing hashing classes achieves is making it difficult for users to use ad blockers and/or custom CSS. I understand why e.g. Meta does it on their sites, but for GitHub it makes no sense.
Starlevel004 9 hours ago
low_tech_punk 9 hours ago
Gualdrapo 15 hours ago
a11ce 16 hours ago
surlyville 6 hours ago
Thankfully we now have the Reynard Browser (sideload/trollstore) that uses GeckoView so supports more modern web standards.
lloydatkinson 13 hours ago
nicce 11 hours ago
c-hendricks 7 hours ago
lloydatkinson an hour ago
fgkramer 2 hours ago
wonnage 23 minutes ago
parasti 15 hours ago
varun_chopra 15 hours ago
jay37184 15 hours ago
UqWBcuFx6NV4r 15 hours ago
prymitive 14 hours ago
tosti 2 hours ago