Ines Akrap

What you need to know about Core Web Vitals

Is your site ready for the new Interaction to Next Paint metric? Learn how to optimize this crucial Core Web Vital and improve your page's responsiveness.

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

Explaining the importance of Core Web Vitals
04:16 MIN

Explaining the importance of Core Web Vitals

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

Understanding the Core Web Vitals user experience metrics
01:58 MIN

Understanding the Core Web Vitals user experience metrics

Measure and improve frontend performance by using test automation

Understanding Core Web Vitals and measurement methods
03:58 MIN

Understanding Core Web Vitals and measurement methods

Core Web Vitals: Put your application into orbit with best practices

Understanding perceived performance and Core Web Vitals
01:53 MIN

Understanding perceived performance and Core Web Vitals

Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)

Focusing on the right metrics for SPA performance
02:49 MIN

Focusing on the right metrics for SPA performance

Lessons learned from building a thriving Vue.js SaaS application

How to measure INP with field and lab tools
07:02 MIN

How to measure INP with field and lab tools

Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)

Why most modern websites fail Google PageSpeed tests
01:34 MIN

Why most modern websites fail Google PageSpeed tests

Rethinking web application design for fastest possible time to interactive

Understanding key frontend performance metrics and KPIs
03:28 MIN

Understanding key frontend performance metrics and KPIs

Frontend Performance Testing in practice

Featured Partners

Related Videos

See all videos
Core Web Vitals: Put your application into orbit with best practices
19:52

Core Web Vitals: Put your application into orbit with best practices

Nicolas Frizzarin

Introducing the W3C Web Sustainability Guidelines
23:21

Introducing the W3C Web Sustainability Guidelines

Ines Akrap

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more
1:10:55

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more

Chris Heilmann, Daniel Cranney & Jason Pamental

What's new in CSS for Designers?
59:20

What's new in CSS for Designers?

Onur Gumus

Next.js Unleashed: Optimizing Web Vitals for superior User Experience
26:44

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

Eileen Fürstenau

Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)
20:30

Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)

Marc Müller

Catching up on the basics you don't really need that much code
14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

Related Articles

View all articles
Daniel Cranney
Web Developer Portfolio Inspiration and Examples - March 2025
Every developer needs a portfolio… of some sort. Whether it’s an all-singing all-dancing portfolio page, a blog, or a simple links page, it’s important to let others know what you have done, what you can do, and how they can contact you. A portfolio ...
Web Developer Portfolio Inspiration and Examples - March 2025
Daniel Cranney, Chris Heilmann
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTML
Inside last week’s Dev Digest 215 . 🗿 Make AI talk like a caveman 🧠 A guide to context engineering for LLMs 🤖 Simon Willison on agentic engineering 🔐 Axios supply chain attack post mortem 🛡️ Designing AI agents to resist prompt injection 🎨 HTML in c...
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTML

From learning to earning

Jobs that call for the skills explored in this talk.

UX Engineers

UX Engineers

Google LLC
Seattle, United States of America

$132-189K
Intermediate
iOS
React