March 07, 2024

Getting a pulse on your Core Web Vitals 🩺 (JS Party #315)

1 hour 24 minutes

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!

Join the discussion

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 – Website, X
Annie Sullivan – Website, Mastodon, X
Amal Hussein – GitHub, X
Nick Nisi – Website, GitHub, Mastodon, X

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!

...more

View all episodes

By Changelog Media

4.4

2929 ratings