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

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

Nicolas Frizzarin

Flawless unit tests mean nothing if poor performance drives users away. Master Core Web Vitals to optimize LCP, eliminate layout shifts, and conquer interaction latency before deployment.

Pause
Mute Enter Fullscreen
#1 about 2 min

Understanding user dissatisfaction with web application performance

Materializing subjective user experience differences into concrete web performance issues helps developers catch and fix loading problems early.

#2 about 2 min

Measuring core web vitals through real user monitoring

Collecting field metrics with the web vitals JavaScript library and custom providers enables real-user performance tracking.

#3 about 2 min

Analyzing device variability using lab environment tools

Using lab tools like Lighthouse uncovers how variable network conditions and device capabilities impact rendering speed.

#4 about 2 min

Defining the largest contentful paint performance metric

Measuring the time it takes to render the largest text block or image determines initial content layout performance.

#5 about 4 min

Strategies for identifying and improving LCP components

Splitting content loading into distinct phases and adopting preloading techniques lowers the overall browser render delay.

#6 about 2 min

Causes of cumulative layout shift and screen instability

Unsized images, dynamic content injection, and web fonts frequently disrupt visual stability and ruin reading focus.

#7 about 2 min

Techniques for sizing elements and stabilizing visual layouts

Reserving static space for dynamic elements and configuring CSS aspect ratios prevents unexpected layout shifts during component rendering.

#8 about 3 min

Understanding interaction to next paint input delays

Replacing first input delay, the new interaction metric evaluates how JavaScript execution blocks the main thread from updating interfaces.

#9 about 3 min

Breaking up long javascript tasks to improve INP

Deferring non-critical execution with timeouts and yielding to the scheduler prevents interaction overlap and unblocks UI updates.

Matching moments

2:14 min

Understanding core Web Vitals for user experience

Ramona Schwering Ramona Schwering · World Congress 2023

7:26 min

Measuring virtual user experience with core web vitals

Ines Akrap Ines Akrap · LIVE

2:10 min

Exploring core web vitals and user experience metrics

Eileen Fürstenau Eileen Fürstenau · World Congress 2024

1:48 min

Evolving core web vitals and interaction metrics

Marc Müller Marc Müller · World Congress 2025

2:03 min

Measuring true user experience with Core Web Vitals

Carly Richmond Carly Richmond · Europe 2026 Virtual

1:27 min

Measuring speculative rendering impacts with Core Web Vitals

Medhat Dawoud Medhat Dawoud · World Congress 2025

More from World Congress 2024

Beyond the Hype: Real-World AI Strategies Panel thumbnail
24:07
12 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
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

Dapr in Practice thumbnail
24:08
about 2 years ago

Dapr in Practice

marcklefter

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

Minimising the Carbon Footprint of Workloads

Michael Mueller

Related videos

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

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

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

Eileen Fürstenau

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

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

Measure and improve frontend performance by using test automation thumbnail
25:38
World Congress 2023 • about 3 years ago

Measure and improve frontend performance by using test automation

Ramona Schwering

Is your Progressive Web App Lazy? How to read and improve your PWA Performance thumbnail
29:57
World Congress 2022 • over 4 years ago

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

Laura Morinigo

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.