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

What if your UI updated instantly, before the network even responded? Learn how optimistic updates can dramatically improve your app's INP score and user experience.

#1about 2 minutes

Understanding perceived performance and Core Web Vitals

Web performance has shifted from focusing on initial page load to the entire user experience, as reflected in the evolution of Google's Core Web Vitals.

#2about 4 minutes

Introducing Interaction to Next Paint as a Core Web Vital

Interaction to Next Paint (INP) replaces First Input Delay (FID) to measure the responsiveness of all user interactions throughout a session, not just the first one.

#3about 4 minutes

Breaking down the three phases of a user interaction

An interaction consists of input delay, processing time, and presentation delay, with a total duration under 200ms considered good for INP.

#4about 7 minutes

How to measure INP with field and lab tools

Use field data from Chrome User Experience Report (Crux) and the web-vitals JS library, and lab tools like Lighthouse to identify and reproduce slow interactions.

#5about 4 minutes

Addressing network latency's impact on INP

Network requests made during an interaction's processing time can significantly increase INP, and while loading states fix the metric, they don't improve perceived performance.

#6about 4 minutes

Implementing optimistic UI for instant user feedback

Optimistic UI improves perceived performance by immediately showing the successful result of an action while the network request completes in the background.

#7about 2 minutes

Combining optimistic UI with loading states for complex interfaces

A hybrid approach uses optimistic updates for low-risk changes and traditional loading states for critical actions like price calculations to balance speed and accuracy.

#8about 5 minutes

A framework for deciding when to use optimistic UI

Apply optimistic UI only when the action has a high success rate, errors can be easily rolled back, and enough information is available to present an accurate update.

#9about 5 minutes

Conclusion: Always prioritize clear user feedback

Whether using optimistic UI or not, the ultimate goal is to keep the user informed about the status of their interactions to build trust and improve perceived performance.