$30 off During Our Annual Pro Sale. View Details »

Measuring & Analyzing Core Web Vitals

Measuring & Analyzing Core Web Vitals

Philip Tellis

October 24, 2024
Tweet

More Decks by Philip Tellis

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. LCP reports the render time of the largest image, text

    block, or video visible in the viewport. https://web.dev/articles/lcp
  4. ★ 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?
  5. 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!
  6. 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
  7. < 2.5s Google suggests keeping the value under 2.5s at

    the 75th percentile (that’s about as long as a yawn)
  8. Split elements by Category Scale thresholds for different percentiles %

    of screen covered, render/load time, correlation with other timers
  9. 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
  10. new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) {

    // sources, // value, // hadRecentInput, // lastInputTime, // startTime } }).observe({type: "layout-shift",buffered: true});
  11. 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
  12. Interaction to Next Paint (INP) How long did the user

    have to wait after doing something on the page?
  13. 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.
  14. 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
  15. < 200ms Google suggests keeping the value under 200ms at

    the 75th percentile (blink of an eye is 300ms)
  16. ★ 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…