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.

See the results

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.