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.

Matching moments

Understanding the Core Web Vitals user experience metrics
01:58 MIN

Understanding the Core Web Vitals user experience metrics

Measure and improve frontend performance by using test automation

Introducing the three Core Web Vitals metrics
04:18 MIN

Introducing the three Core Web Vitals metrics

What you need to know about Core Web Vitals

Explaining the importance of Core Web Vitals
04:16 MIN

Explaining the importance of Core Web Vitals

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

Focusing on the right metrics for SPA performance
02:49 MIN

Focusing on the right metrics for SPA performance

Lessons learned from building a thriving Vue.js SaaS application

Introducing Interaction to Next Paint as a Core Web Vital
03:46 MIN

Introducing Interaction to Next Paint as a Core Web Vital

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

Measuring the impact on Largest Contentful Paint (LCP)
01:28 MIN

Measuring the impact on Largest Contentful Paint (LCP)

Blazing Fast Page Navigation with Speculation Rules

Understanding perceived performance and Core Web Vitals
01:53 MIN

Understanding perceived performance and Core Web Vitals

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

Understanding key frontend performance metrics and KPIs
03:28 MIN

Understanding key frontend performance metrics and KPIs

Frontend Performance Testing in practice

Featured Partners

Related Videos

See all videos
What you need to know about Core Web Vitals
58:59

What you need to know about Core Web Vitals

Ines Akrap

Next.js Unleashed: Optimizing Web Vitals for superior User Experience
26: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 code
14:44

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

Chris Heilmann

Measure and improve frontend performance by using test automation
25:38

Measure and improve frontend performance by using test automation

Ramona Schwering

The Illusion of a Performant Web Application
28:56

The Illusion of a Performant Web Application

Cathrin Möller

Is your Progressive Web App Lazy? How to read and improve your PWA Performance
29: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 UI
22:46

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

Cleyra Uzcategui

Related Articles

View all articles
Chris Heilmann
Dev Digest 116 - WWWAI?
This time, learn how to un-AI Google's search results, what's new on the web, avoid a new security hole and go back to BASICS with us. News and ArticlesWhat a week. Google, Microsoft, OpenAI and many others had their big flagship events announcing th...
Dev Digest 116 - WWWAI?
Luis Minvielle
10 Developer Websites in 2023
As a web developer, you're always investigating how to level up your skills and streamline your workflow. That's why we've gathered a collection of 10 innovative tools that are guaranteed to boost your productivity, enhance your coding abilities, ele...
10 Developer Websites in 2023
Chris Heilmann
Dev Digest 134 - Where pixels sing?
News and ArticlesWeAreDevelopers LIVE Data and Security Day is on Wednesday, 25/09/2024. Learn about OPC UA Updates, Best Practices for Using GitHub Secrets, Passwordless Web 1.5, Emerging AI Security Risks, Data Privacy in LLMs and get a chance to t...
Dev Digest 134 - Where pixels sing?
Chris Heilmann
Dev Digest 126 - * yells at cloud
Hello there, during the WeAreDevelopers World Congress last week many people got stranded on their way home because of the CrowdStrike debacle. But all worked out and we will be back 2025! Tickets are already available and you can try your luck at th...
Dev Digest 126 - * yells at cloud

From learning to earning

Jobs that call for the skills explored in this talk.