Nicolas Frizzarin
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
01:58 MIN
Understanding the Core Web Vitals user experience metrics
Measure and improve frontend performance by using test automation
04:18 MIN
Introducing the three Core Web Vitals metrics
What you need to know about Core Web Vitals
04:16 MIN
Explaining the importance of Core Web Vitals
Next.js Unleashed: Optimizing Web Vitals for superior User Experience
02:49 MIN
Focusing on the right metrics for SPA performance
Lessons learned from building a thriving Vue.js SaaS application
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)
01:28 MIN
Measuring the impact on Largest Contentful Paint (LCP)
Blazing Fast Page Navigation with Speculation Rules
01:53 MIN
Understanding perceived performance and Core Web Vitals
Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)
03:28 MIN
Understanding key frontend performance metrics and KPIs
Frontend Performance Testing in practice
Featured Partners
Related Videos
58:59What you need to know about Core Web Vitals
Ines Akrap
20:30Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)
Marc Müller
26:44Next.js Unleashed: Optimizing Web Vitals for superior User Experience
Eileen Fürstenau
29:57Is your Progressive Web App Lazy? How to read and improve your PWA Performance
Laura Morinigo
25:38Measure and improve frontend performance by using test automation
Ramona Schwering
28:56The Illusion of a Performant Web Application
Cathrin Möller
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
36:50Frontend Performance Testing in practice
Jonas Kröger
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Speech Processing Solutions
Vienna, Austria
Intermediate
CSS
HTML
JavaScript
TypeScript
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
Kresse & Discher GmbH
Offenburg, Germany
Intermediate
Senior
CSS
Figma
JavaScript
Lotum media GmbH
Bad Nauheim, Germany
Senior
Node.js
JavaScript
TypeScript
Peter Park System GmbH
München, Germany
Senior
Python
Docker
Node.js
JavaScript
Head-on Solutions GmbH
Nürnberg, Germany
Junior
Intermediate
CSS
Jest
Vue.js
infomax websolutions GmbH
Grassau, Germany
Intermediate
Senior
CSS
HTML
JavaScript
TypeScript
infomax websolutions GmbH
Grassau, Germany
Senior
Vue.js
Angular
JavaScript
TypeScript