Nicolas Frizzarin

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

Is your JavaScript blocking the main thread? Learn how to master the new Interaction to Next Paint metric and build a truly responsive application.

Core Web Vitals: Put your application into orbit with best practices
#1about 2 minutes

Why users are unsatisfied with web applications

Common user feedback points to slow page loads, blinking screens, and delayed interactions as key sources of frustration.

#2about 4 minutes

Understanding Core Web Vitals and measurement methods

Core Web Vitals are Google's metrics for measuring user experience, which can be tracked using field data from real users or lab data for debugging.

#3about 5 minutes

How to optimize the Largest Contentful Paint (LCP)

Improve LCP by breaking down the loading process into four phases and using techniques like preloading resources and optimizing image formats.

#4about 4 minutes

Preventing Cumulative Layout Shift (CLS) for stability

Avoid visual instability by correctly sizing images, reserving space for dynamic content like ads, and managing web font loading.

#5about 4 minutes

Improving Interaction to Next Paint (INP) responsiveness

Optimize INP by breaking up long JavaScript tasks, deferring non-critical code execution, and simplifying complex DOM structures.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

What you need to know about Core Web Vitals58:59

What you need to know about Core Web Vitals

Ines Akrap

Next.js Unleashed: Optimizing Web Vitals for superior User Experience26:44

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

Eileen Fürstenau

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

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

Marc Müller

Catching up on the basics you don't really need that much code14:44

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

Chris Heilmann

Measure and improve frontend performance by using test automation25:38

Measure and improve frontend performance by using test automation

Ramona Schwering

The Illusion of a Performant Web Application28:56

The Illusion of a Performant Web Application

Cathrin Möller

Is your Progressive Web App Lazy? How to read and improve your PWA Performance29:57

Is your Progressive Web App Lazy? How to read and improve your PWA Performance

Laura Morinigo

What’s New and What’s Next in Web UI22:46

What’s New and What’s Next in Web UI

Cleyra Uzcategui

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Engineer

Lightning AI
Charing Cross, United Kingdom

Remote
€53K
React
JavaScript
TypeScript
+1

Front End Engineer

Latent Labs
Charing Cross, United Kingdom

€59K
REST
WebGL
React
Next.js
+6