WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2024 • Aug 20, 2024 • Session details

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

Eileen Fürstenau

Why manually wrestle with asset delivery to fix poor Core Web Vitals? See how four built-in Next.js components effortlessly boost your sluggish React app to a perfect Lighthouse score.

Pause
Mute Enter Fullscreen
#1 about 4 min

Building a personal app and discovering poor performance

Constructing a simple application reveals unexpected front-end performance bottlenecks measured by a low Lighthouse baseline score.

#2 about 3 min

Understanding the business impact of web vitals

Poor website performance negatively impacts overall user experience, customer satisfaction, and search engine optimization rankings.

#3 about 3 min

Exploring core web vitals and user experience metrics

Core web vitals evaluate site health by strictly measuring loading speed, visual stability, and interactive delays.

#4 about 4 min

Leveraging the Next.js framework for performance improvements

Next.js provides built-in server-side rendering and static site generation to effectively overcome standard single-page application bottlenecks.

#5 about 4 min

Optimizing images for stable layouts and visual performance

Replacing standard HTML image tags with the Next.js image component automatically enables responsive resizing and modern formats like WebP.

#6 about 4 min

Preventing render blocking and layout shifts with fonts

Inlining font styles at build time and self-hosting external typefaces prevents extra network requests and eliminates raw text flickering.

#7 about 5 min

Reducing initial bundle size via dynamic component imports

Deferring the loading of heavy third-party libraries and hidden UI elements drastically decreases initial JavaScript execution time.

#8 about 2 min

Managing third-party script execution and loading strategies

Utilizing customized component strategies prevents external analytics scripts from blocking critical page rendering resources.

#9 about 3 min

Achieving a perfect performance score with native features

Implementing simple framework-specific optimizations dramatically improves overall metrics and ensures seamless user experiences across devices.

Matching moments

4:56 min

Internal performance optimizations and Tailwind CSS integration

Francesco Napoletano Francesco Napoletano · World Congress 2024

59 sec

Applying quick performance wins to personal websites

Chris Heilmann · LIVE

3:37 min

Reviewing optimization improvements in Lighthouse

Laura Morinigo · World Congress 2022

2:49 min

Architecture and performance optimizations in React Native

Marc Rousavy Marc Rousavy · World Congress 2025

3:02 min

Modernizing legacy client-rendered components with server-side frameworks

Igor Minar Igor Minar +1 · World Congress 2025

4:30 min

Scaffolding pages and routing single-page applications with Next.js

Josh Goldberg · JS Congress

More from World Congress 2024

Beyond the Hype: Real-World AI Strategies Panel thumbnail
24:07
12 months ago

Beyond the Hype: Real-World AI Strategies Panel

Mike Butcher, Jürgen Müller, Katrin Lehmann, Tobias Regenfuss

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation thumbnail
21:17
almost 2 years ago

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation

Carl Lapierre

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI! thumbnail
31:50
about 2 years ago

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI!

Zaid Zaim

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging thumbnail
29:43
about 2 years ago

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging

Sue Quackenbush

Dapr in Practice thumbnail
24:08
about 2 years ago

Dapr in Practice

marcklefter

Minimising the Carbon Footprint of Workloads thumbnail
27:46
about 2 years ago

Minimising the Carbon Footprint of Workloads

Michael Mueller

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 25, 2026 · 16:50–17:20

Stage 4

Engineering Moneyball: How We Benchmarked Google vs Meta

Jirka Bachel

Co-Founder & CEO

Jirka Bachel
Open session

World Congress 2026 North America

September 25, 2026 · 16:10–16:40

Stage 4

Speed up your CI/CD pipelines by caching build & runtime artifacts

Thijs Feryn

Technical Evangelist at Varnish Software

Thijs Feryn
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 25, 2026 · 14:10–14:40

Stage 7

Why Your iOS App Feels Broken After an Hour: Diagnosing Long-Session Performance on Real Devices

Vasuki Uday Kiran Vudathala

Staff Performance Engineer at ServiceNow

Vasuki Uday Kiran Vudathala

Related videos

Core Web Vitals: Put your application into orbit with best practices thumbnail
19:52
World Congress 2024 • about 2 years ago

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

Nicolas Frizzarin

Catching up on the basics you don't really need that much code thumbnail
14:44
LIVE • over 2 years ago

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

Chris Heilmann

What you need to know about Core Web Vitals thumbnail
58:59
LIVE • almost 3 years ago

What you need to know about Core Web Vitals

Ines Akrap

The Journey of a Pixel in a React Application thumbnail
27:01
World Congress 2025 • about 1 year ago

The Journey of a Pixel in a React Application

Shem Magnezi

Sleek, Swift, and Sustainable: Optimizations every web developer should consider thumbnail
29:14
World Congress 2024 • about 2 years ago

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

Andreas Taranetz

Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP) thumbnail
20:30
World Congress 2025 • about 1 year ago

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

Marc Müller

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.