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

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

Marc Müller

Generic loaders might pass INP thresholds, but they destroy perceived performance. Learn to mask backend latency entirely using optimistic UI patterns and React 19.

Pause
Mute Enter Fullscreen
#1 about 2 min

Understanding perceived performance and user experience

Focusing on the experience after a page loads creates a highly responsive foundation for users.

#2 about 2 min

Evolving core web vitals and interaction metrics

Google core web vitals shifted from measuring first input delay to focusing on overall session interactivity.

#3 about 3 min

Defining interaction to next paint and input components

Interaction to next paint evaluates input delay, processing time, and presentation delay across the longest user actions.

#4 about 4 min

Measuring interaction to next paint with field data

Retrieving user metrics through Chrome data uncovers the exact element interactions causing slow responses in production environments.

#5 about 1 min

Simulating slow interaction segments using lab tools

Profiling specific user inputs locally via DevTools helps accurately isolate the exact phase stalling an interaction.

#6 about 3 min

Addressing network latency impacts on frontend processing times

Waiting for backend responses during interactions causes rendering delays that simple loading spinners fail to effectively mask.

#7 about 3 min

Implementing optimistic updates to boost perceived responsiveness

Presenting assumed successful visual outcomes before network completion immediately neutralizes perceived wait times.

#8 about 2 min

Combining frontend optimistic caching with targeted loading states

Selectively applying loading indicators for strict values alongside immediate visual updates heavily minimizes user friction.

#9 about 4 min

Assessing architectural criteria for safe optimistic updates

Evaluating success probability, simple error rollbacks, and upfront data availability ensures interfaces handle rapid interaction expectations without overpromising.

Matching moments

2:00 min

Engineering instant UI feedback using optimistic state

Aurora Scharff Aurora Scharff · WWC 2025

4:50 min

Balancing interactivity and load times with pre-rendering

Andreas Taranetz Andreas Taranetz · WWC 2024

2:51 min

Prioritizing cumulative layout shifts and painting measurements

Abdelrahman Awad Abdelrahman Awad · WWC 2025

3:52 min

Optimizing browser performance using modern island architecture

Florian Rappl · LIVE

3:07 min

Optimizing largest contentful paint by deferring heavy UI components

Chris Heilmann +2 · LIVE

3:32 min

Enhancing runtime performance through interface interactions

Cathrin Möller · WWC 2023

More from World Congress 2025

GenAI Security: Navigating the Unseen Iceberg thumbnail
24:33
10 months ago

GenAI Security: Navigating the Unseen Iceberg

Maish Saidel-Keesing

Behind the Code: How Women Are Powering the Future of AI thumbnail
30:28
12 months ago

Behind the Code: How Women Are Powering the Future of AI

Alexandra Wudel, Laura Moritz, Madalina Florean

The AI Hype Filter: What’s Real, What’s Investable, What’s Noise? thumbnail
28:12
12 months ago

The AI Hype Filter: What’s Real, What’s Investable, What’s Noise?

Justus Lumpe, Konstantin Vinogradov, Nils Eiteneyer, Stephan Wirris

AI in Leadership: How Technology is Reshaping Executive Roles thumbnail
28:19
12 months ago

AI in Leadership: How Technology is Reshaping Executive Roles

Bernd Datler, Jasmin Kaiser, Jeff Hausmann, Sonja Alvarez

The AI-Ready Stack: Rethinking the Engineering Org of the Future thumbnail
28:09
12 months ago

The AI-Ready Stack: Rethinking the Engineering Org of the Future

Alex Laubscher, Jan Oberhauser, Keno Dreßel, Mirko Novakovic

AI Sovereignty: What Does It Take? thumbnail
29:13
12 months ago

AI Sovereignty: What Does It Take?

Boris Hecker, Clemens Wasner, Robin Hermann, Sonja Alvarez

Upcoming sessions on this topic

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

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

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

Engineering the Pivot: How Creative Strategy Solves the Hard Problems of AI Accuracy and Scale

Shruti Tiwari

AI/ML product manager, Dell

Shruti Tiwari
Open session

World Congress 2026 North America

Offloading IoT State: Solving the Memory Crisis on Legacy Hardware

Pravin Nagare

Senior Software Engineer, Roku

Pravin Nagare
Open session

World Congress 2026 North America

Proactive AI That Doesn’t Annoy Users: Building Context-Aware Notification Systems

Raju Dandigam Dandigam

Engineering Manager at Navan

Raju Dandigam Dandigam

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

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 Illusion of a Performant Web Application thumbnail
28:56
WWC 2023 • almost 3 years ago

The Illusion of a Performant Web Application

Cathrin Möller

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

Next.js Unleashed: Optimizing Web Vitals for superior User Experience thumbnail
26:44
WWC 2024 • almost 2 years ago

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

Eileen Fürstenau

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

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.