https://github.com/jantimon/css-framework-performance

Compare different css approaches
https://github.com/jantimon/css-framework-performance

Last synced: 5 months ago
JSON representation

Compare different css approaches

• Host: GitHub
• URL: https://github.com/jantimon/css-framework-performance
• Owner: jantimon
• Created: 2020-03-14T19:31:09.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T22:52:59.000Z (about 3 years ago)
• Last Synced: 2025-04-03T19:40:24.114Z (10 months ago)
• Language: TypeScript
• Homepage: https://jantimon.github.io/css-framework-performance/
• Size: 51 MB
• Stars: 31
• Watchers: 2
• Forks: 6
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - css-framework-performance

README

          
# A performance comparison of css approaches



[![Deploy Task](https://github.com/jantimon/css-framework-performance/workflows/github%20pages/badge.svg)](https://jantimon.github.io/css-framework-performance/)  

The following table shows [different speed measurments](https://developers.google.com/web/updates/2018/05/lighthouse3#scoring) 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](https://github.com/jantimon/css-framework-performance/) generates 5 lighthouse reports for each project in the [css-frameworks folder](https://github.com/jantimon/css-framework-performance/tree/master/css-frameworks).  

The [https://en.wikipedia.org/wiki/Median](median) report is published to github pages.

###### [throttling](https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md):

The network throtteling is using the [lighthouse devtools defaults](https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md). 

- Latency: 150ms

- Throughput: 1.6Mbps down.

- Packet loss: none.

```bash

  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](https://github.com/jantimon/css-framework-performance/tree/master/css-frameworks).