A performance comparison of css approaches

Deploy Task Star View on GitHub

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.

NameTransfer SizeFirst Meaningful PaintFirst Contentful PaintTime To InteractiveFirst Cpu IdleDemoFull Report
vanilla‑preact‑ssr📏 9.9 kb⏱️ 1.3 s+97%⏱️ 1.3 s+97%⏱️ 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+105%⏱️ 1.3 s+105%⏱️ 1.3 s 0%⏱️ 1.3 s 0%Demo
Code
Plain css classes used by preact
vanilla📏 5.0 kb⏱️ 1.5 s+126%⏱️ 1.5 s+126%⏱️ 1.5 s+10%⏱️ 1.5 s+10%Demo
Code
Plain old css using the mini-css-extract-plugin
vanilla‑react‑ssr📏 47.2 kb⏱️ 1.3 s+95%⏱️ 1.3 s+95%⏱️ 1.5 s+12%⏱️ 1.5 s+12%Demo
Code
Plain css classes used by react and server side rendering
vanilla‑react‑concurrency‑ssr📏 50.1 kb⏱️ 1.3 s+97%⏱️ 1.3 s+97%⏱️ 1.5 s+13%⏱️ 1.5 s+13%Demo
Code
Plain css classes used by react suspense and server side rendering
vanilla‑react📏 45.1 kb⏱️ 1.6 s+145%⏱️ 1.6 s+145%⏱️ 1.6 s+20%⏱️ 1.6 s+20%Demo
Code
Plain css classes used by react
vanilla‑style‑loader📏 6.0 kb⏱️ 0.7 s 0%⏱️ 0.7 s 0%⏱️ 1.6 s+20%⏱️ 1.6 s+20%Demo
Code
Plain css embededed using the webpack style-loader
vanilla‑react‑concurrency📏 48.0 kb⏱️ 1.7 s+152%⏱️ 1.7 s+152%⏱️ 1.7 s+23%⏱️ 1.7 s+23%Demo
Code
Plain css classes used by react suspense
vanilla‑vue‑ssr📏 42.0 kb⏱️ 1.3 s+97%⏱️ 1.3 s+97%⏱️ 1.7 s+25%⏱️ 1.7 s+25%Demo
Code
Plain css classes used with Vue and server side rendering
react‑stitches‑css📏 46.4 kb⏱️ 1.7 s+157%⏱️ 1.7 s+157%⏱️ 1.7 s+25%⏱️ 1.7 s+25%Demo
Code
vanilla‑vue📏 40.2 kb⏱️ 1.7 s+162%⏱️ 1.7 s+162%⏱️ 1.7 s+28%⏱️ 1.7 s+28%Demo
Code
Plain css classes used with Vue
styled‑components‑ssr📏 60.1 kb⏱️ 0.7 s+9%⏱️ 0.7 s+9%⏱️ 1.7 s+30%⏱️ 1.7 s+30%Demo
Code
Styled-components used with react and server side rendering
react‑emotion📏 53.8 kb⏱️ 1.8 s+168%⏱️ 1.8 s+168%⏱️ 1.8 s+31%⏱️ 1.8 s+31%Demo
Code
Emotion with react
react‑stitches‑styled📏 46.9 kb⏱️ 1.8 s+172%⏱️ 1.8 s+172%⏱️ 1.8 s+33%⏱️ 1.8 s+33%Demo
Code
react‑emotion‑ssr📏 57.3 kb⏱️ 0.7 s+7%⏱️ 0.7 s+7%⏱️ 1.8 s+34%⏱️ 1.8 s+34%Demo
Code
Emotion with react and server side rendering
styled‑components📏 57.0 kb⏱️ 1.8 s+175%⏱️ 1.8 s+175%⏱️ 1.8 s+34%⏱️ 1.8 s+34%Demo
Code
Styled-components used with react
react‑stitches‑styled‑ssr📏 50.7 kb⏱️ 1.9 s+183%⏱️ 0.7 s+3%⏱️ 1.8 s+35%⏱️ 1.9 s+38%Demo
Code

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.