Add benchmark

[oliviertassinari]

Summary

It's important that, as we iterate on the product, we are aware of the tradeoffs we are making. Performance is one of the most critical components of where initiation in this space is happening. So I believe, we want to know:

• Build time overhead
• FCP cost vs. others e.g. https://danielnagy.me/posts/Post_tsr8q6sx37pl
• Runtime update cost vs. other
• Bundle size cost https://github.com/mui/pigment-css/issues/78

Examples

• https://danielnagy.me/posts/Post_tsr8q6sx37pl. Inline style are more performant for initial load time. Not too far behind inline of critical CSS. So not that bad.
• Inline style https://github.com/ivanbanov/inline-style-benchmark
• https://stitches.dev/docs/benchmarks
• Tailwind CSS vs. tokenami https://github.com/pawelblaszczyk5/planner-tokenami
• https://tamagui.dev/docs/intro/benchmarks.
• the preview is cool https://github.com/necolas/react-native-web/tree/master/packages/benchmarks
• https://github.com/styled-components/styled-components/tree/main/packages/benchmarks

Context

https://www.notion.so/mui-org/Benchmark-performance-of-Pigment-CSS-vs-others-ac092794aa4c415da379f6338223d3eb?pvs=4

Search keywords: -

[siriwatknp]

WIP benchmarks

System:

• https://mui-v6-system.vercel.app/
• https://mui-v6-system.vercel.app/sign-in
• https://mui-v6-system.vercel.app/sign-in-side
• https://mui-v6-system.vercel.app/sign-up
• https://mui-v6-system.vercel.app/data-grid

Pigment CSS:

• https://mui-v6-pigment-css.vercel.app/
• https://mui-v6-pigment-css.vercel.app/sign-in
• https://mui-v6-pigment-css.vercel.app/sign-in-side
• https://mui-v6-pigment-css.vercel.app/sign-up
• https://mui-v6-pigment-css.vercel.app/data-grid

[oliviertassinari]

@siriwatknp Cool, thanks for sharing.

• I fixed the URL to not be redirections, removing the leading dash.
• Is it possible to have these hosted under this repository? For example, we could have a nested Netlify config, where Netlify would only build if a sub-folder of this repository changes.
• Same question for https://pigment-css-demo.vercel.app/perf
• System has better "load page" performance. The First Contentful Paint is lower in System. It can be observed on https://www.webpagetest.org/video/compare.php?tests=240516_BiDc0N_3Z5,240516_BiDc9E_3Z6. This is coherent with https://github.com/vercel/next.js/discussions/59989#discussioncomment-9409037. We would need to inline critical CSS to match the performance of Emotion. This is not available in the Next.js App Router anymore, only in the Pages Router. A side note, there is more JavaScript loaded under Pigment CSS, but I think it's an isolation bug, we need prefetch={false} on the links to no fetch the assets of other pages.

[LorenDorez]

Will you guys be making the source code behind these benchmarks available? I would like to add similar test to our consuming apps and tweak for our internal side of things