Abdullah.
465eb05aaf
twenty-website had accumulated structural problems that were cheaper to fix by rebuilding than to refactor in place: - Drift had no guardrails. Values were matched at call sites instead of single-sourced, so things silently diverged — e.g. the radius token base was wrong for days (every radius() consumer rendered double) because nothing measured it against the old site's CSS variables. - A whole tree escaped quality checks. src/lib/ (~9.8k lines) was never format-checked, because oxfmt silently ignores directories named lib/. - Inconsistent rhythm. Hero spacing varied 24–88px between pages (CEO-flagged), because section spacing wasn't a token. - Over-extraction. -config.ts sprawl pulled single-component configuration out into the wrong place. The goal: a ground-up rebuild where drift is structurally impossible, held to a Linear / Railway / Notion / Attio quality bar. The old site is treated as source of intent only — nothing is blindly ported; every piece is re-decided and A/B-verified. **Rebuild** A full rebuild on Next 16 + Turbopack + Linaria (zero-runtime CSS), ~1,100 files. Marketing pages (home, product, pricing, partners + marketplace, customers/case-studies, why-twenty, releases, legal), the interactive AppPreview product mockup, the platform/visuals WebGL system (engine + rigs, three code-split off every initial chunk), and the standalone /halftone studio (the dev tool that generates the site's halftone art — engine, exporters, and full UI ported as an isolated island). **Architecture & guarantees** - Parity by construction. src/tokens/definitions.ts is the only file with raw values; the :root CSS-variable block is generated from it at build time and accessors derive var names through the same helpers — derived alpha tokens appear in served CSS without ever being hand-written. - Mobile-first by API shape. mediaUp() is the only media helper (no max-width helper exists, on purpose). - Section rhythm is a token (RHYTHM.section) — the hero-spacing inconsistency class is fixed by construction. - Fluid type ramps interpolate font-size and line-height between designed endpoints [390px → md]; TYPE_SCALE is the single source. - three.js never enters an initial chunk — confined to platform/visuals heavy zones, reached only via dynamic(ssr:false), enforced by check-visual-bundle.
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`,
|
|
);
|