Fullstack Developer.

The storefront combined data from Shopify, Contentful and other sources. Many components asked for the same data on their own, and the list APIs returned payloads that were far too large for a single request.

I let components share one SWR cache entry per piece of data instead of fetching it separately, and split the large list requests into chunks with lodash so each call stayed small.

The number of GraphQL fetches went down by 3×, with smaller responses on the list pages.

The storefront is a headless Shopify Plus build on Next.js 12 and GraphQL. Its key pages scored a poor LCP: a carousel built on react-swiper only worked on the client, so it broke server-side rendering and the main content appeared only after the JavaScript had loaded.

I first made the carousel render on the server again so the first view no longer waited for client code. That alone was not enough, so I worked through the rest of the page: how Next.js 12 rendered and loaded each part, and how images were delivered from Cloudinary, until the largest element could paint early.

LCP dropped by 76% and the store's Core Web Vitals moved into a healthy range.

A large codebase was still on TailwindCSS v1. Style rebuilds took around a second, which slowed down every change during development.

I migrated the project from TailwindCSS v1 to v3 and its on-demand engine, updating the configuration and the classes that changed between versions.

Builds became about 3× faster: rebuilds went from roughly 1 s to around 300 ms.