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.
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
JavaScript
Node.js
+1
Matching moments
03:16 MIN
Improving the developer feedback loop with specialized tools
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
03:31 MIN
The value of progressive enhancement and semantic HTML
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
08:07 MIN
Exploring modern JavaScript performance and new CSS features
WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More
02:33 MIN
Why you might not need JavaScript for everything
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
11:10 MIN
The only frontend stack that truly matters
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
04:02 MIN
How a broken frontend culture impacts the web
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
09:00 MIN
Navigating the growing complexity of modern CSS
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
11:32 MIN
The industry's focus on frameworks over web fundamentals
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
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
1:06:20WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
Chris Heilmann, Daniel Cranney & Jan Deppisch
36:50Frontend Performance Testing in practice
Jonas Kröger
30:07Reducing the carbon footprint of your website
Ines Akrap
25:38Measure and improve frontend performance by using test automation
Ramona Schwering
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Visonum GmbH
Remote
Junior
Intermediate
React
Redux
TypeScript
Twin.Link GmbH
Osnabrück, Germany
Intermediate
Senior
React
TypeScript
Almedia
Berlin, Germany
€85-100K
Senior
NestJS
Node.js
Express
TypeScript
+1
