Measuring & Analyzing Core Web Vitals

Philip Tellis

October 24, 2024

Tweet Share

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!