Optimizing Core Web Vitals on a News Feed
Going from a 62 Lighthouse performance score to 98. The specific optimizations that mattered.
Bytes Team
News feeds are performance nightmares: lots of images, lots of interactivity, often lots of third-party scripts. We started at 62 on Lighthouse Performance; we're now at 98.
Largest Contentful Paint (LCP)
The hero image on the first slide was our LCP target. Three changes brought it from 3.2s to 0.9s:
- Use
next/imagewithpriorityon slide index 0 only - Serve images through Unsplash's CDN with explicit size params
- Preconnect to the image CDN in the root layout
Cumulative Layout Shift (CLS)
Our initial CLS was 0.34 — a disaster. Caused by two things: images loading with no explicit dimensions, and the Playfair Display font swapping in and shifting text.
The fix was mundane but effective: every Image gets fill + sizes, and we use next/font with display: swap to reserve the correct space. CLS is now 0.02.
Interaction to Next Paint (INP)
The hardest metric. Our feed had a 380ms INP on slow mobile because the like/save mutation blocked the main thread. The fix was to move from raw useState + fetch to TanStack Query's useMutation, which schedules optimistic updates in a way that doesn't block paint.
Last updated:
