Eileen Fürstenau
Next.js Unleashed: Optimizing Web Vitals for superior User Experience
#1about 2 minutes
Building a wine app and discovering its poor performance
A sample wine recommendation app built with Next.js reveals a low initial Lighthouse performance score of 52, prompting an investigation into optimization.
#2about 4 minutes
Explaining the importance of Core Web Vitals
Core Web Vitals like LCP, CLS, and INP are defined as key metrics for measuring user experience, loading performance, and visual stability.
#3about 4 minutes
An overview of Next.js and its optimization capabilities
Next.js is introduced as a React framework with built-in features like server-side rendering and static site generation that aid performance.
#4about 3 minutes
Improving performance with the Next.js Image component
Replacing the standard HTML `<img>` tag with the Next.js `<Image>` component automatically handles resizing, modern formats like WebP, and lazy loading.
#5about 4 minutes
How to efficiently load custom fonts in Next.js
The built-in font optimization in Next.js eliminates extra network requests by inlining font CSS at build time, improving load performance.
#6about 4 minutes
Using dynamic imports for modules and components
Defer loading of non-critical JavaScript for third-party libraries and React components by using dynamic imports to reduce the initial bundle size.
#7about 2 minutes
Managing third-party scripts with the Script component
The Next.js `<Script>` component provides control over when third-party scripts are loaded and executed to prevent them from blocking page rendering.
#8about 2 minutes
Achieving a near-perfect score after optimizations
After applying several Next.js optimization techniques, the application's Lighthouse performance score improved from 52 to 99.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
18:40 MIN
Understanding the Core Web Vitals user experience metrics
Measure and improve frontend performance by using test automation
05:17 MIN
Introducing the three Core Web Vitals metrics
What you need to know about Core Web Vitals
22:54 MIN
Key takeaways for automated performance testing
Measure and improve frontend performance by using test automation
15:35 MIN
Optimizing Largest Contentful Paint for faster loading
What you need to know about Core Web Vitals
43:12 MIN
Strategies for optimizing Interaction to Next Paint
What you need to know about Core Web Vitals
03:16 MIN
Key resources for learning web performance
Catching up on the basics you don't really need that much code
05:37 MIN
Optimizing your site's hosting and HTML head
Catching up on the basics you don't really need that much code
06:47 MIN
Understanding key frontend performance metrics and KPIs
Frontend Performance Testing in practice
Featured Partners
Related Videos
19:52Core Web Vitals: Put your application into orbit with best practices
Nicolas Frizzarin
20:30Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)
Marc Müller
58:59What you need to know about Core Web Vitals
Ines Akrap
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
28:56The Illusion of a Performant Web Application
Cathrin Möller
29:14Sleek, Swift, and Sustainable: Optimizations every web developer should consider
Andreas Taranetz
27:01The Journey of a Pixel in a React Application
Shem Magnezi
42:04Jamstack and Web Performance, a match made in heaven
Tamas Piros
From learning to earning
Jobs that call for the skills explored in this talk.
Lead Fullstack Engineer AI
Hubert Burda Media
München, Germany
€80-95K
Intermediate
React
Python
Vue.js
Langchain
+1
Lead Full-Stack Engineer
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
React
Vue.js
Node.js
MongoDB
+1
Angular Developer
Picnic Technologies B.V.
Amsterdam, Netherlands
Intermediate
Senior
RxJS
Angular
TypeScript
Full Stack Engineer
Climax.eco
Rotterdam, Netherlands
€70-100K
Senior
TypeScript
PostgreSQL
Cloud (AWS/Google/Azure)
![Senior Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)
Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL
