Please enable JavaScript.

Coggle requires JavaScript to display documents.

Web Vitals - Coggle Diagram

- - - - Most recent is the 2020 version
  - - - A user-centric metric
        
        Measures perceived load speed
        
        Marks the point when the main content has likely loaded
      - Recommended over other metrics
        
        load and DOMContentLoaded events of window
        
        First Meaningful Paint (FMP) and Speed Index (SI) in Lighthouse
        
        First Contentful Paint (FCP)
      - Metric threshold
        
        Render time of the largest image or text block visible within the viewport, relative to when the page first started loading
        
        Should occur within 2.5 seconds
    - - Images that have not yet loaded and text nodes using web fonts during the font block period are not considered "rendered"
      - Current largest contentful element will remain so even if removed from the viewport or the DOM unless a larger element is rendered
      - Browser will stop reporting new entries as soon as the user interacts with the page
      - Only the most recently dispatched PerformanceEntry should be reported to analytics services
      - Since users can open pages in a background tab, it's possible that the largest contentful paint will not happen until the user focuses the tab, which can be much later than when they first loaded it.
      - when possible, it's always recommended to set the Timing-Allow-Origin header
        
        For security reasons, the render timestamp of images is not exposed for cross-origin images that lack the Timing-Allow-Origin header. Instead, only their load time is exposed
      - Only the element's initial size and position in the viewport is considered.
      - While it's often the case that late-loading content is larger than content already on the page, that's not necessarily the case.
      - Browser will dispatch a PerformanceEntry of type largest-contentful-paint any time the largest contentful element changes after rendering a frame
    - - Chrome DevTools
      - Lighthouse
      - WebPageTest
      - JavaScript
        
        To measure LCP in JavaScript, you can use the Largest Contentful Paint API. The following example shows how to create a PerformanceObserver that listens for largest-contentful-paint entries and logs them to the console.
        
        In general, the startTime value of the last entry emitted is the LCP value—however, that is not always the case.
    - - Element types
        
        <img>, <video>, and <image> inside <svg>
        
        Elements with backgrounds loaded via url()
        
        Block elements containing text nodes or inline elements
      - Size calculation
        
        Images
        
        Only the smaller of the visible size or the intrinsic size value is considered if resized
        
        Text elements
        
        Text nodes belong only to its closest block-level ancestor (containing block)
        
        Only the smallest rectangle containing text nodes is considered
        
        All elements
        
        Clipped or hidden overflow is excluded
        
        Part of the element outside the viewport is excluded
        
        Margins, paddings, and borders are excluded
- - - - Chrome User Experience Report
        
        Collects anonymized, real user measurement data for each Core Web Vital
        
        Prevents site owners from having to manually instrument analytics on pages
        
        Powers PageSpeed Insights and Search Console's Core Web Vitals report
        
        Does not provide the detailed, per-pageview telemetry
        
        Setting up real-user monitoring is recommended
      - PageSpeed Insights
      - Search Console (Core Web Vitals report)
      - GoogleChrome/web-vitals JavaScript library
        
        A wrapper around the underlying web APIs that measures each metric in a way that matches how they're reported by all the Google tools
        
        Related tools for reporting and analysis
        
        GoogleChrome/web-vitals-extension
        
        GoogleChromeLabs/web-vitals-report
    - - Chrome DevTools
      - Lighthouse
      - Measuring FID
        
        Tools that load pages in a simulated environment without a user cannot measure FID
        
        Total Blocking Time (TBT) metric is lab-measurable and is an excellent proxy for FID