A sample wine recommendation app built with Next.js reveals a low initial Lighthouse performance score of 52, prompting an investigation into optimization.
Core Web Vitals like LCP, CLS, and INP are defined as key metrics for measuring user experience, loading performance, and visual stability.
Next.js is introduced as a React framework with built-in features like server-side rendering and static site generation that aid performance.
Replacing the standard HTML `<img>` tag with the Next.js `<Image>` component automatically handles resizing, modern formats like WebP, and lazy loading.
The built-in font optimization in Next.js eliminates extra network requests by inlining font CSS at build time, improving load performance.
Defer loading of non-critical JavaScript for third-party libraries and React components by using dynamic imports to reduce the initial bundle size.
The Next.js `<Script>` component provides control over when third-party scripts are loaded and executed to prevent them from blocking page rendering.
After applying several Next.js optimization techniques, the application's Lighthouse performance score improved from 52 to 99.
Sensory-Minds GmbH
Offenbach am Main, Germany
19:52Nicolas Frizzarin
20:30Marc Müller
58:59Ines Akrap
14:44Chris Heilmann
28:56Cathrin Möller
29:14Andreas Taranetz
27:01Shem Magnezi
42:04Tamas Piros
Jobs that call for the skills explored in this talk.
Schwarz Unternehmenskommunikation GmbH & Co. KG
Raum Weinsberg GVV, Germany
Blue Acorn, LLC
Quincy, United States of America
