Monitor live Core Web Vitals in Chrome DevTools #DevToolsTips


Barry shows Jecelyn the new Performance panel landing page featuring a live view of your local Core Web Vitals performance. Learn how it can be used to debug LCP issues, use CrUX data to see if you’re debugging a similar experience to your users, and measure INP in real time as you interact with the page.

Chapters:
0:00 – Introduction
0:25 Intro to Live Metrics panel
0:47 The Core Web Vitals
1:10 Investigating slow LCP issues
1:32 Checking your developer experience matches
1:54 Show Chrome User ExperienceReport (CrUX) data
3:00 How field data helps in debugging
3:18 How query params are handled in CrUX data
3:50 Other things to keep in mind when looking at field data
4:24 Identifying INP issues my mentoring interactions

Resources:
Blog post → https://goo.gle/3NDozRD
Documentation → https://goo.gle/3NBiXYf

Watch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

#DevToolTips #ChromeForDevelopers #Chrome

Speaker: Jecelyn Yeen
Products Mentioned: Chrome DevTools