perf-chris-dry-masterclass

star 0

Trage loads en KPI’s (bv. 2,5s) aanpakken via Chris-protocol, DRY en masterclass-niveau: SSOT eerst (server één waarheid → client geen tweede fetch), daarna pas client dedupe/abort als veiligheidsnet; oorzaak-taxonomie, meetdefinitie-SSOT, geen timer-tuning als hoofdoplossing. Gebruik bij performance, duplicate bootstrap, home/agency-laden, nav/config-fetches, Voiceglot-scan’s, pool/TTFB/LCP, hub + glossarium (**371**, doc **33**), flight-budget (**342**), of wanneer de owner “waarom duurt het” / Chris+DRY vraagt. **Persona-eigenaar** meeten/baseline/close-the-loop: **`.cursor/agents/voices-goldie.md`** (Goldie). **World-upgrade flow** (één `world_id` end-to-end: canon → pad → meten → gates) staat hieronder. Alle Worlds: **`.cursor/rules/349-WORLDS-GOLDEN-PATH.mdc`**; Agency-detail: **`.cursor/rules/348-AGENCY-GOLDEN-PATH.mdc`**.

johfrah By johfrah schedule Updated 6/4/2026
play_arrow Run Skill in Manus View GitHub

name: perf-chris-dry-masterclass description: >- Trage loads en KPI’s (bv. 2,5s) aanpakken via Chris-protocol, DRY en masterclass-niveau: SSOT eerst (server één waarheid → client geen tweede fetch), daarna pas client dedupe/abort als veiligheidsnet; oorzaak-taxonomie, meetdefinitie-SSOT, geen timer-tuning als hoofdoplossing. Gebruik bij performance, duplicate bootstrap, home/agency-laden, nav/config-fetches, Voiceglot-scan’s, pool/TTFB/LCP, hub + glossarium (371, doc 33), flight-budget (342), of wanneer de owner “waarom duurt het” / Chris+DRY vraagt. Persona-eigenaar meeten/baseline/close-the-loop: .cursor/agents/voices-goldie.md (Goldie). World-upgrade flow (één world_id end-to-end: canon → pad → meten → gates) staat hieronder. Alle Worlds: .cursor/rules/349-WORLDS-GOLDEN-PATH.mdc; Agency-detail: .cursor/rules/348-AGENCY-GOLDEN-PATH.mdc. disable-model-invocation: true

Performance: Chris · DRY · masterclass

Wanneer dit lezen

  • Verplicht wanneer de diff golden-path-raakvlakken raakt — zie .cursor/rules/349-WORLDS-GOLDEN-PATH.mdc §6 (layout, nav/locale, RSC-seeds, mount-fetches, world-grenzen, 342-payload); dan gelden checklist 349 §2, 028, en onderstaande SSOT-volgorde.
  • Owner of taak vraagt om sneller laden, timeouts, 2,5s-KPI, dubbele werk, of expliciet Chris + DRY + masterclass bij performance.
  • Na full-check / Playwright-timeouts: eerst oorzaken, niet alleen timers verhogen.
  • Wijzigingen aan nav, layout → client nav, home-bootstrap, ConfigBridge, RSC-flight / 342.
  • Owner wil één World in één doorlopende flow naar golden-path-niveau brengen (niet alleen één component).
  • Goldie full autopilot: npm run goldie:autopilot = gate:fast + build + metrics op alle critical inventory-routes; bij regressie zelf pad traceren (scan/lezen), doc 40 § G, hertest — geen takenlijst voor de owner (014). Sneller: golden-path:close-the-loop (18 routes).
  • Herhaalbare meet-fix-hertest zonder gate:fast in elke ronde: slash /fast → .cursor/skills/fast/SKILL.md (voices-fast); complement aan deze skill en aan Goldie, geen vervanging.

World-upgrade flow (één World end-to-end)

Gebruik deze vaste volgorde wanneer je een hele World wilt upgraden (golden path + performance-discipline), zonder halverwege andere Worlds mee te slepen.

0) Scope vastzetten

  1. Eén world_id + naam — uit .cursor/rules/004-WORLD-MATRIX.mdc (geen mix van Studio-tabellen met Agency-flows enz.).
  2. Publieke routes / journey die bij die World horen — uit code, slug_registry, en docs/01-FOUNDATION/WORLDS-AND-MARKETS-CANON.md waar relevant.
  3. Lokale host voor die World — .cursor/rules/328-LOCAL-DEV-WORLD-HOSTS-MASTERCLASS.mdc en apps/web/src/lib/system/localhost-world-dev-aliases.ts (geen willekeurige *.localhost).

1) Canon lezen (vóór je typt)

  1. .cursor/rules/349-WORLDS-GOLDEN-PATH.mdc — universele checklist §2 + SSOT-pointer voor jouw World in §3.
  2. .cursor/rules/028-GOLDEN-PATH-ENGINEERING.mdc — hoofdpad eerst, fallbacks niet als norm.
  3. World 1 (Agency) — extra: .cursor/rules/348-AGENCY-GOLDEN-PATH.mdc.
  4. Flight / eerste payload waar van toepassing — .cursor/rules/342-SSR-BOOTSTRAP-RSC-FLIGHT-BUDGET.mdc + docs/02-ARCHITECTURE/31-SSR-BOOTSTRAP-EN-RSC-FLIGHT-BUDGET-SSOT.md.

2) Diagnose (kort, gericht)

  1. Meetdefinitie afstemmen (zie § KPI-SSOT hieronder) — één primaire lat voor deze World-upgrade.
  2. Netwerk/trace op de kernroutes van die World: zelfde URL + locale dubbel? mount-burst na RSC?
  3. Taxonomie § “Volledige oorzaak-taxonomie” — alleen de regels die voor deze routes relevant zijn (geen 11-punten-fishing-expeditie).

3) Bouwen (masterclass-volgorde = § “SSOT eerst”)

  1. Server / RSC: seeds en props die de client anders opnieuw zou halen — layout of page blijft de bron.
  2. Locale: één resolution-string end-to-end (304-LOCALE-BOUNDARY.mdc waar van toepassing).
  3. Contract: waar mogelijk één bundel i.p.v. micro-storm van dezelfde data.
  4. Client dedupe / abort alleen als net na bovenstaande — niet als eerste “oplossing”.

Templates / CMS / [...slug]: bij die scope ook .cursor/agents/voices-goldie.md § Goldie-flow — templates, CMS en smart router (modulair smart router, ATF dichter bij server, routes per patroon meten).

4) Meten (binnen dezelfde flow)

  1. DevTools Network (of vergelijkbaar) op de gekozen host — vóór/na op dezelfde route en viewport.
  2. Optioneel: Playwright alleen op de routes van deze World (tests/e2e/console-audit.spec.ts met -g / env zoals .cursor/rules/325-FULL-CHECK-BROWSER-ROUTE-AUDIT.mdc); PLAYWRIGHT_BASE_URL op de juiste world-host uit stap 0.
  3. Geen nieuwe KPI’s halfweg invoeren — anders is “beter” niet vergelijkbaar.
  4. Veld-RUM (Voicejar Web Vitals): hub doc 33 §3b–§3c — dim web_vitals_latest; operators npm run report:voicejar-web-vitals:field. Met repo-secret DATABASE_URL draait gate:fast ook verify:voicejar-web-vitals-field:when-db (JSON-aggregaat; strikte exit alleen met VOICEJAR_WEB_VITALS_REPORT_STRICT=1).

5) Gates (in één keer afronden)

Eén commando (meten + gates + mini-hermeting + baseline-diff): root npm run golden-path:close-the-loop — scripts/golden-path-close-the-loop.sh: type-check → routes:inventory:ci (één Next-build) → npm run lint → verify:cms-instrument-renderer → verify:cms-page-editor-instrument → Playwright tests/e2e/golden-path-metrics.spec.ts (schrijft apps/web/reports-golden-path/last.json; GOLDEN_PATH_METRICS_ROUTES leeg = scripts/resolve-golden-path-metrics-routes.ts uit route-inventory.json, default 12 routes, env GOLDEN_PATH_METRICS_MAX_ROUTES / GOLDEN_PATH_METRICS_SCOPE; print met npm run golden-path:routes:print). Als baseline.json bestaat: compare-golden-path-metrics.ts. Eerste referentie: npm run golden-path:baseline. Strenger: GOLDEN_PATH_FULL_PREVERCEL=1. Volledige checklist: docs/02-ARCHITECTURE/40-GOLDIE-OPERATIONAL-CHECKLIST.md. Andere gates naar taak:

  1. npm run type-check (inbegrepen in het commando hierboven).
  2. npm run check:pre-vercel / check:pre-vercel:ci — .cursor/skills/pre-vercel-check/SKILL.md (of via GOLDEN_PATH_FULL_PREVERCEL=1 in de close-the-loop-run).
  3. Runtime: minstens gerichte console/route-check — .cursor/rules/338-AGENT-DEV-CONSOLE-SELF-VERIFY.mdc; voor brede World-dekking lokaal: npm run superfix:local-world-consoles (.cursor/skills/superfixer/SKILL.md, 026).
  4. Grotere regressie-sweep wanneer de owner dat wil: npm run full-check:fast of full-check:prod:voices:extended (325) — niet verplicht voor elke kleine diff, wél na brede layout/shell-wijzigingen.

6) Gericht verbeteren (lus — plan volledig)

Als meting of baseline-diff regressie toont: één hoofdoorzaak (taxonomie § “Volledige oorzaak-taxonomie”), SSOT-eerst-fix, hertest met dezelfde golden-path:*-routes tot groen of tot KPI uit doc 39 gehaald is. Vaste tekst: docs/02-ARCHITECTURE/40-GOLDIE-OPERATIONAL-CHECKLIST.md § G.

7) Afronding (bewijs voor de volgende agent)

In dezelfde taak/PR kort vastleggen: welke world_id, welke routes/paden, welke KPI of netwerkobservatie, welke gates gedraaid, en bij snelheidswerk oorzaak → fix → meting (§ G). Meerdere Worlds: herhaal deze flow per World — geen enkele mega-PR die vijf werelden door elkaar hert.

Chris-protocol (discipline, geen pleister)

  • Eén waarheid per datapad: wat de server al resolveert (nav, locale, config), hoeft de client niet opnieuw te halen tenzij er een harde reden is (stale, mutatie, expliciete invalidatie).
  • Radar / telemetrie: Mat + Voicejar + link-visitor — docs/02-ARCHITECTURE/55-TELEMETRY-AND-NON-BLOCKING-SERVER-WORK-SSOT.md (after(), staff-gate); geen parallelle strategie-tekst in andere docs.
  • Zelfde sleutels: server en client gebruiken dezelfde resolution-locale / cache-key (bijv. resolvePublicUiLocale-uitkomst end-to-end). nl ≠ nl-be als de server nl-be gebruikt → twee paden, dubbel werk (niet-DRY).
  • Expliciete reads: database/SDK: geen bredere select dan nodig (bijv. nav: alleen wat de UI nodig heeft). Sluit aan bij integriteitsdenken (200-CODE-INTEGRITY.mdc) en flight-budget (342-SSR-BOOTSTRAP-RSC-FLIGHT-BUDGET.mdc).
  • ID-first waar van toepassing: interne logica op stabiele id’s; URL/slug is presentatie (001-ATOMIC-TRINITY.mdc).
  • Geen “timeout omhoog” als strategie: dat maskeert symptomen en kan pool en parallelle druk verergeren. Timers alleen nadat het echte pad bewezen sneller is of een harde upper bound nodig is.

DRY (masterclass: minder ruis, minder dubbel)

Foutpatroon Masterclass-reactie
RSC/layout laadt nav/config; client mount fetcht hetzelfde Props doorgeven of gedeelde bron; fetch overslaan als SSR-data voldoende is.
Twee componenten roepen dezelfde API zonder coördinatie Eén laag (layout/provider) of bundel-endpoint.
Verschillende lang-query voor hetzelfde config-pad Eén canonieke locale-string voor dat pad (zoals server).
select * / volledige rij waar één JSONB-kolom volstaat Smalle projectie in Drizzle/SDK.

Concrete patronen in repo (indicatief, niet exhaustief): ConfigBridge.getNavConfig, GlobalNavInstrument, AdemingNav, LayoutClientInstruments, layout.tsx, home-client orchestratie (home-page-client e.d.).

SSOT eerst — dedupe / abort zijn geen hoofdstrategie

Masterclass-volgorde (van sterk naar ondersteunend):

  1. SSOT op de server / RSC: wat de layout of page al resolveert (nav, filtercatalogus, home-config-subset, locale), één keer laten ontstaan en doorgeven naar de client (props, seed, bundel-endpoint). Dan hoeft de client diezelfde bron niet opnieuw te fetchen → geen tweede waarheid, geen dubbele pool-hit voor identieke data. Dat is de echte DRY-win.
  2. Één contract per scherm: waar meerdere micro-calls hetzelfde doen als één route (GET /api/home/filter-catalog/ i.p.v. zes× admin/config?type=…), bundelen — nog steeds SSOT-denken, niet “slimmer client-trommelen”.
  3. Client dedupe (fetch*Deduped, gedeelde in-flight per URL/type) en listener-abort (attachListenerAbortToSharedPromise): veiligheidsnet voor randgevallen (StrictMode dubbele mount, korte overlap tussen twee client-subtrees, gedeelde fetch terwijl één caller unmount of deadline krijgt). Niet de vervanging van stap 1–2: als alleen dedupe nodig is, meestal ontbreekt nog server-SSOT of props-doorzet.

Vuistregel voor agents: eerst vragen “kan dit zonder tweede GET?” (overslaan / RSC / bundel); pas daarna “moeten we coalesceren?” (dedupe + abort). Zie ook .cursor/rules/028-GOLDEN-PATH-ENGINEERING.mdc (“maak het golden path”).

KPI-SSOT: waar meet je “2,5s”?

Kies één primaire meting per traject; anders optimaliseer je tegenstrijdige doelen. Canonieke tabel (per route-type, serverlaag, dekking, CMS-parity): docs/02-ARCHITECTURE/39-PERFORMANCE-USABLE-UNDER-2-5S-KPI-SSOT.md.

Metriek Wat het meet Geschikt voor
TTFB (document) Server + eerste byte HTML “Voelt de pagina direct aan?” / layout-kosten.
LCP Grootste zichtbare content (vaak hero) Marketing, Core Web Vitals, SEO.
Product (bv. grid zichtbaar) Eerste moment dat de stemmen-grid (of skeleton → echte kaarten) bruikbaar is Agency/home-product-KPI — vaak relevanter dan LCP als de hero niet het hoofddoel is.

Afspraak vastleggen in taak: bijv. “2,5s = eerste frame met ≥ N actor-kaarten met echte labels” plus optioneel LCP als secundaire guardrail.

Volledige oorzaak-taxonomie (checklist)

Gebruik als systematische zoektocht; niet alles is elke keer van toepassing.

  1. Dubbel werk (client naast server) — zelfde data tweemaal; verschillende cache-keys (locale).
  2. DB en pool — koude pool, te veel parallel op één request, zware queries, ontbrekende index, RLS/trigger-kosten.
  3. API-routes — grote JSON, zware berekening in request, N+1.
  4. RSC / flight — te grote serialisatie, laat zichtbare streaming (342 + doc 31-SSR-BOOTSTRAP-EN-RSC-FLIGHT-BUDGET-SSOT.md).
  5. Client-waterfall — keten A → B → C i.p.v. parallel of één slanke bundel.
  6. Voiceglot / vertalingen / content — grote scans; meer laden dan het scherm nodig heeft.
  7. Assets / LCP — zware hero, sizes/priority, fonts.
  8. JS / hydratatie — grote bundle, veel mount-work.
  9. Netwerk / omgeving — latency, dev ≠ prod.
  10. Externe diensten — retries, timeouts downstream.
  11. Foutpaden — stille retries → dubbele wachttijd.

Werkvolgorde voor de agent

  1. Meetdefinitie met owner afstemmen (primair + eventueel secundair).
  2. Netwerk/trace: dubbele requests naar dezelfde resource? Zelfde querystring/locale?
  3. Server: layout parallel shell, getNavConfig, home SSR-kolommen (342).
  4. DB: explain/size van responses waar twijfel.
  5. Pas code aan op de kleinste diff die het pad dedupliceert of versnelt — geen drive-by refactor (002).
  6. Bewijs: gerichte gate (type-check, relevante Playwright/MCP-console per 026 / 338), geen push zonder owner (804).

Canonieke documenten (naast deze skill)

  • docs/02-ARCHITECTURE/33-PERFORMANCE-PROGRESSIVE-LOADING-AND-BOOTSTRAP-CANON.md
  • docs/02-ARCHITECTURE/39-PERFORMANCE-USABLE-UNDER-2-5S-KPI-SSOT.md — “bruikbaar ≤ 2,5 s” per context + meet-/gate-pointers
  • docs/02-ARCHITECTURE/31-SSR-BOOTSTRAP-EN-RSC-FLIGHT-BUDGET-SSOT.md
  • Rule 342-SSR-BOOTSTRAP-RSC-FLIGHT-BUDGET.mdc

“Eén waarheid, één pad, één meetlat — masterclass.”

Install via CLI
npx skills add https://github.com/johfrah/voices-vercel --skill perf-chris-dry-masterclass
Repository Details
star Stars 0
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator
johfrah
johfrah Explore all skills →