A fashion storefront

Findings

1. 01Critical

   The entire product catalogue rendered on the client

   Every category page shipped the full product list as JSON, then rendered it in the browser. On a mid-range device that is roughly 900ms of parse before anything appears.

   The fix

   Render the first screen of products on the server and stream the rest. The page paints while the data is still arriving.

2. 02Critical

   A 340KB date library for one format call

   The whole of moment.js plus its locale bundle, loaded on every route, to format a delivery estimate.

   The fix

   Intl.DateTimeFormat is built into the browser and does the same job for nothing.

3. 03Major

   Hero images served at 2400px to a 390px viewport

   No responsive sources and no modern format. The phone downloaded roughly six times the pixels it could display.

   The fix

   Responsive srcset plus AVIF with a JPEG fallback. Same image, about a fifth of the bytes.

4. 04Major

   Third-party scripts blocking the main thread

   Four analytics and chat scripts loaded synchronously in the head, each one delaying first paint.

   The fix

   Defer everything that is not required to render, and question whether four tools are measuring four different things.

5. 05Minor

   No performance budget in CI

   The site was fast at launch. Nothing since has stopped it getting slower, which is how it arrived here.

   The fix

   A per-route JavaScript budget that fails the pull request. This is the fix that keeps the other four from coming back.