Feature/cleanup lighthouse (#32)

packages/benchmark/.gitignore

@@ -33,5 +33,5 @@ yarn-error.log*
 # vercel
 .vercel
 
-benchmark/lighthouse
+lighthouse/results
 codspeed/dist

packages/benchmark/lighthouse.mjs → packages/benchmark/lighthouse/lighthouse.mjs

@@ -1,8 +1,11 @@
 import { execSync, spawn } from "child_process";
 import kill from "tree-kill";
 import { mkdirSync, readFileSync } from "fs";
+import path from "path";
 
 const __dirname = new URL(".", import.meta.url).pathname;
+const resultDir = path.resolve(__dirname, "./results");
+const lighthouseArgs = "--preset=perf --only-categories=performance --chrome-flags=\"--headless\"";
 
 // run npm run build:
 execSync("npm run build", { cwd: __dirname, stdio: "inherit" });
@@ -30,7 +33,7 @@ Promise.all([
 
 async function runTests() {
   // run lighthouse performance tests 3 times:
-  const runs = 5;
+  const runs = 3;
   const urls = ["yak", "styled"];
   const results = {};
   for (let i = 0; i < runs; i++) {
@@ -42,7 +45,7 @@ async function runTests() {
 
   for (const pathName of urls) {
     execSync(
-      `npx lighthouse http://localhost:3000/${pathName} --output-path=benchmark/lighthouse/${pathName}.html`,
+      `npx lighthouse http://localhost:3000/${pathName} --output-path="${path.resolve(resultDir,pathName)}.html" ${lighthouseArgs}`,
       { cwd: __dirname, stdio: "inherit" }
     );
   }
@@ -52,38 +55,46 @@ async function runTests() {
       Object.entries(results).map(([url, runs]) => [
         url,
         {
-          score: mean(runs.map((run) => run.score)).toFixed(0),
-          scoreMin: Math.min(...runs.map((run) => run.score)).toFixed(0),
-          scoreMax: Math.max(...runs.map((run) => run.score)).toFixed(0),
-          fcp: mean(runs.map((run) => run.firstContentfulPaint)).toFixed(0),
-          fcpMin: Math.min(
+          score: round(mean(runs.map((run) => run.score)), 0),
+          scoreMin: round(Math.min(...runs.map((run) => run.score)), 0),
+          scoreMax: round(Math.max(...runs.map((run) => run.score)), 0),
+          fcp: round(mean(runs.map((run) => run.firstContentfulPaint)), 0),
+          fcpMin: round(Math.min(
             ...runs.map((run) => run.firstContentfulPaint)
-          ).toFixed(0),
-          fcpMax: Math.max(
+          ), 0),
+          fcpMax: round(Math.max(
             ...runs.map((run) => run.firstContentfulPaint)
-          ).toFixed(0),
-          lcp: mean(runs.map((run) => run.lcp)).toFixed(0),
-          lcpMin: Math.min(...runs.map((run) => run.lcp)).toFixed(0),
-          lcpMax: Math.max(...runs.map((run) => run.lcp)).toFixed(0),
-          blockingTime: mean(runs.map((run) => run.blockingTime)).toFixed(2),
-          blockingTimeMin: Math.min(
+          ), 0),
+          lcp: round(mean(runs.map((run) => run.lcp)), 0),
+          lcpMin: round(Math.min(...runs.map((run) => run.lcp)), 0),
+          lcpMax: round(Math.max(...runs.map((run) => run.lcp)), 0),
+          blockingTime: round(mean(runs.map((run) => run.blockingTime)), 2),
+          blockingTimeMin: round(Math.min(
             ...runs.map((run) => run.blockingTime)
-          ).toFixed(2),
-          blockingTimeMax: Math.max(
+          ), 2),
+          blockingTimeMax: round(Math.max(
             ...runs.map((run) => run.blockingTime)
-          ).toFixed(2),
-          transferSize: mean(runs.map((run) => run.transferSize)).toFixed(0),
+          ), 2),
+          ttfb: round(mean(runs.map((run) => run.ttfb)), 2),
+          ttfbMin: round(Math.min(
+            ...runs.map((run) => run.ttfb)
+          ), 2),
+          ttbMax: round(Math.max(
+            ...runs.map((run) => run.ttfb)
+          ), 2),
+          transferSize: readableNumber(round(mean(runs.map((run) => run.transferSize)) / 1024, 2), "kb"),
         },
       ])
     )
   );
 }
 
 async function runLighthouse(pathName, run) {
-  mkdirSync("benchmark/lighthouse", { recursive: true });
-  const json = `./benchmark/lighthouse/${pathName}_${run}.json`;
+
+  mkdirSync(resultDir, { recursive: true });
+  const json = path.resolve(resultDir, `${pathName}_${run}.json`);
   execSync(
-    `npx lighthouse http://localhost:3000/${pathName} --output=json --output-path=${json}`,
+    `npx lighthouse http://localhost:3000/${pathName} --output=json --output-path="${json}" ${lighthouseArgs}`,
     { cwd: __dirname, stdio: "inherit" }
   );
   const results = JSON.parse(readFileSync(json, "utf-8"));
@@ -93,10 +104,19 @@ async function runLighthouse(pathName, run) {
   const transferSize = results.audits["total-byte-weight"].numericValue;
   const firstContentfulPaint =
     results.audits["first-contentful-paint"].numericValue;
+ const ttfb = results.audits["server-response-time"].numericValue;
 
-  return { score, lcp, blockingTime, transferSize, firstContentfulPaint };
+  return { score, lcp, blockingTime, transferSize, firstContentfulPaint, ttfb };
 }
 
 function mean(numbers) {
   return numbers.reduce((a, b) => a + b) / numbers.length;
 }
+
+function round(number, decimals) {
+    return Math.round(number * Math.pow(10, decimals)) / Math.pow(10, decimals);
+}
+
+function readableNumber(number, unit) {
+    return `${number.toLocaleString()} ${unit}`;
+}

packages/benchmark/package.json

@@ -7,13 +7,13 @@
     "build": "next build",
     "start": "next start",
     "generate:letters": "node ./letters/gen.js",
-    "lighthouse": "node ./lighthouse.mjs",
+    "lighthouse": "node ./lighthouse/lighthouse.mjs",
     "codspeed": "pnpm run codspeed:build && pnpm run codspeed:run",
     "codspeed:build": "tsup ./codspeed/index.bench.tsx --sourcemap inline --format esm --target node20 --clean --outDir ./codspeed/dist --external benchmark --external react --external next-yak --external styled-components --external react-dom --external @codspeed/benchmark.js-plugin",
     "codspeed:run": "NODE_ENV=production node ./codspeed/dist/index.bench.mjs"
   },
   "dependencies": {
-    "next": "14.0.2",
+    "next": "canary",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "next-yak": "workspace:*",