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 · WWC 2024

59 sec

Applying quick performance wins to personal websites

Chris Heilmann · LIVE

3:37 min

Reviewing optimization improvements in Lighthouse

Laura Morinigo · WWC 2022

2:49 min

Architecture and performance optimizations in React Native

Marc Rousavy Marc Rousavy · WWC 2025

3:02 min

Modernizing legacy client-rendered components with server-side frameworks

Igor Minar Igor Minar +1 · WWC 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
10 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
almost 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
almost 2 years ago

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

Sue Quackenbush

Dapr in Practice thumbnail
24:08
almost 2 years ago

Dapr in Practice

marcklefter

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

Minimising the Carbon Footprint of Workloads

Michael Mueller

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

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

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky

Related videos

Core Web Vitals: Put your application into orbit with best practices thumbnail
19:52
WWC 2024 • almost 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 • about 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 • over 2 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
WWC 2025 • 12 months 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
WWC 2024 • almost 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
WWC 2025 • 12 months 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.