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
06:47 MIN
Understanding key frontend performance metrics and KPIs
Frontend Performance Testing in practice
03:53 MIN
Explaining the importance of Core Web Vitals
Next.js Unleashed: Optimizing Web Vitals for superior User Experience
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
03:16 MIN
Key resources for learning web performance
Catching up on the basics you don't really need that much code
23:40 MIN
Focusing on the right metrics for SPA performance
Lessons learned from building a thriving Vue.js SaaS application
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
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 Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)
Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL
Lead Fullstack Engineer AI
Hubert Burda Media
München, Germany
€80-95K
Intermediate
React
Python
Vue.js
Langchain
+1
Tech Lead (m/f/d) - Berlin
Patronus Group
Berlin, Germany
Senior
Kotlin
Android
Angular
Spring Boot
Amazon Web Services (AWS)
DevOps Engineer – Kubernetes & Cloud (m/w/d)
epostbox epb GmbH
Berlin, Germany
Intermediate
Senior
DevOps
Kubernetes
Cloud (AWS/Google/Azure)
Web- & Digital Designer - Figma, Elementor & Performance Design
Liftoff Marketing GmbH
Remote
€42K
Intermediate
HTML
Figma
WordPress
+3
Software Engineer III, V8, Performance Engineering
Intermediate
C++
Linux
JavaScript
Google Chrome OS
Natural Language Processing