Measuring & Analyzing Core Web Vitals

Transcript

1. Measuring & Analyzing the Core Web Vitals What makes your site feel snappy?
2. Abbé Jean-Antoine Nollet 1700 - 1770 French Clergyman & Budding Electrician Invented one of the first Electroscopes (we now call them beacon collectors) L'Abbé Jean Antoine Nollet — Maurice Quentin de La Tour Alte Pinakothek, Munich, Germany Public Domain
3. In 1746, he conducted the first ever RUM Experiment
4. Philip Tellis Principal RUM Distiller @ Akamai • Creator of mPulse and tinkerer of the data • Author of the OpenSource boomerang RUM library social:@bluesmoon ⦿ github:@bluesmoon speakerdeck:@bluesmoon
5. Core Web VitaLs ★ Largest Contentful Paint ★ Cumulative Layout Shift ★ Interaction to Next Paint
6. https://addyosmani.com/blog/usability/ LOADING A WEBPAGE LCP keeps updating
7. LCP keeps updating 0.3% WHEN DO USERS INTERACT WITH A SITE? 9% 57%
8. Largest Contentful Paint (LCP) When did the biggest thing show up on screen?
9. LCP reports the render time of the largest image, text block, or video visible in the viewport. https://web.dev/articles/lcp
10. ★ Render time ★ Foreground or background Images including inline ★ “Largest” is related to rendered screen size ★ Text nodes ★ Only rendered portions after clipping ★ Not related to download time ★ No CSS gradient backgrounds ★ No placeholders or low entropy images ★ Nothing invisible ★ Text nodes using Web Fonts during the Font block period What does this include / exclude?
11. LCP reporting stops when the user interacts
12. new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // element, id, url, // renderTime, loadTime, size } }).observe({ type: "largest-contentful-paint", buffered: true }); performance.getEntriesByType("largest-contentful-paint") is deprecated!
13. Object Structure • element: A reference to the DOM element that was painted • id: The id attribute of the element • url: The Url for images. This might also be a data uri. • renderTime: The relative timestamp when the object was rendered, 0 for cross-origin objects without T-A-O. • loadTime: The relative timestamp when the object was loaded. • size: The number of square pixels rendered (height x width) https://developer.mozilla.org/en-US/docs/Web/API/LargestContentfulPaint
14. < 2.5s Google suggests keeping the value under 2.5s at the 75th percentile (that’s about as long as a yawn)
15. Split elements by Category Scale thresholds for different percentiles % of screen covered, render/load time, correlation with other timers
16. Overlay the timer on an aggregate waterfall.
17. Cumulative Layout Shift (CLS) How much did things move during load?
18. CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page. https://web.dev/articles/cls Layout Shift is a fractional value between 0 and 1
19. Layout Shift = Impact Fraction * Distance Fraction https://nicj.net/cumulative-layout-shift-in-practice/
20. https://nicj.net/cumulative-layout-shift-in-practice/
21. https://nicj.net/cumulative-layout-shift-in-practice/
22. Layout Shift = 0.5 * 0.2 = 0.1 https://nicj.net/cumulative-layout-shift-in-practice/
23. new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // sources, // value, // hadRecentInput, // lastInputTime, // startTime } }).observe({type: "layout-shift",buffered: true});
24. Object Structure • sources: A list of Layout Shift Attributions: ◦ node: The node that shifted; Null if no longer in the DOM ◦ previousRect, currentRect • startTime: Relative timestamp when the layout shift started. • value: The layout shift value. • lastInputTime: Relative timestamp of the most recent excluding input. • hadRecentInput: true if the above was less than 500ms https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift
25. < 0.1 Google suggests keeping the value under 0.1 at the 75th percentile
26. Look at LoAF* entries & Resource Downloads that happen at the time of a layout shift.
27. CLS reporting never stops!
28. Interaction to Next Paint (INP) How long did the user have to wait after doing something on the page?
29. INP is a measure of the page’s overall responsiveness to user interactions. https://web.dev/articles/inp INP is the (approx) longest observed interaction latency so far.
30. new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // target (null if removed), // duration, // startTime, // processingStart, // processingEnd } }).observe({ type: "event", buffered: true, durationThreshold: 16 }); https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming
31. < 200ms Google suggests keeping the value under 200ms at the 75th percentile (blink of an eye is 300ms)
32. ★ Includes a start time & duration ★ Can collect this value incrementally to identify all INP durations on the page ★ You need to maintain your own interaction buffer. ★ Remember to reset the buffer for multiple transitions in a SPA. ★ Not all pages have an interaction. ★ Disable your listener if the page is not visible Notes…
33. LoAF* / Resources / Errors that overlap INP start → end might be interesting.
34. Why?
35. It’s not (just) SEO!
36. LCP is negatively correlated with retention rate ρ=-0.80
37. CLS is strongly correlated with reload rate ρ=0.84
38. INP is strongly correlated with rage clicking ρ=0.83
39. Happier users stick around longer!
40. Thank You!