search

bmuenzenmeyer / node-web-app-perf-lighthouse

A script to run your local web app and yield developer experience and user performance data
MIT License
0 stars 0 forks source link

Case Study: nodejs.org #8

Open bmuenzenmeyer opened 1 year ago

bmuenzenmeyer commented 1 year ago

Perf comparison between two versions of nodejs.org running locally on my Windows machine:

Commits

5f9862c5

https://github.com/nodejs/nodejs.org/commits/5f9862c5

{
  "vulnerabilities": 22,
  "prodNodeModulesCount": 233,
  "prodNodeModulesSize": "40M",
  "allNodeModulesCount": 728,
  "allNodeModulesSize": "130M",
  "installTimeResult": "7s",
  "lightHouseTestResults": {
    "first-contentful-paint": "2.3 s",
    "largest-contentful-paint": "2.3 s",
    "first-meaningful-paint": "2.3 s",
    "speed-index": "2.3 s",
    "total-blocking-time": "0 ms",
    "max-potential-fid": "20 ms",
    "cumulative-layout-shift": "0.041",
    "interactive": "2.3 s",
    "server-response-time": "Root document took 10 ms",
    "bootup-time": "0.1 s"
  },
  "diagnosticPropertyResults": {
    "numRequests": 12,
    "numScripts": 3,
    "numStylesheets": 3,
    "numFonts": 1,
    "totalByteWeight": 75421
  },
  "elapsedBuildTime": "9.873"
}

aa48cf5d

https://github.com/nodejs/nodejs.org/commits/aa48cf5d

{
  "vulnerabilities": 0,
  "prodNodeModulesCount": 432,
  "prodNodeModulesSize": "503M",
  "allNodeModulesCount": 2309,
  "allNodeModulesSize": "908M",
  "installTimeResult": "43s",
  "lightHouseTestResults": {
    "first-contentful-paint": "0.9 s",
    "largest-contentful-paint": "15.2 s",
    "first-meaningful-paint": "0.9 s",
    "speed-index": "5.6 s",
    "total-blocking-time": "1,240 ms",
    "max-potential-fid": "1,370 ms",
    "cumulative-layout-shift": "0.005",
    "interactive": "15.0 s",
    "server-response-time": "Root document took 2,930 ms",
    "bootup-time": "1.7 s"
  },
  "diagnosticPropertyResults": {
    "numRequests": 22,
    "numScripts": 9,
    "numStylesheets": 1,
    "numFonts": 2,
    "totalByteWeight": 2270249
  },
  "elapsedBuildTime": "16.924"
}
bmuenzenmeyer commented 1 year ago

6 would improve this output by making them directly comparable

ovflowd commented 1 year ago

Also important to mention is that the Next.js npm run build will be an SSR build, hence the first rendering of each page will have a significant server response time, since we fully use ISR (Incremental Static Rendering), meaning that pages are built on-demand.

It would be better to compare both (pre-Next.js and now) if the Next.js one also runs with npm run deploy.

I guess for per-build comparison from now-on individual npm run deploy or npm run build comparisons would make sense, but dunno.

bmuenzenmeyer commented 1 year ago

Happy to adapt in any way, this is still a WIP. Is there a timeline we are trying to hit?

ovflowd commented 1 year ago

Nope, no timeline :) take your time :D

bmuenzenmeyer commented 1 year ago

@ovflowd

Criteria 5f9862c5 5e51e825
tech handlebars & metalsmith react & next.js
vulnerabilities 3 0
prodNodeModulesCount 234 458
prodNodeModulesSize 40M 432M
allNodeModulesCount 730 2083
allNodeModulesSize 130M 799M
prodInstallTimeResult 3s 15s
installTimeResult 7s 32s
LH first-contentful-paint 2.4 s 0.8 s
LH largest-contentful-paint 2.4 s 13.4 s
LH first-meaningful-paint 2.4 s 0.8 s
LH speed-index 2.4 s 11.3 s
LH total-blocking-time 0 ms 1,330 ms
LH max-potential-fid 20 ms 1,470 ms
LH cumulative-layout-shift 0.041 0.005
LH interactive 2.4 s 13.1 s
LH server-response-time Root document took 10 ms Root document took 7,260 ms
LH bootup-time 0.1 s 1.7 s
DEVTOOLS numRequests 12 18
DEVTOOLS numScripts 3 8
DEVTOOLS numStylesheets 3 1
DEVTOOLS numFonts 1 1
DEVTOOLS totalByteWeight 75423 1955274
elapsedBuildTime 7.993 30.774
elapsedDeployTime 77.613 58.139
bmuenzenmeyer commented 1 year ago

@ovflowd with Next 13.5 on dbe24559 deploy is 20% faster on the same hardware as our baselines

Criteria 5f9862c5 5e51e825 dbe24559
tech handlebars & metalsmith react & next.js@13.4 with next@13.5
vulnerabilities 3 0 0
prodNodeModulesCount 234 458 509
prodNodeModulesSize 40M 432M 452M
allNodeModulesCount 730 2083 2162
allNodeModulesSize 130M 799M 833M
prodInstallTimeResult 3s 15s 18s
installTimeResult 7s 32s 40s
LH first-contentful-paint 2.4 s 0.8 s 0.8 s
LH largest-contentful-paint 2.4 s 13.4 s 13.4 s
LH first-meaningful-paint 2.4 s 0.8 s 0.8 s
LH speed-index 2.4 s 11.3 s 11.5 s
LH total-blocking-time 0 ms 1,330 ms 1,130 ms
LH max-potential-fid 20 ms 1,470 ms 1,270 ms
LH cumulative-layout-shift 0.041 0.005 0.005
LH interactive 2.4 s 13.1 s 13.1 s
LH server-response-time Root document took 10 ms Root document took 7,260 ms Root document took 7,420 ms
LH bootup-time 0.1 s 1.7 s 1.5 s
DEVTOOLS numRequests 12 18 18
DEVTOOLS numScripts 3 8 8
DEVTOOLS numStylesheets 3 1 1
DEVTOOLS numFonts 1 1 1
DEVTOOLS totalByteWeight 75423 1955274 1969123
elapsedBuildTime 7.993 30.774 31.256
elapsedDeployTime 77.613 58.139 46.273