Next.js: The final boss of Web Performance

Your local Lighthouse test shows a perfect 100, but when your app hits the real-world production stage, it’s instant Game Over. Why does Next.js feel so fast in development and yet so easy to break in production? In this talk, we’ll demystify what actually happens between the server and the browser, from SSR and streaming to hydration and Core Web Vitals. You’ll walk away with actionable mental models, common pitfall fixes, and the real strategies needed to conquer Next.js performance at scale.

Transcript

2. PLAYER 1 Estela Franco Role: WebPerf Team: Growth Tool: Chrome Sorceress Services (WebPerf,SEO,CRO,Dev) Power-up: Style Radar DevTools Recalculations 2
3. LEVEL 0 TUTORIAL
4. WHAT IS WEB PERFORMANCE? “Web performance is the objective measurements and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions.” MDN Web Docs
5. CORE WEB VITALS LCP INP CLS loading interactivity visual stability 2.5 s 4s good Thresholds at the p75 of real users 200 ms 500 ms 0.1 needs improvement poor 0.25
6. LEVEL 1 ONCE UPON TIME… A
7. Old days 2010 2013 2016 Backbone · AngularJS React Next.js HTML JS PHP · Java · Rails
8. Old days 2010 2013 2016 Backbone · AngularJS React Next.js HTML JS JS BUILDS IT
9. Old days 2010 2013 2016 Backbone · AngularJS React Next.js DATA RENDER DIFF DOM every change “we diff the return value from the previous call to render with the new one” Why did we build React?, 2013
10. Old days 2010 2013 2016 Backbone · AngularJS React Next.js HTML JS renders React + HYDRATION “a small framework for server-rendered universal JavaScript webapps” Next.js, 2016-10-25
11. THE LIFE BACKEND Request Server render · LCP HTML OF A REQUEST FRONTEND · INP/LCP/CLS JS download Hydration Interaction
12. LEVEL 2 POWER-UPS
13. INVENTORY ? ? ? ? ? ? 2020 2020-22 2022 2022-23 2024 2025 App Router · RSC · font Cache PPR · React Compiler Next.js 13 Next.js 15 Next.js 16 SSG + ISR image · script Streaming · Transitions Next.js 9.3 · 9.5 Next.js 10 · 11 React 18
14. 0 KB OF CLIENT-SIDE JAVASCRIPT (FOR THOSE COMPONENTS) “With Server Components, there’s zero client-side JavaScript needed” Next.js 12 blog, 2021
15. SELECT DIFFICULTY EASY NORMAL HARD
16. LEVEL 3 THE DATA
17. THE CrUX 18.3M origins Mobile · CrUX August 2026, unless stated otherwise DATA HTTP ARCHIVE 270+ TB/month
18. of Next.js sites have good CWV
19. “Big sites use Next.js!”
20. Top 1k Top 10k BY RANK TIER Top 50k Top 100k Top 500k % of sites with good CWV · each tier vs. all sites of that same tier Top 1M All
21. Next.js Top 100k, % of sites passing all three CWV vs. All
22. MARCH 2024 FID INP 1st interaction all of them
23. THE 42% 30% WEB ADAPTED TO INP INP 42% 29% 24% 10% 2024 2025 2026 % of sites with good CWV, Top 100k, mobile, monthly · HTTP Archive Tech Report (CrUX) Aug 2026
24. WHERE IT FAILS -19 points in INP INP LCP % of sites passing each metric separately, Top 100k CLS
25. “CWV only measure hard navigations!”
26. GOOD CWV WITH 40% Next.js 49% SOFT NAVIGATIONS 59% 62% All Top 100k % of sites with good INP, mobile, Top 100k · CrUX Sept 2026, experimental metrics
27. THE GAP, WITH SOFT NAVIGATIONS % of sites with a good metric: hard navigations only → with soft navigations NEXT.JS TOP 100K GAP INP 40% → 49% 59% → 62% -19 → -13 LCP 58% → 69% 72% → 78% -14 → -9 CLS 63% → 74% 74% → 80% -11 → -6 Mobile, Top 100k · CrUX Sept. 2026, experimental metrics
28. LEVEL 4 WHY?
29. “Next.js ships too much JavaScript!”
30. THE LIFE Request Server render BACKEND · HTML LCP OF A REQUEST JS download Hydration Interaction FRONTEND · INP/LCP/CLS
31. ≥ 1.5 MB OF JAVASCRIPT 56% 31% Next.js % of sites shipping 1.5 MB or more of compressed JavaScript, Top 100k the rest
32. GOOD 55% CWV, SAME JAVASCRIPT 50% 42% 32% 30% 29% 30% 19% 250–500 KB 500–800 KB 800 KB–1.5 MB % of sites with good CWV by how much JavaScript they ship, Top 100k 1.5 MB or more
33. YOUR USERS PAY FOR INP 1 ON LOAD hydration TWICE 2 ON EVERY TAP re-render
34. “Next.js is bad!”
35. GOOD REACT / CWV VUE ACROSS TECHNOLOGIES IN THE BROWSER ZERO JS 46.0% 24.5% 25.5% 26.7% Next.js React Vue % of sites with good CWV, Top 100k, mobile, no CMS or stores BY DEFAULT 50.3% 22.5% Nuxt Astro No JS framework
36. LEVEL 5 WHAT ABOUT POWER-UPS? ?
37. “They’re stuck on old versions!”
38. WHICH VERSION ARE THEY ON? 39% 27% 20% 2% < v12 6% 6% v12 v13 v14 Next.js sites, Top 100k · distribution · major upgrades 2025-08 > 2026-08 v15 v16
39. GOOD INP BY VERSION 58% Top 100k 38% 39% 37% 38% 41% v12 v13 v14 v15 v16 % of sites with good INP, Top 100k · Next.js versions · Top 100k, Tech Report
40. “They’re still on Pages Router!”
41. % ON APP ROUTER 68% 50% 53% v14 v15 13% v13 Next.js sites with the router detected in the home page HTML, Top 100k v16
42. APP ROUTER APP ROUTER VS PAGES ROUTER PAGES ROUTER 39.7% 39.1% sites with good INP sites with good INP 0.6 Next.js sites, detected router, Top 100k points of difference
43. "use client" SERVER layout "use Providers Header BROWSER: Page Article Product JS + HYDRATION Menu Price client"
44. LESS HYDRATION, BETTER INP/LCP APP ROUTER SITES % SITES GOOD INP GOOD LCP No content in the HTML (CSR) 14% 37% 38% 0% Server Components 6% 32% 50% 1-25% Server Components 41% 36% 54% 25-75% Server Components 25% 45% 69% Over 75% Server Components 14% 50% 72% App Router sites, Top 100k · % of the content that comes from Server Components, measured in a browser
45. LEVEL 6 THE DEBT
46. “Just read the docs!”
47. ON ON BY DEFAULT? OPT-IN SWC Suspense / streaming Turbopack Transitions App Router image · script · font Server Components Cache Components React Compiler Defaults in Next.js 16 and create-next-app 16.4 · official docs and templates
48. NEXT.JS 13 · 14 ON 3 CACHING 15 16 16.4 OFF OPTIONAL ON* changes in 2 years + 1 next FOR announced * in new create-next-app projects, since 16.4 (October 2026) · Next.js blogs and docs EVERYONE
49. PATCH NEXT.JS params 15 → async cookies → NOTES NEXT.JS 16 middleware → proxy async “There’s currently too many runtimes, configuration options, and rendering methods to have to consider.” Next.js 14 blog, 2023
50. TECH DEBT
51. LEVEL 7 SECRET LEVEL
52. “Let’s just switch to a different stack!”
53. 7% left Next.js in a year All sites with traffic, August 2025 > August 2026
54. WHERE DID THEY GO? 19% Astro 10% WordPress 9% React Router 5% Shopify Plain React 4% TanStack Start 4% Other % of 8,918 sites that left Next.js with data before and after, one destination each 30%
55. CWV CHANGE AFTER +4 Stayed on Next.js +39 Astro +18 WordPress React Router LEAVING -4 +53 Shopify Plain React -4 TanStack Start -3 Other +16 Same sites, all sites with traffic, change in points of % good CWV, Aug 2025 > Aug 2026
56. LEVEL 8 FINAL BOSS
57. NEXT.JS SHARE ×2 10.7% 8.3% 8.0% 5.7% 5.2% 3.2% Top 10k across all sites Top 100k % of origins with traffic (CrUX) using Next.js Top 1M 4.3% 2.0% All
58. REACT.DEV: CREATE CREATING AN APP REACT APP: DEPRECATED (FEB 2025)
59. NEXT.JS https://trends.builtwith.com/framework/Next.js USAGE
60. AI
61. “My users have fast and powerful devices”
62. 73% of mobile visits in Spain: Android StatCounter, Spain, mobile, September 2026 (highest of the last year; range 67–73%)
63. BEST SELLERS IN SPAIN P75 46% 23% 31% over €600 €200-600 under €200 high end mid range low end % of units in the top 20 sales, May 2026 (~48% of the market) · ADSLZone report
64. CPU, SINGLE Geekbench 7 · M2: own measurement · others: Geekbench Browser averages CORE
65. VIVO Y29s 5G 16–128 GB MacBook Pro M5 MacBook Air M2 24 GB vivo Y29s 6 GB Redmi 15C Galaxy A16/A17 4 GB Speedometer 3.1 in Chrome, average of 3 runs (Oct 2026)
67. EMULATION ≠ REALITY
68. FIN?
69. LEVEL 9 NEW GAME+
70. Is Next.js the best choice for YOUR project?
71. QUEST LOG Content or application? What actually needs to hydrate? How much traffic comes from phones like this? Who’ll own performance in 2 years? Would you pick Next.js without knowing it?
72. old days 2010 2013 2016 Backbone · AngularJS React Next.js HTML JS
73. of Next.js sites have good CWV
74. of Next.js sites in the Top 100K have good CWV
75. IMPOSSIBLE IS https://treo.sh/sitespeed/www.cnnbrasil.com.br?formFactor=phone NOTHING
76. https://www.cnnbrasil.com.br/politica/
77. THREE 1 MEASURE 2 UPGRADING 3 ARCHITECTURE IN IDEAS THE ≠ FIELD ADOPTING > FRAMEWORK
78. THE FINAL BOSS WAS FRAMEWORK. NEVER THE
79. THE FINAL BOSS CHOOSING BY WAS… DEFAULT
80. GAME OVER THANK YOU!