Getting a pulse on your Core Web Vitals 🩺

JS Party: JavaScript, CSS, Web Development

This week, Amal and Nick are joined by Rick Viscomi and Annie Sullivan from the Chrome team to dive into Core Web Vitals, a set of performance metrics geared towards helping developers surface web page quality signals that are key to delivering great user experiences.

We deconstruct the different vitals and learn how they are helpful, as well as introduce the newest vital to hit the scene, Interaction to Next Paint (INP). Join us for a fun and nerdtastic discussion as we dive into the humbling universe of web performance!

Leave us a comment

Changelog++ members save 3 minutes on this episode because they made the ads disappear. Join today!

Sponsors:

• PowerSync – Build local-first web apps — Give users instantly reactive UX with an in-browser database that keeps itself in sync with any backend Postgres. No need to wait for network requests, code complicated caching logic or to maintain in-memory state. Set up is easy, removal too. Try on a generous free plan.
• Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.
• Typesense – Lightning fast, globally distributed Search-as-a-Service that runs in memory. You literally can’t get any faster!
• Sentry – Launch week! New features and products all week long (so get comfy)! Tune in to Sentry’s YouTube and Discord daily at 9am PT to hear the latest scoop. Too busy? No problem - enter your email address to receive all the announcements (and win swag along the way). Use the code CHANGELOG when you sign up to get $100 OFF the team plan.

Featuring:

• Rick Viscomi – Twitter, Website
• Annie Sullivan – Mastodon, Twitter, Website
• Amal Hussein – Twitter, GitHub
• Nick Nisi – Twitter, GitHub, Website

Show Notes:

• Web performance resources
• Why speed matters
• Core Web Vitals docs
• Interaction to Next Paint (INP)
• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• Measuring Core Web Vitals in the field
• web-vitals.js library
• Web Vitals Chrome extension
• PageSpeed Insights
• Chrome UX Report
• Core Web Vitals Tech Report
• In The Loop by Jake Archibald (🔥🔥🔥 Event Loop Talk referenced on show)
• Scheduler API Polyfill
• Scheduler.yield API Origin Trial
• Speedcurve - Web performance monitoring
• WebPageTest - Website performance and optimization test
• WPO stats - Case studies and experiments demonstrating the impact of web performance optimization (WPO)
• Partytown - Run 3rd Party Scripts from a Web Worker

Something missing or broken? PRs welcome!

Chapters

1. It's party time, y'all (00:00:00)

2. JavaScript Party? (00:00:55)

3. Setting definitions (00:07:14)

4. Learn about event loops (00:08:30)

5. Long animation frames? (00:10:42)

6. Responsiveness! (00:12:35)

7. Interactions? (00:14:01)

8. Digging into Core Web Vitals (00:15:35)

9. Tools for Core Web Vitals (00:18:41)

10. Can we gamifying this? (00:25:18)

11. How does this tie to SEO? (00:27:19)

12. Core Web Vitals ALWAYS? (00:31:03)

13. Sponsor: PowerSync (00:33:29)

https://www.powersync.com/changelog

14. Interaction to Next Paint (INP) metrics (00:35:27)

15. INP > FID? (00:40:09)

16. INP pitfalls? (00:45:19)

17. LCP and CLS (00:53:52)

18. Nick on CLS (01:01:09)

19. Brush your teeth (daily!) (01:06:10)

20. Beyond Chrome and other browsers (01:13:28)

21. What does this matter? (01:18:10)

22. Getting in touch (01:22:04)

23. Outro (01:22:47)