Ines Akrap
What you need to know about Core Web Vitals
#1about 5 minutes
Understanding user experience through a city commute analogy
Web navigation is compared to a daily city commute to illustrate user friction points like loading times and the overall importance of speed.
#2about 4 minutes
Introducing the three Core Web Vitals metrics
Core Web Vitals (LCP, CLS, and the upcoming INP) are key metrics Google uses to quantify the user experience of a website.
#3about 6 minutes
Measuring performance with field and lab data
Field data from real user monitoring (RUM) shows if a problem exists, while lab data from tools like Lighthouse helps debug and fix it.
#4about 14 minutes
Optimizing Largest Contentful Paint for faster loading
Improve LCP by optimizing server response time, eliminating resource delays, and managing render-blocking JavaScript and CSS.
#5about 10 minutes
Ensuring visual stability by fixing Cumulative Layout Shift
Prevent unexpected page movement by setting dimensions for images and ads, using the Back/forward cache, and optimizing font loading.
#6about 3 minutes
Understanding the shift from FID to Interaction to Next Paint
Interaction to Next Paint (INP) replaces First Input Delay (FID) to provide a more comprehensive measure of a page's responsiveness.
#7about 7 minutes
Strategies for optimizing Interaction to Next Paint
Improve INP by breaking up long JavaScript tasks, using the facade pattern for heavy components, and yielding to the main thread.
#8about 9 minutes
Navigating web complexity and performance budgets
A discussion on whether the web has become too complex and how performance budgets can help maintain a good user experience.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
03:53 MIN
Explaining the importance of Core Web Vitals
Next.js Unleashed: Optimizing Web Vitals for superior User Experience
18:40 MIN
Understanding the Core Web Vitals user experience metrics
Measure and improve frontend performance by using test automation
03:05 MIN
Understanding Core Web Vitals and measurement methods
Core Web Vitals: Put your application into orbit with best practices
00:05 MIN
Understanding perceived performance and Core Web Vitals
Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)
23:40 MIN
Focusing on the right metrics for SPA performance
Lessons learned from building a thriving Vue.js SaaS application
10:04 MIN
How to measure INP with field and lab tools
Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)
00:58 MIN
Why most modern websites fail Google PageSpeed tests
Rethinking web application design for fastest possible time to interactive
06:47 MIN
Understanding key frontend performance metrics and KPIs
Frontend Performance Testing in practice
Featured Partners
Related Videos
19:52Core Web Vitals: Put your application into orbit with best practices
Nicolas Frizzarin
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
30:07Reducing the carbon footprint of your website
Ines Akrap
25:38Measure and improve frontend performance by using test automation
Ramona Schwering
36:50Frontend Performance Testing in practice
Jonas Kröger
23:21Introducing the W3C Web Sustainability Guidelines
Ines Akrap
Related Articles
View all articles
.webp?w=240&auto=compress,format)
From learning to earning
Jobs that call for the skills explored in this talk.
Senior Frontend Developer - Typescript / Svelte - (f/m/x)
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
