Eileen Fürstenau

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

A simple wine shuffler app scored a dismal 52 on Lighthouse. See the step-by-step Next.js optimizations that skyrocketed its performance to a near-perfect 99.

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

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

See all videos
Core Web Vitals: Put your application into orbit with best practices19:52

Core Web Vitals: Put your application into orbit with best practices

Nicolas Frizzarin

Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)20:30

Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)

Marc Müller

What you need to know about Core Web Vitals58:59

What you need to know about Core Web Vitals

Ines Akrap

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

The Illusion of a Performant Web Application28:56

The Illusion of a Performant Web Application

Cathrin Möller

Sleek, Swift, and Sustainable: Optimizations every web developer should consider29:14

Sleek, Swift, and Sustainable: Optimizations every web developer should consider

Andreas Taranetz

Jamstack and Web Performance, a match made in heaven42:04

Jamstack and Web Performance, a match made in heaven

Tamas Piros

The Journey of a Pixel in a React Application27:01

The Journey of a Pixel in a React Application

Shem Magnezi

Related Articles

View all articles
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond
DC
Daniel Cranney
Dev Digest 190: GitHub A11Y action, >12s Sora 2 videos and 42 CSS units!
Inside last week’s Dev Digest 190 . 🙅 Developers don’t trust AI, and that’s a good thing 🤖 Why everyone is talking about AI agents 🔓 Autonomous AI hacking and the future of cyber security 😨 Windows 10 support ends, millions of PC’s fall off a securi...
Dev Digest 190: GitHub A11Y action, >12s Sora 2 videos and 42 CSS units!

From learning to earning

Jobs that call for the skills explored in this talk.