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
18:40 MIN
Understanding the Core Web Vitals user experience metrics
Measure and improve frontend performance by using test automation
03:53 MIN
Explaining the importance of Core Web Vitals
Next.js Unleashed: Optimizing Web Vitals for superior User Experience
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)
06:47 MIN
Understanding key frontend performance metrics and KPIs
Frontend Performance Testing in practice
03:16 MIN
Key resources for learning web performance
Catching up on the basics you don't really need that much code
22:54 MIN
Key takeaways for automated performance testing
Measure and improve frontend performance by using test automation
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
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
1:06:20WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
Chris Heilmann, Daniel Cranney & Jan Deppisch
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)
Cloud Engineer (m/w/d)
fulfillmenttools
Köln, Germany
€50-65K
Intermediate
TypeScript
Google Cloud Platform
Continuous Integration
Frontend Software Engineer WebIQ & JavaScript
inovex GmbH
Melle, Germany
CSS
HTML
JavaScript
Software Architecture