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.

job ad

Saby Company
Delebio, Italy

Intermediate

test

Milly
Vienna, Austria

Intermediate

Matching moments

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

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

The performance problem with modern web applications
07:09 MIN

The performance problem with modern web applications

Qwik: Making sure that easy is same as performant

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

How to measure web performance with browser tools
06:20 MIN

How to measure web performance with browser tools

The Illusion of a Performant Web Application

Introducing Interaction to Next Paint as a Core Web Vital
01:58 MIN

Introducing Interaction to Next Paint as a Core Web Vital

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

Optimizing images and fonts for sustainability
26:53 MIN

Optimizing images and fonts for sustainability

Sustainable me. A tale of good design.

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
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
LM
Luis Minvielle
The Best Upcoming IT Webinars
Now that you already know what IT webinars are and how they can help you level up your professional appeal, you might want actually to get into one. Live tech webinars are one of the best ways to stay on top of the latest trends and tools because eit...
The Best Upcoming IT Webinars
CH
Chris Heilmann
Dev Digest 109 -Egg-citing things…
As we are heading into the Easter break, here are some things to spend some time on. There's resources on improving the performance of your code and you hear from the winners of CODE100 Amsterdam what it was like to be on stage. Also, hang tight as t...
Dev Digest 109 -Egg-citing things…
EM
Eli McGarvie
10 Essential Figma Plugins for Frontend Developers in 2023
In 2023, tools for frontend developers drop by the minute, and Figma might be the most visually appealing. The cloud-based UX and UI design tool that simplifies almost any design process recently scored a scanty 20-billion-dollar sale, and it was par...
10 Essential Figma Plugins for Frontend Developers in 2023

From learning to earning

Jobs that call for the skills explored in this talk.