Did you know your slick marketing site is probably a slug?
That’s what Safdar Ali discovered. He was frontend lead at Adsclique Media, wrestling with a Next.js site that felt more 2019 SPA than modern marvel. Heavy client bundles. Giant PNGs. Fonts imported like they were an afterthought. Lighthouse scores? Mid-50s. Lowlights included a homepage that took five agonizing seconds to become usable. All thanks to a client with the audacity to test on hotel Wi-Fi. Imagine the horror.
His PM, understandably panicked, didn’t want a roadmap. They wanted numbers. By Friday. Three days to fix Core Web Vitals without a full rewrite. This wasn’t about tweaking pixels; it was about surgical precision.
The site wasn’t “broken” — it was accidentally optimized for developer convenience, not user latency.
This is the kind of brutal, beautiful truth we live for at Open Source Beat. Ali started with data, not guesswork. Lighthouse baselines, performance traces. The numbers screamed trouble: LCP at 4.2s, CLS a chunky 0.18, and TTI dragging at 6.1s. The waterfall told a sordid tale of 180KB vendor chunks, render-blocking fonts summoned via @import, hero images that weighed more than my last vacation, and API calls firing haphazardly.
This wasn’t a minor bug. This was systemic bloat, fueled by a Pages Router setup where nearly every component was slapped with "use client". Framer Motion, chart libraries, toast systems – all loaded globally. Every route paid the price for features only one page needed. Images were basic <img> tags, no WebP, no responsive srcSet, no lazy loading. Fonts were a mess. Code splitting? A myth.
So, what did Ali do? He didn’t rebuild the Tower of Babel. He built alongside it. The masterstroke? Embracing the App Router and its magic: React Server Components (RSC). Sections that don’t need client-side interactivity? Render them on the server. Ship zero JavaScript for those bits. Simple, elegant, and devastatingly effective.
The immediate result? The main route’s client bundle shrank by 35%. That’s not a typo. A huge chunk of dead weight, gone.
Images: No More Bloated Beasts
Every marketing image got the next/image treatment. Width and height specified, so the browser knew to reserve space. Lazy loading for everything below the fold. And the hero image? priority. Next.js handled WebP/AVIF variants automatically. The payoff? LCP sliced in half, down to 2.1s. A visual win that anyone could see. And the hero image, the very thing that caused the initial client panic, was now serving itself properly.
Fonts: Ditching the @import Blight
Next, the font fiasco. Ali yanked the @import statements from CSS. next/font/google took over. Fonts self-host
