{"id":"ops/frontend-performance-baseline","relativePath":"ops/frontend-performance-baseline.md","title":"Frontend performance baseline","markdown":"# Frontend performance baseline\n\nProduction lab evidence for roadmap item P1.5.\n\n## 2026-07-28 baseline\n\n- Target: `https://www.metamuseum.org`\n- Tool: Chrome DevTools performance trace\n- Load mode: cold navigation with reload\n- Network: Fast 4G\n- Mobile: 412 x 915 at 2.625 DPR, touch/mobile emulation, 4x CPU slowdown\n- Desktop: 1440 x 900 at 1 DPR, 1x CPU\n- Budgets: LCP <= 2.5 s, CLS <= 0.1, representative INP <= 200 ms\n- Field data: CrUX did not return page-level field metrics for the audited routes.\n\n| Journey | Mobile LCP | Mobile CLS | Desktop LCP | Desktop CLS | Result |\n|---|---:|---:|---:|---:|---|\n| Home | 600 ms | 0.00 | 359 ms | 0.00 | Pass |\n| Explore | 2,286 ms | 0.00 | 1,550 ms | 0.00 | Pass |\n| Artwork `61658` | 2,154 ms | 0.00 | 1,326 ms | 0.00 | Pass |\n| Projects | 771 ms | 0.00 | 360 ms | 0.00 | Pass |\n| Pilot | 730 ms | 0.00 | 382 ms | 0.0665 | Pass |\n\nA representative consent-control interaction trace measured 28 ms INP. This is\nsynthetic lab evidence, not a substitute for a route-level field distribution.\n\n## Findings\n\n1. Explore mobile is the limiting route at 2,286 ms LCP, leaving 214 ms of\n budget headroom. Treat a regression here as the first performance priority.\n2. Pilot desktop produced the only non-zero CLS, a single 0.0665 shift cluster.\n DevTools identified no potential root cause and estimated no savings.\n3. The Pilot LCP image was discoverable in the initial document and was not\n lazy-loaded. DevTools noted that it lacked `fetchpriority=high`, but estimated\n no LCP savings, so this is not a recommended change from this run.\n4. Render-blocking and cache insights that appeared on otherwise fast routes\n estimated 0 ms FCP/LCP savings and are not remediation priorities.\n5. No audited page breached the current P1.5 lab budgets.\n\n## Remaining P1.5 evidence\n\n- Repair and repeat the two failed visual checks documented below.\n- Repeat this baseline after a material frontend or deployment change; retain\n the same profile so results remain comparable.\n\n## Step 6 visual and accessibility checkpoint\n\nThe July 28 follow-up reviewed the same five production journeys at 412 x 915\nand 1440 x 900 after choosing essential-only privacy storage.\n\n- `pnpm a11y:check` passed all 18 routes with zero moderate, serious, or\n critical axe violations. `/agents` and `/automation` correctly enforced their\n authentication redirects.\n- Explore, artwork detail, Projects, and Pilot showed no document-width\n overflow at either viewport.\n- Artwork detail and Pilot did not render their principal images above the\n decoded intrinsic dimensions.\n- The initial Home review found two visual acceptance failures:\n - `.home-source-band` is 8 px wider than the document client width at both\n viewports (`405/397` mobile and `1433/1425` desktop), producing horizontal\n overflow.\n - The selected V&A Chair source is only `77 x 100` decoded pixels but is\n rendered at up to `397 x 240` mobile and `835 x 416` desktop in the hero.\n Its repeated source card is also enlarged to `363 x 272` mobile and\n `345 x 259` desktop.\n\nThe July 28 local remediation moves the source band outside the padded\n`.container` and uses normal `width: 100%` layout, removing the\nscrollbar-sensitive `100vw` calculation. Image selection now prefers a declared\nIIIF Image API service and requests a 1,200 px derivative before considering\nthumbnail representations. At a 1280 px local viewport, document and body\nscroll widths both equal the 1265 px client width, the band begins at x=0 and\nmatches the client width, and the active V&A source is\n`full/1200,/0/default.jpg`.\n\nFocused page, selection, and layout tests pass, as does the production build.\nThe local post-fix verification then repeated the complete matrix:\n\n| Journey | Mobile LCP | Mobile CLS | Desktop LCP | Desktop CLS | Result |\n|---|---:|---:|---:|---:|---|\n| Home | 703 ms | 0.00 | 356 ms | 0.00 | Pass |\n| Explore | 1,628 ms | 0.00 | 1,250 ms | 0.00 | Pass |\n| Artwork `61658` | 687 ms | 0.00 | 312 ms | 0.00 | Pass |\n| Projects | 695 ms | 0.00 | 329 ms | 0.00 | Pass |\n| Pilot | 789 ms | 0.00 | 360 ms | 0.00 | Pass |\n\nAll five journeys pass mobile and desktop document-width checks. The Home\nsource band matches the client width, the V&A card uses the 1,200 px IIIF\nderivative, and artwork/Pilot principal images remain within their intrinsic\ndimensions. The 18-route axe gate passes with zero moderate, serious, or\ncritical violations. A representative Home carousel interaction measures\n29 ms INP with 0.00 CLS.\n\nThe retained result is\n`artifacts/performance/frontend-p15-local-verification.json`. P1.5 remains open\nonly for the same capture against the deployed revision; local implementation\nand verification are complete.\n","sections":[{"level":2,"heading":"2026-07-28 baseline","anchor":"2026-07-28-baseline"},{"level":2,"heading":"Findings","anchor":"findings"},{"level":2,"heading":"Remaining P1.5 evidence","anchor":"remaining-p1-5-evidence"},{"level":2,"heading":"Step 6 visual and accessibility checkpoint","anchor":"step-6-visual-and-accessibility-checkpoint"}],"html":"

Frontend performance baseline

\n

Production lab evidence for roadmap item P1.5.

\n

2026-07-28 baseline

\n\n

| Journey | Mobile LCP | Mobile CLS | Desktop LCP | Desktop CLS | Result |

\n

|---|---:|---:|---:|---:|---|

\n

| Home | 600 ms | 0.00 | 359 ms | 0.00 | Pass |

\n

| Explore | 2,286 ms | 0.00 | 1,550 ms | 0.00 | Pass |

\n

| Artwork `61658` | 2,154 ms | 0.00 | 1,326 ms | 0.00 | Pass |

\n

| Projects | 771 ms | 0.00 | 360 ms | 0.00 | Pass |

\n

| Pilot | 730 ms | 0.00 | 382 ms | 0.0665 | Pass |

\n

A representative consent-control interaction trace measured 28 ms INP. This is

\n

synthetic lab evidence, not a substitute for a route-level field distribution.

\n

Findings

\n
  1. Explore mobile is the limiting route at 2,286 ms LCP, leaving 214 ms of
\n

budget headroom. Treat a regression here as the first performance priority.

\n
  1. Pilot desktop produced the only non-zero CLS, a single 0.0665 shift cluster.
\n

DevTools identified no potential root cause and estimated no savings.

\n
  1. The Pilot LCP image was discoverable in the initial document and was not
\n

lazy-loaded. DevTools noted that it lacked `fetchpriority=high`, but estimated

\n

no LCP savings, so this is not a recommended change from this run.

\n
  1. Render-blocking and cache insights that appeared on otherwise fast routes
\n

estimated 0 ms FCP/LCP savings and are not remediation priorities.

\n
  1. No audited page breached the current P1.5 lab budgets.
\n

Remaining P1.5 evidence

\n

the same profile so results remain comparable.

\n\n

Step 6 visual and accessibility checkpoint

\n

The July 28 follow-up reviewed the same five production journeys at 412 x 915

\n

and 1440 x 900 after choosing essential-only privacy storage.

\n

critical axe violations. `/agents` and `/automation` correctly enforced their

\n

authentication redirects.

\n

overflow at either viewport.

\n

decoded intrinsic dimensions.

\n

viewports (`405/397` mobile and `1433/1425` desktop), producing horizontal

\n

overflow.

\n

rendered at up to `397 x 240` mobile and `835 x 416` desktop in the hero.

\n

Its repeated source card is also enlarged to `363 x 272` mobile and

\n

`345 x 259` desktop.

\n\n

The July 28 local remediation moves the source band outside the padded

\n

`.container` and uses normal `width: 100%` layout, removing the

\n

scrollbar-sensitive `100vw` calculation. Image selection now prefers a declared

\n

IIIF Image API service and requests a 1,200 px derivative before considering

\n

thumbnail representations. At a 1280 px local viewport, document and body

\n

scroll widths both equal the 1265 px client width, the band begins at x=0 and

\n

matches the client width, and the active V&A source is

\n

`full/1200,/0/default.jpg`.

\n

Focused page, selection, and layout tests pass, as does the production build.

\n

The local post-fix verification then repeated the complete matrix:

\n

| Journey | Mobile LCP | Mobile CLS | Desktop LCP | Desktop CLS | Result |

\n

|---|---:|---:|---:|---:|---|

\n

| Home | 703 ms | 0.00 | 356 ms | 0.00 | Pass |

\n

| Explore | 1,628 ms | 0.00 | 1,250 ms | 0.00 | Pass |

\n

| Artwork `61658` | 687 ms | 0.00 | 312 ms | 0.00 | Pass |

\n

| Projects | 695 ms | 0.00 | 329 ms | 0.00 | Pass |

\n

| Pilot | 789 ms | 0.00 | 360 ms | 0.00 | Pass |

\n

All five journeys pass mobile and desktop document-width checks. The Home

\n

source band matches the client width, the V&A card uses the 1,200 px IIIF

\n

derivative, and artwork/Pilot principal images remain within their intrinsic

\n

dimensions. The 18-route axe gate passes with zero moderate, serious, or

\n

critical violations. A representative Home carousel interaction measures

\n

29 ms INP with 0.00 CLS.

\n

The retained result is

\n

`artifacts/performance/frontend-p15-local-verification.json`. P1.5 remains open

\n

only for the same capture against the deployed revision; local implementation

\n

and verification are complete.

","updatedAt":"2018-10-20T01:46:40.000Z","checksum":"90f948922b35fd676a02a20972c485660cd95a9cfcc66e4921daa794755e6d5f","checksumPrefix":"90f948922b35","anchorCount":4,"lineCount":98,"rawUrl":"/api/docs/content?path=ops%2Ffrontend-performance-baseline.md","htmlUrl":"/docs?doc=ops%2Ffrontend-performance-baseline.md","apiUrl":"/api/docs/content?path=ops%2Ffrontend-performance-baseline.md"}