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 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
about 1 year 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

Livecoding with AI thumbnail
31:39
about 2 years ago

Livecoding with AI

Rainer Stropek

Dapr in Practice thumbnail
24:08
about 2 years ago

Dapr in Practice

marcklefter

Upcoming sessions on this topic

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

How We Cut Our API's p99 Latency from Minutes to Under a Second

  • Deepak Agrawal

    Atlassian

    Principal Software Engineer

Open session

AI Is the Easy Part: Why Faster Engineers Don't Make Faster Businesses

  • Bharat Sharma

    Booking

    Senior Engineering Manager

Open session

Build a Zero-Cost AI Agent in Your Browser

  • Aishwarya Mathuria

    Adobe

    Computer Scientist

  • Nishant Thakur

    Adobe

    Senior Computer Scientist

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.