Optimizing Core Web Vitals in the Next.js Movies App – A Full Playbook

#LearningPatterns49 | Source: “Learning Patterns” by Lydia Hallie & Addy Osmani

Why Core Web Vitals?
Benchmark: Next.js Movies
Cumulative Results
Optimization Checklist – 11 Changes
Conclusion & Key Take‑aways

Why Core Web Vitals?

Google’s Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS) map directly to perceived speed, responsiveness and stability. The authors dedicated an entire chapter to showing how to move each metric into the “good” range without crippling DX.

Benchmark: Next.js Movies

The team built a fully‑featured movie‑browser powered by the TMDB API—search, filter, favorites, server‑side rendering and authentication—to mimic a real‑world SPA. All experiments below were run against that code‑base.

Cumulative Results

Metric (average across pages)	Before	After	Δ
LCP	3.43 s	2.86 s	−16 %
INP (TBT proxy)	60 ms	20 ms	−67 %
Speed Index	4.2 s	3.5 s	−17 %
Lighthouse Perf	88 %	94 %	+6 pts

Table reproduced from the book’s “Cumulative Improvements” section.

Optimization Checklist – 11 Changes

#	Category	What changed	Why it helps	Key gain
1	Trim heavy deps	Font‑Awesome → `@svgr/webpack`; `react-burger-menu` → custom; `react-select` → `react-select-search`; `react-slick` → `react-glider`; `react-rating` → `react-stars`; native smooth‑scroll polyfill → `react-scroll`	Removes KBs and main‑thread work	LCP −23 %, TBT −51 % (SVG swap)【0†L55-L65】
2	Code‑split UI chrome	Sidebar & comments wrapped in `React.lazy` + `Suspense`	Sends less JS on critical path	TBT −71 %【2†L5-L9】【2†L20-L27】
3	Inline critical CSS, defer the rest	Moved node‑module CSS out of `_app.js`; in‑lined dark/light‑mode CSS	Unblocks rendering, lowers FCP/LCP	2‑5 % faster LCP/TTI【4†L9-L18】【4†L37-L38】
4	Fix CLS completely	Adopted aspect‑ratio boxes for posters	Reserves space before images load	CLS → 0【3†L14-L18】【3†L21-L22】
5	Preconnect origins	TMDB image & API domains	Warms DNS/TLS early	Small but measurable FCP/Speed Index drop【3†L30-L36】【3†L38-L40】
6	Re‑order API calls	Metadata & poster calls run in parallel	Main content arrives sooner	LCP −16 %, Perf +5 pts【3†L43-L50】【3†L65-L70】
7	Preload predictable API response	First‑visit “Popular movies – page 1” fetched during HTML parse	Eliminates post‑render spinner	LCP −12.6 %, TTI −7.8 %【7†L73-L79】【7†L77-L79】
8	Preload logo & trademark	Added media‑conditioned `<link preload>`	Improves repeated nav	FCP & Speed Index −5‑6 %【7†L81-L88】【7†L89-L90】
9	Make SSR responsive	Used `@artsy/fresnel` so server renders all break‑points, client only hydrates one	Reduces JS & CSS per viewport	Faster Speed Index; no functionality loss【7†L91-L96】
10	Lazy‑load carousel CSS	In‑lined Glider styles only on pages that need them	Cuts render‑blocking CSS	Page Perf +2 pts【4†L28-L31】【4†L37-L38】
11	Review loading sequence	Followed Aurora team’s ideal ordering for CSS, fonts, JS, images	Systematic CWV protection	Framework for future regressions【1†L15-L23】【10†L91-L100】

Conclusion & Key Take‑aways

Swap, don’t just tweak: Replacing a whole dependency can deliver outsized wins.
Sequence matters: Critical data and assets must arrive first; speed without order still hurts LCP.
Measure every change: The team ran Lighthouse & WebPageTest after each tweak to avoid regression noise.
Zero CLS is achievable: Reserving space (aspect‑ratio boxes / next/image) is usually enough.
Performance is iterative: These 11 optimizations built on one another—no single silver bullet.