Hi! 🎃

I’ve just published a new post on my blog, called “Design Systems Should Be Fast by Default”. It’s a deep dive into the performance of ten popular design systems, and I did it by picking two common tasks and testing them in each one: opening a country selector with all 249 countries, and checking 100 checkboxes at once (like clicking a “select all” checkbox would).

The results were extreme in some cases! The same task took way longer in the slowest design systems as it did in the fastest. And if you’re thinking the difference in the numbers comes down to React vs the rest, you’re in for a surprise.

For each of the slow components I tested, I tracked down the cause using Chrome’s developer tools and suggested a fix. I also turned what I found into Playwright tests that fail when a component is too slow. Those are open source, so you can run them against your own design system quite easily, including setting them up to run on every pull request. Or you can just use the tests to measure the same design systems yourself, to see if your numbers match mine!

The full post is on my blog: Design Systems Should Fast By Default

And the tests are on GitHub:
https://github.com/denodell/design-system-performance-tests

I’ll be following this up soon with an article about profiling web components in Chrome’s developer tools, something I needed to do as a part of this testing but which didn’t fit into this article due to length.

And if you remember my last email about frontend soak testing, I’ve also published my approach as a GitHub repo, so you can add soak tests to your own web apps. If you recall, I came up with a technique to run them at super speed, so you can simulate hours of usage in minutes!
https://github.com/denodell/playwright-soak-test

There’s news on my book, too. Everything up to chapter 8 of Fast by Default: Practical Performance Engineering is now available in Manning’s Early Access Program, so you can read the chapters as I finish them. There’s a decent sale going on right now over Halloween at Manning, and we’re planning on dropping another three chapters very soon, which will cover finding performance problems during development, reviewing code for performance, and testing for performance by simulating real-world conditions!

That’s all for now! Thanks for reading, and enjoy the spooky season.
Den 🕸️