We are joined by Philip Walton (Google) to discuss the Web Vitals initiative.
Web Vitals is a set of measurement guidelines for creating and optimizing for a great user experience on the web. Core Web Vitals is a subset of these, focusing (as of the time of recording this episode) on the Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
Philip is one of the main contributors to the web-vitals JavaScript library as well as the author of the web.dev documentation for Web Vitals.
In this episode, we discuss Core Web Vitals and their relation to user experience, search engine optimization, and other means of performance measurement. Join us as we try to imagine a world where performance is more than just a means to an end.
Listen to the episode using the player or find it in your favorite podcast service.
Topics
- 00:00:00 – Introduction
- 00:07:08 – Philip explains what the Core Web Vitals are
- 00:16:45 – Real User Monitoring (RUM)
- 00:18:00 – Analytics tools and vendors that offer CWV insights
- 00:18:45 – Chrome User Experience Report
- 00:20:48 – Core Web Vitals as a ranking signal in Google Search
- 00:23:20 – User (and page) experience is subjective; how do e.g. ad blockers impact the data collected into the Chrome UX Report
- 00:26:46 – Do Web Vitals replace or complement “previous” measurements (e.g. Navigation Timing API)
- 00:31:14 – “Gaming” the metrics; will everyone now dash to a perfect CWV score similar to how they did with Lighthouse et al.?
- 00:37:20 – Low-hanging fruit for optimizing the site for CWV purposes
- 00:43:29 – Impact of lazy-loading on Cumulative Layout Shift
- 00:45:03 – Impact of single-page apps on CWV metrics
- 00:52:09 – Could sites be given tools / APIs to “sculpt” CWV metrics, e.g. persuade the browser to ignore poorly performing pages
- 00:55:20 – Will browsers take an active role in improving (or helping sites to improve) user / page experience
- 01:00:35 – If you could change any aspect of the web in terms of page experience, what would you do and why?
- 01:07:49 – How best to follow Philip’s work
- 01:09:02 – Outro
Notes and references
- web-vitals JavaScript library
- Cloudflare Browser Insights
- SpeedCurve
- Akamai mPulse
- New Relic
- Datadog
- Blue Triangle
- Core Web Vitals template for Google Tag Manager
- Track Core Web Vitals In GA4 With Google Tag Manager (Simo Ahava’s Blog)
- Chrome User Experience report
- Page Speed Insights
- Core Web Vitals in Google Search Console
- Lighthouse
- Highlighting great user experiences on the mobile web (Chromium Blog)
- App History API
- Web Vitals (web.dev)
- Philip Walton (personal blog)
- Philip Walton (Twitter)
- Philip Walton (GitHub)