Measuring & Analyzing Core Web Vitals

Slide 1

Slide 1 text

Measuring & Analyzing the Core Web Vitals What makes your site feel snappy?

Slide 2

Slide 2 text

Abbé Jean-Antoine Nollet 1700 - 1770 French Clergyman & Budding Electrician Invented one of the ﬁrst Electroscopes (we now call them beacon collectors) L'Abbé Jean Antoine Nollet — Maurice Quentin de La Tour Alte Pinakothek, Munich, Germany Public Domain

Slide 3

Slide 3 text

In 1746, he conducted the ﬁrst ever RUM Experiment

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Core Web VitaLs ★ Largest Contentful Paint ★ Cumulative Layout Shift ★ Interaction to Next Paint

Slide 6

Slide 6 text

https://addyosmani.com/blog/usability/ LOADING A WEBPAGE LCP keeps updating

Slide 7

Slide 7 text

LCP keeps updating 0.3% WHEN DO USERS INTERACT WITH A SITE? 9% 57%

Slide 8

Slide 8 text

Largest Contentful Paint (LCP) When did the biggest thing show up on screen?

Slide 9

Slide 9 text

LCP reports the render time of the largest image, text block, or video visible in the viewport. https://web.dev/articles/lcp

Slide 10

Slide 10 text

★ 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?

Slide 11

Slide 11 text

LCP reporting stops when the user interacts

Slide 12

Slide 12 text

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!

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

< 2.5s Google suggests keeping the value under 2.5s at the 75th percentile (that’s about as long as a yawn)

Slide 15

Slide 15 text

Split elements by Category Scale thresholds for different percentiles % of screen covered, render/load time, correlation with other timers

Slide 16

Slide 16 text

Overlay the timer on an aggregate waterfall.

Slide 17

Slide 17 text

Cumulative Layout Shift (CLS) How much did things move during load?

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Layout Shift = Impact Fraction * Distance Fraction https://nicj.net/cumulative-layout-shift-in-practice/

Slide 20

Slide 20 text

https://nicj.net/cumulative-layout-shift-in-practice/

Slide 21

Slide 21 text

https://nicj.net/cumulative-layout-shift-in-practice/

Slide 22

Slide 22 text

Layout Shift = 0.5 * 0.2 = 0.1 https://nicj.net/cumulative-layout-shift-in-practice/

Slide 23

Slide 23 text

new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // sources, // value, // hadRecentInput, // lastInputTime, // startTime } }).observe({type: "layout-shift",buffered: true});

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

< 0.1 Google suggests keeping the value under 0.1 at the 75th percentile

Slide 26

Slide 26 text

Look at LoAF* entries & Resource Downloads that happen at the time of a layout shift.

Slide 27

Slide 27 text

CLS reporting never stops!

Slide 28

Slide 28 text

Interaction to Next Paint (INP) How long did the user have to wait after doing something on the page?

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

< 200ms Google suggests keeping the value under 200ms at the 75th percentile (blink of an eye is 300ms)

Slide 32

Slide 32 text

★ 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…