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
18:40 MIN
Understanding the Core Web Vitals user experience metrics
Measure and improve frontend performance by using test automation
05:17 MIN
Introducing the three Core Web Vitals metrics
What you need to know about Core Web Vitals
03:53 MIN
Explaining the importance of Core Web Vitals
Next.js Unleashed: Optimizing Web Vitals for superior User Experience
23:40 MIN
Focusing on the right metrics for SPA performance
Lessons learned from building a thriving Vue.js SaaS application
06:47 MIN
Understanding key frontend performance metrics and KPIs
Frontend Performance Testing in practice
01:58 MIN
Introducing Interaction to Next Paint as a Core Web Vital
Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)
04:15 MIN
How to measure PWA performance with key tools
Is your Progressive Web App Lazy? How to read and improve your PWA Performance
22:54 MIN
Key takeaways for automated performance testing
Measure and improve frontend performance by using test automation
Featured Partners
Related Videos
58:59What you need to know about Core Web Vitals
Ines Akrap
26:44Next.js Unleashed: Optimizing Web Vitals for superior User Experience
Eileen Fürstenau
20:30Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)
Marc Müller
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
25:38Measure and improve frontend performance by using test automation
Ramona Schwering
28:56The Illusion of a Performant Web Application
Cathrin Möller
29:57Is your Progressive Web App Lazy? How to read and improve your PWA Performance
Laura Morinigo
22:46What’s New and What’s Next in Web UI
Cleyra Uzcategui
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Full Stack Engineer
Climax.eco
Rotterdam, Netherlands
€70-100K
Senior
TypeScript
PostgreSQL
Cloud (AWS/Google/Azure)
Senior Project Manager - Interactive Web Experiences
INDG | Grip
Municipality of Madrid, Spain
Senior
Scrum
Agile Methodologies
Frontend Software Engineer WebIQ & JavaScript
inovex GmbH
Melle, Germany
CSS
HTML
JavaScript
Software Architecture