Abdullah.
569d887d1e
Renaming the package so any further PRs directed to the website are targeted to the reworked code instead of diverging. Once merged, I will start preparing this for deployment to dev to test before releasing to prod. Any improvements will also be applied to this package. I avoided making significant changes to API routes so nothing breaks, but will test it thoroughly today to confirm. That said, everything is ported - double checked. Big diff PR, impossible to review, but last one! No more rebuilds.
72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
import { chromium } from 'playwright';
|
|
|
|
// Same-run LCP comparison: both sites measured back to back under the
|
|
// same throttle (Fast-3G-ish network, 4x CPU), 3 cold loads each, median
|
|
// reported. A report, not a gate — run at wave close.
|
|
const OLD_URL = process.env.MOCKUP_OLD_URL ?? 'http://localhost:3002/';
|
|
const NEW_URL = process.env.VISUAL_BATTERY_URL ?? 'http://localhost:3004/';
|
|
const RUNS = 3;
|
|
|
|
const browser = await chromium.launch({ channel: 'chrome', headless: true });
|
|
|
|
async function measureLcp(url) {
|
|
const context = await browser.newContext({
|
|
viewport: { width: 1440, height: 900 },
|
|
deviceScaleFactor: 1,
|
|
});
|
|
const page = await context.newPage();
|
|
const cdp = await context.newCDPSession(page);
|
|
await cdp.send('Network.emulateNetworkConditions', {
|
|
offline: false,
|
|
latency: 150,
|
|
downloadThroughput: (1.6 * 1024 * 1024) / 8,
|
|
uploadThroughput: (750 * 1024) / 8,
|
|
});
|
|
await cdp.send('Emulation.setCPUThrottlingRate', { rate: 4 });
|
|
|
|
await page.addInitScript(() => {
|
|
window.__lcp = 0;
|
|
new PerformanceObserver((entryList) => {
|
|
for (const entry of entryList.getEntries()) {
|
|
window.__lcp = entry.startTime;
|
|
}
|
|
}).observe({ type: 'largest-contentful-paint', buffered: true });
|
|
});
|
|
|
|
await page.goto(url, { waitUntil: 'load', timeout: 240000 });
|
|
await page.waitForTimeout(3000);
|
|
const lcp = await page.evaluate(() => window.__lcp);
|
|
await context.close();
|
|
return lcp;
|
|
}
|
|
|
|
const median = (values) =>
|
|
values.toSorted((a, b) => a - b)[Math.floor(values.length / 2)];
|
|
|
|
const report = {};
|
|
for (const [label, url] of [
|
|
['old (:3002)', OLD_URL],
|
|
['new (:3004)', NEW_URL],
|
|
]) {
|
|
const samples = [];
|
|
for (let run = 0; run < RUNS; run += 1) {
|
|
// eslint-disable-next-line no-await-in-loop
|
|
samples.push(await measureLcp(url));
|
|
}
|
|
report[label] = { samples, median: median(samples) };
|
|
console.log(
|
|
` ${label}: median ${Math.round(median(samples))}ms (${samples
|
|
.map((sample) => Math.round(sample))
|
|
.join(', ')})`,
|
|
);
|
|
}
|
|
|
|
await browser.close();
|
|
|
|
const oldMedian = report['old (:3002)'].median;
|
|
const newMedian = report['new (:3004)'].median;
|
|
const delta = ((newMedian - oldMedian) / oldMedian) * 100;
|
|
console.log(
|
|
`lcp-report: new is ${delta <= 0 ? '' : '+'}${delta.toFixed(1)}% vs old`,
|
|
);
|