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 only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards 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

Using AI to overcome challenges in systems programming
02:49 MIN

Using AI to overcome challenges in systems programming

AI in the Open and in Browsers - Tarek Ziadé

The business case for sustainable high performance
03:34 MIN

The business case for sustainable high performance

Sustainable High Performance: Build It or Pay the Price

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Choosing the right fonts for web legibility and performance
05:41 MIN

Choosing the right fonts for web legibility and performance

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Empathizing with users over chasing engagement metrics
05:24 MIN

Empathizing with users over chasing engagement metrics

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

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

From learning to earning

Jobs that call for the skills explored in this talk.