A performance comparison of css approaches
The following table shows different speed measurments for the same demo implemented with different js and css technologies. The results are sorted by the amount of time it takes for the page to become fully interactive.
| Name | Transfer Size | First Meaningful Paint | First Contentful Paint | Time To Interactive | First Cpu Idle | Demo | Full Report |
|---|---|---|---|---|---|---|---|
| vanilla‑preact‑ssr | 📏 9.9 kb | ⏱️ 1.3 s+102% | ⏱️ 1.3 s+102% | ⏱️ 1.3 s 0% | ⏱️ 1.3 s 0% | Demo Code | |
| Plain css classes used by preact and server side rendering | |||||||
| vanilla‑preact | 📏 7.8 kb | ⏱️ 1.3 s+107% | ⏱️ 1.3 s+107% | ⏱️ 1.3 s+2% | ⏱️ 1.3 s+2% | Demo Code | |
| Plain css classes used by preact | |||||||
| vanilla | 📏 5.0 kb | ⏱️ 1.4 s+123% | ⏱️ 1.4 s+123% | ⏱️ 1.4 s+10% | ⏱️ 1.4 s+10% | Demo Code | |
| Plain old css using the mini-css-extract-plugin | |||||||
| vanilla‑style‑loader | 📏 6.0 kb | ⏱️ 0.6 s 0% | ⏱️ 0.6 s 0% | ⏱️ 1.5 s+16% | ⏱️ 1.5 s+16% | Demo Code | |
| Plain css embededed using the webpack style-loader | |||||||
| vanilla‑react‑ssr | 📏 47.2 kb | ⏱️ 1.3 s+102% | ⏱️ 1.3 s+102% | ⏱️ 1.5 s+16% | ⏱️ 1.5 s+16% | Demo Code | |
| Plain css classes used by react and server side rendering | |||||||
| vanilla‑react‑concurrency‑ssr | 📏 51.3 kb | ⏱️ 1.3 s+102% | ⏱️ 1.3 s+102% | ⏱️ 1.5 s+17% | ⏱️ 1.5 s+17% | Demo Code | |
| Plain css classes used by react suspense and server side rendering | |||||||
| vanilla‑react | 📏 45.1 kb | ⏱️ 1.6 s+149% | ⏱️ 1.6 s+149% | ⏱️ 1.6 s+22% | ⏱️ 1.6 s+22% | Demo Code | |
| Plain css classes used by react | |||||||
| react‑stitches‑css | 📏 46.4 kb | ⏱️ 1.6 s+157% | ⏱️ 1.6 s+157% | ⏱️ 1.6 s+27% | ⏱️ 1.6 s+27% | Demo Code | |
| vanilla‑vue‑ssr | 📏 42.0 kb | ⏱️ 1.3 s+100% | ⏱️ 1.3 s+100% | ⏱️ 1.6 s+27% | ⏱️ 1.6 s+27% | Demo Code | |
| Plain css classes used with Vue and server side rendering | |||||||
| vanilla‑react‑concurrency | 📏 49.2 kb | ⏱️ 1.7 s+160% | ⏱️ 1.7 s+160% | ⏱️ 1.7 s+28% | ⏱️ 1.7 s+28% | Demo Code | |
| Plain css classes used by react suspense | |||||||
| vanilla‑vue | 📏 40.2 kb | ⏱️ 1.7 s+163% | ⏱️ 1.7 s+163% | ⏱️ 1.7 s+29% | ⏱️ 1.7 s+29% | Demo Code | |
| Plain css classes used with Vue | |||||||
| react‑stitches‑styled‑ssr | 📏 50.7 kb | ⏱️ 0.7 s+7% | ⏱️ 0.7 s+7% | ⏱️ 1.7 s+31% | ⏱️ 1.7 s+31% | Demo Code | |
| react‑emotion | 📏 53.8 kb | ⏱️ 1.7 s+167% | ⏱️ 1.7 s+167% | ⏱️ 1.7 s+31% | ⏱️ 1.7 s+31% | Demo Code | |
| Emotion with react | |||||||
| react‑emotion‑ssr | 📏 57.3 kb | ⏱️ 0.7 s+11% | ⏱️ 0.7 s+11% | ⏱️ 1.7 s+31% | ⏱️ 1.7 s+31% | Demo Code | |
| Emotion with react and server side rendering | |||||||
| react‑stitches‑styled | 📏 46.9 kb | ⏱️ 1.7 s+168% | ⏱️ 1.7 s+168% | ⏱️ 1.7 s+32% | ⏱️ 1.7 s+32% | Demo Code | |
| styled‑components‑ssr | 📏 60.1 kb | ⏱️ 0.7 s+9% | ⏱️ 0.7 s+9% | ⏱️ 1.7 s+33% | ⏱️ 1.7 s+33% | Demo Code | |
| Styled-components used with react and server side rendering | |||||||
| styled‑components | 📏 57.0 kb | ⏱️ 1.7 s+173% | ⏱️ 1.7 s+173% | ⏱️ 1.7 s+34% | ⏱️ 1.7 s+34% | Demo Code | |
| Styled-components used with react | |||||||
How do you generate these values?
Every commit to the css-framework-performance master branch generates 5 lighthouse reports for each project in the css-frameworks folder.
The https://en.wikipedia.org/wiki/Median report is published to github pages.
throttling:
The network throtteling is using the lighthouse devtools defaults.
- Latency: 150ms
- Throughput: 1.6Mbps down.
- Packet loss: none.
lighthouse
http://127.0.0.1/
--throttling.cpuSlowdownMultiplier=4
--chrome-flags="--headless"
--throttling-method=devtools
Feel free to contribute
To add a new technology create a new demo implementation inside the css-frameworks folder.