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

Understanding the Core Web Vitals user experience metrics
18:40 MIN

Understanding the Core Web Vitals user experience metrics

Measure and improve frontend performance by using test automation

Focusing on the right metrics for SPA performance
23:40 MIN

Focusing on the right metrics for SPA performance

Lessons learned from building a thriving Vue.js SaaS application

Introducing the three Core Web Vitals metrics
05:17 MIN

Introducing the three Core Web Vitals metrics

What you need to know about Core Web Vitals

Key takeaways for automated performance testing
22:54 MIN

Key takeaways for automated performance testing

Measure and improve frontend performance by using test automation

Optimizing Largest Contentful Paint for faster loading
15:35 MIN

Optimizing Largest Contentful Paint for faster loading

What you need to know about Core Web Vitals

Strategies for optimizing Interaction to Next Paint
43:12 MIN

Strategies for optimizing Interaction to Next Paint

What you need to know about Core Web Vitals

Key resources for learning web performance
03:16 MIN

Key resources for learning web performance

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

Optimizing your site's hosting and HTML head
05:37 MIN

Optimizing your site's hosting and HTML head

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

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

The Journey of a Pixel in a React Application27:01

The Journey of a Pixel in a React Application

Shem Magnezi

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

Jamstack and Web Performance, a match made in heaven

Tamas Piros

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!
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
LM
Luis Minvielle
10 Developer Websites in 2023
As a web developer, you're always investigating how to level up your skills and streamline your workflow. That's why we've gathered a collection of 10 innovative tools that are guaranteed to boost your productivity, enhance your coding abilities, ele...
10 Developer Websites in 2023

From learning to earning

Jobs that call for the skills explored in this talk.