CASE FILE 03 / 2024 / FRONTEND LEAD
VELOCITY — COMMERCE AT SPEED.
A storefront replatform for a fashion retailer with eleven thousand products and a catalogue that changed hourly. The old site took nine seconds to become interactive on mobile. That number was the entire brief.
//The constraint#
Nine seconds to interactive, and a bounce rate that matched. The cause wasn't one thing, which is usual: four hundred kilobytes of JavaScript for a personalisation layer that affected two components, a product grid that fetched every variant of every item on first paint, and a tag manager loading eleven third-party scripts ahead of the page's own content.
//What I built#
Rendering moved to the edge, with product pages served from cache and revalidated on webhook rather than on a timer — a catalogue that changes hourly doesn't need a five-minute revalidation window, it needs to know precisely when something changed. Personalisation became a streamed hole in an otherwise static page, so the first paint never waited on a per-visitor lookup.
The grid was rebuilt to fetch only what it renders: one variant per product, with remaining variants fetched on interaction. Third-party scripts were audited down from eleven to three, which was a political exercise more than a technical one, and the survivors were moved behind consent and idle callbacks so they could never compete with content.
//Result and regrets#
Time to interactive on mobile fell to 1.8 seconds. Largest contentful paint came in at 1.2 seconds at the 75th percentile of real traffic. JavaScript shipped to a product page dropped by roughly seventy per cent. Regret: I let the design system and the replatform run concurrently, so both moved slower than either would have alone. Sequencing them would have cost a month and saved two.
