krausest / js-framework-benchmark

A comparison of the performance of a few popular javascript frameworks
https://krausest.github.io/js-framework-benchmark/
Apache License 2.0
6.71k stars 832 forks source link

Ensuring TTI measurements are accurate #1208

Open fabiospampinato opened 1 year ago

fabiospampinato commented 1 year ago

Looking at the top results for the TTI metric I see some super strange numbers:

Screen Shot 2023-03-11 at 15 30 54

  1. First of all what unit do these numbers have, milliseconds I guess?
  2. The vanilla implementation doesn't seem minified, arguably it should be minified to be a more accurate baseline to compare against?
  3. All these numbers seem strangely close, could it be that we are actually mostly measuring how long it takes to download/parse/execute the CSS? If so IMO that muddies the waters significantly and loading the CSS files should be disabled when measuring the TTI metric.
krausest commented 1 year ago

(Sorry, my free time is currently a bit limited, so I can't put as much effort into this as I'd like to do).

  1. consistently interactive is the "interactive" audit from lighthouse. It returns the following JSON:
{
    "id": "interactive",
    "title": "Time to Interactive",
    "description": "Time to Interactive is the amount of time it takes for the page to become fully interactive. [Learn more about the Time to Interactive metric](https://developer.chrome.com/docs/lighthouse/performance/interactive/).",
    "score": 1,
    "scoreDisplayMode": "numeric",
    "numericValue": 1873.368,
    "numericUnit": "millisecond",
    "displayValue": "1.9 s"
}
  1. Here's a comparison for vanillajs and vanillajs w/rollup + terser soon! (It used to be webpacked, but at some point in time we removed bundling for vanillajs 😄 ) Bildschirm­foto 2023-03-20 um 22 35 09

If you can propose more sensible lighthouse audits we could switch to those...

fabiospampinato commented 1 year ago

I'd propose ignoring the CSS for that test, which seems the main problem causing those numbers to be all that close together.