GitHubGitHub (opens in a new tab)
  • Introduction
    • CLS
    • LCP
    • LCP Image Entropy
    • LCP Sub-Parts
    • Interactions
    • Layout Shift Loading and Interaction
    • Long Animation Frames
    • Longtask
    • TTFB
    • Find above the Fold Lazy Loaded Images
    • Find Non Lazy Loaded Images Outside of the Viewport
    • Find Render Blocking Resources
    • First and Third Party Script Info
    • First and Third Party Script Timings
    • Fonts Preloaded Loaded and Used above the Fold
    • Get Your Head in Order
    • Inline CSS Info and Size
    • Inline Script Info and Size
    • Inline Script Info and Size Including Next Data
    • Resource Hints
    • Script Loading
  • Introduction
    • CLS
    • LCP
    • LCP Image Entropy
    • LCP Sub-Parts
    • Interactions
    • Layout Shift Loading and Interaction
    • Long Animation Frames
    • Longtask
    • TTFB
    • Find above the Fold Lazy Loaded Images
    • Find Non Lazy Loaded Images Outside of the Viewport
    • Find Render Blocking Resources
    • First and Third Party Script Info
    • First and Third Party Script Timings
    • Fonts Preloaded Loaded and Used above the Fold
    • Get Your Head in Order
    • Inline CSS Info and Size
    • Inline Script Info and Size
    • Inline Script Info and Size Including Next Data
    • Resource Hints
    • Script Loading

On This Page

  • Snippet
Interaction
Layout Shift Loading and Interaction

Layout Shift Loading and Interaction

Print all the CLS metrics during page load and when the user interacts with the page:

Snippet

new PerformanceObserver((entryList) => {
  console.log(entryList.getEntries());
}).observe({ type: "layout-shift", buffered: true });
InteractionsLong Animation Frames

MIT 2023 © Joan León | @nucliweb