# WebPerf Snippets

> Tested JavaScript snippets that measure and debug web performance. Your AI agent runs them for you, or you run them yourself in DevTools.
> Source: https://webperf-snippets.net
> Version: 2.0.1
> Each link points to the Markdown version of a page; the HTML page is at the same URL without .md.

---

## Guides

- [WebPerf Snippets CLI](https://webperf-snippets.net/CLI.md)
- [DevTools extension](https://webperf-snippets.net/extension.md)
- [Which snippet should I use?](https://webperf-snippets.net/which-snippet.md)

## Core Web Vitals

- [Cumulative layout shift (CLS)](https://webperf-snippets.net/CoreWebVitals/CLS.md)
  Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual stability. CLS tracks how much the page layout shifts unexpectedly during its lifetime, providing a single score that represents the largest burst of unexpected layout shifts.

- [Interaction to next paint (INP)](https://webperf-snippets.net/CoreWebVitals/INP.md)
  Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness. INP evaluates how quickly a page responds to user interactions throughout the entire page visit, replacing First Input Delay (FID) as a Core Web Vital in March 2024.

- [LCP image entropy](https://webperf-snippets.net/CoreWebVitals/LCP-Image-Entropy.md)
  Checks if images qualify as LCP candidates based on their entropy (bits per pixel). Since Chrome 112, low-entropy images are ignored for LCP measurement.

- [LCP subparts](https://webperf-snippets.net/CoreWebVitals/LCP-Subparts.md)
  Breaks down Largest Contentful Paint into its four phases to identify optimization opportunities. Understanding which phase is slowest helps you focus your optimization efforts where they'll have the most impact. Based on the Web Vitals Chrome Extension.

- [LCP trail](https://webperf-snippets.net/CoreWebVitals/LCP-Trail.md)
  Tracks every LCP candidate element during page load and highlights each one with a distinct pastel-colored dashed outline, so you can see the full trail from first candidate to final LCP.

- [LCP video candidate](https://webperf-snippets.net/CoreWebVitals/LCP-Video-Candidate.md)
  Detects whether the LCP element is a <video> and audits the poster image configuration, the most common source of avoidable LCP delay when video is the hero element.

- [Largest contentful paint (LCP)](https://webperf-snippets.net/CoreWebVitals/LCP.md)
  Quick check for Largest Contentful Paint, a Core Web Vital that measures loading performance. LCP marks when the largest content element becomes visible in the viewport.

## Loading

- [Back/forward cache (bfcache)](https://webperf-snippets.net/Loading/Back-Forward-Cache.md)
  Analyzes Back/Forward Cache (bfcache) to determine if your page is eligible for instant back/forward navigations. When bfcache works, users get instant (0ms) page loads when using browser back/forward buttons, dramatically improving perceived performance.

- [CSS media queries analysis](https://webperf-snippets.net/Loading/CSS-Media-Queries-Analysis.md)
  Analyze all @media rules in CSS stylesheets that target viewports bigger than a breakpoint (default: 768px). Narrower screens download and parse that CSS without using it. The snippet groups the rules by distinct query, the way CSS analytics tools such as Project Wallace report at-rules, and breaks them down by stylesheet.

- [Cache strategy analysis](https://webperf-snippets.net/Loading/Cache-Strategy-Analysis.md)
  Audits HTTP caching strategies across all page resources, identifying resources without cache, short-lived cache configurations, cache anti-patterns, and CDN cache hit rates. Provides a cache efficiency score and actionable recommendations.

- [Client-side redirect detection](https://webperf-snippets.net/Loading/Client-Side-Redirect-Detection.md)
  Detects client-side redirects that add unnecessary latency to page load and impact Core Web Vitals, particularly LCP. Client-side redirects implemented via JavaScript or SPA routers can add seconds to the critical rendering path, yet they're often invisible to standard monitoring tools.

- [Compression audit](https://webperf-snippets.net/Loading/Compression-Audit.md)
  Finds text-based resources (JavaScript, CSS, HTML, JSON, SVG, XML and TTF/OTF fonts) served without HTTP compression, and estimates how many bytes gzip or brotli would save. Compressing text typically shrinks it by 60–80%, so an uncompressed script or stylesheet is one of the cheapest fixes for slow loading.

- [Content visibility](https://webperf-snippets.net/Loading/Content-Visibility.md)
  Detect and analyze all elements using content-visibility: auto on a page. This CSS property is a powerful rendering optimization that allows browsers to skip layout and painting work for offscreen content, significantly improving initial page load performance.

- [Critical CSS detection](https://webperf-snippets.net/Loading/Critical-CSS-Detection.md)
  Analyzes the CSS loading strategy of a page, identifying render-blocking stylesheets, measuring their size against the critical 14 KB budget, and detecting whether critical CSS is properly inlined for above-the-fold content.

- [Event processing time](https://webperf-snippets.net/Loading/Event-Processing-Time.md)
  Analyzes the time spent in each phase of page navigation, from initial redirect to the load event. This helps identify bottlenecks in the page loading process and understand where time is being spent.

- [First contentful paint (FCP)](https://webperf-snippets.net/Loading/FCP.md)
  Quick check for First Contentful Paint, the metric that marks when the browser renders the first piece of DOM content, text, image, canvas, or SVG. FCP measures the user's perception of whether the page is loading.

- [Find above the fold lazy loaded images](https://webperf-snippets.net/Loading/Find-Above-The-Fold-Lazy-Loaded-Images.md)
  Detect images with lazy loading that are incorrectly placed above the fold (in the viewport). Lazy loading above-the-fold images is a common performance anti-pattern that can significantly harm your Largest Contentful Paint (LCP) score.

- [Find images with loading lazy and fetchpriority](https://webperf-snippets.net/Loading/Find-Images-With-Lazy-and-Fetchpriority.md)
  Detects images that have both loading="lazy" and fetchpriority="high" - a contradictory combination that indicates a misconfiguration.

- [Find non lazy loaded images outside of the viewport](https://webperf-snippets.net/Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.md)
  Identifies images that are loaded eagerly but not visible in the initial viewport, representing wasted bandwidth and parsing time that delays page interactivity. The snippet analyzes all <img> elements to find optimization opportunities for lazy loading.

- [Find render-blocking resources](https://webperf-snippets.net/Loading/Find-render-blocking-resources.md)
  Identifies resources that block the browser from rendering the page. These resources must be fully downloaded and processed before the browser can display any content, directly impacting First Contentful Paint (FCP) and Largest Contentful Paint (LCP).

- [First and third party script info](https://webperf-snippets.net/Loading/First-And-Third-Party-Script-Info.md)
  Analyzes all scripts loaded on the page, separating them into first-party (your domain) and third-party (external) scripts. This helps identify the performance impact of external dependencies.

- [First and third party script timings](https://webperf-snippets.net/Loading/First-And-Third-Party-Script-Timings.md)
  Analyzes detailed timing phases for all scripts, comparing first-party vs third-party performance. This helps identify slow connection phases, DNS issues, or server response problems.

- [Fonts preloaded, loaded, and used above the fold](https://webperf-snippets.net/Loading/Fonts-Preloaded-Loaded-and-used-above-the-fold.md)
  Analyzes font loading strategy by comparing preloaded fonts, loaded fonts, and fonts actually used above the fold. This helps identify optimization opportunities and wasted resources.

- [Get your `<head>` in order](https://webperf-snippets.net/Loading/Get-Your-Head-in-Order.md)
  How you order elements in the <head> can have an effect on the (perceived) performance of the page. The order of elements matters because the browser processes them sequentially.

- [Inline CSS info and size](https://webperf-snippets.net/Loading/Inline-CSS-Info-and-Size.md)
  Analyzes all inline <style> tags on the page, measuring their size and identifying optimization opportunities. This helps understand how much CSS is inlined and whether it's being used effectively.

- [Inline script info and size](https://webperf-snippets.net/Loading/Inline-Script-Info-and-Size.md)
  Analyzes all inline <script> tags on the page, measuring their size and identifying potential performance issues. This helps understand the impact of inline JavaScript on page load.

- [JavaScript execution time breakdown](https://webperf-snippets.net/Loading/JS-Execution-Time-Breakdown.md)
  Identifies where JavaScript time goes during page load: network download vs browser parsing. Shows which scripts delay domInteractive (TTI proxy) and flags code splitting opportunities.

- [Prefetch resource validation](https://webperf-snippets.net/Loading/Prefetch-Resource-Validation.md)
  Detects potential performance issues with rel="prefetch" resource hints by analyzing quantity, size, type, and appropriateness of prefetched resources. Excessive or incorrect prefetch usage can waste bandwidth, delay critical resources, and negatively impact mobile users.

- [Priority hints audit](https://webperf-snippets.net/Loading/Priority-Hints-Audit.md)
  Audits all fetchpriority attribute usage across the page, covering non-image resources (scripts, preload links, iframes), fetchpriority="low" analysis, and conflicts between preload and low priority. Identifies the LCP candidate when it lacks fetchpriority="high".

- [Resource hints validation](https://webperf-snippets.net/Loading/Resource-Hints-Validation.md)
  Validates resource hints (preload, preconnect, dns-prefetch) by analyzing which hints are declared and whether the resources or connections are actually used. Detects unused hints that waste browser resources and opportunities to optimize loading.

- [Resource hints](https://webperf-snippets.net/Loading/Resource-Hints.md)
  Analyzes resource hints on the page, checking for proper usage and identifying optimization opportunities. Resource hints help the browser prioritize resource loading for better performance.

- [SSR framework hydration data analysis](https://webperf-snippets.net/Loading/SSR-Hydration-Data-Analysis.md)
  Analyzes hydration data scripts used by SSR frameworks like Next.js, Nuxt, Remix, Gatsby, and others. These scripts contain serialized state that the client needs to "hydrate" the server-rendered HTML into an interactive application.

- [Scripts loading](https://webperf-snippets.net/Loading/Script-Loading.md)
  Analyzes all scripts on the page, showing their loading strategy and identifying potential performance issues. Scripts are often the biggest cause of main thread blocking and delayed rendering. This snippet helps you audit which scripts are blocking the critical rendering path.

- [Server-Timing and Early Hints viewer](https://webperf-snippets.net/Loading/Server-Timing-Early-Hints.md)
  Lists the Server-Timing metrics that the server sends with the document and with each resource, and reports the 103 Early Hints timing of the navigation. These two signals show where the backend spends time before the first byte and whether the server lets the browser start fetching critical resources while it still builds the response.

- [Service worker analysis](https://webperf-snippets.net/Loading/Service-Worker-Analysis.md)
  Analyzes the Service Worker lifecycle, cache behavior, and its performance impact on resource loading. Service Workers can dramatically improve performance through caching strategies, but misconfigured workers can introduce startup delays and degrade TTFB.

- [Speculation rules inspector](https://webperf-snippets.net/Loading/Speculation-Rules-Inspector.md)
  Inspects how a page uses the Speculation Rules API to prefetch and prerender future navigations, and whether the current page was itself prerendered. A prerendered page can activate instantly, which makes navigations feel immediate and changes how load metrics are measured.

- [Time to first byte](https://webperf-snippets.net/Loading/TTFB.md)
  Time to First Byte (TTFB) measures the time from when the user starts navigating to a page until the first byte of the HTML response is received. It's a critical metric that reflects server responsiveness and network latency.

- [Third-party impact by domain](https://webperf-snippets.net/Loading/Third-Party-Impact-by-Domain.md)
  Groups every third-party request by root domain and reports, per domain, the request count, the transfer size, whether any of its requests blocks rendering, and the main-thread time its scripts take inside long animation frames. It answers which third party to fix first.

- [Validate preload on async/defer scripts](https://webperf-snippets.net/Loading/Validate-Preload-Async-Defer-Scripts.md)
  Detects preload resource hints for scripts that use async or defer attributes. This is an anti-pattern that wastes bandwidth and can hurt performance by artificially elevating the priority of resources that should load at lower priority.

- [Webfont usage analyzer](https://webperf-snippets.net/Loading/Webfont-Usage-Analyzer.md)
  Cross-checks every font face the page knows about against the text that renders, and reports which faces are used, which downloaded for nothing, and which never loaded. Each unused font file is bytes the visitor pays for and, when the file is on the critical path, delay before text appears.

## Interaction

- [DOM size and depth](https://webperf-snippets.net/Interaction/DOM-Size-and-Depth.md)
  Measures the total number of DOM elements, the maximum nesting depth, and the parent with the most children, and checks them against the Lighthouse thresholds. The traversal includes open shadow roots.

- [Forced synchronous layout detector](https://webperf-snippets.net/Interaction/Forced-Synchronous-Layout.md)
  Detects the Forced Synchronous Layout (FSL) pattern at runtime, when JavaScript reads geometric properties from the DOM immediately after mutating styles, forcing the browser to perform layout synchronously on the main thread.

- [Input latency breakdown](https://webperf-snippets.net/Interaction/Input-Latency-Breakdown.md)
  Aggregates interaction latency by event type to reveal which phase causes slowness across all interactions with the page. While Interactions shows a per-interaction breakdown in real time, this snippet collects data over time and answers a different question: is click systematically slower than keypress? Is the bottleneck always input delay, or does it vary by event?

- [Interactions](https://webperf-snippets.net/Interaction/Interactions.md)
  Tracks all user interactions in real-time to help debug and improve Interaction to Next Paint (INP). INP measures responsiveness by tracking the latency of all interactions during a page visit. This snippet breaks down each interaction into three phases to identify bottlenecks. Based on the Web Vitals Chrome Extension.

- [Layout shift tracking](https://webperf-snippets.net/Interaction/Layout-Shift-Loading-and-Interaction.md)
  Tracks all layout shifts during page load and user interaction, identifying the elements causing Cumulative Layout Shift (CLS). This debugging-focused snippet logs every shift with detailed information about which elements moved and when.

- [LoAF helpers](https://webperf-snippets.net/Interaction/Long-Animation-Frames-Helpers.md)
  Advanced debugging utilities for Long Animation Frames. While the basic LoAF snippet shows real-time frame data, this helper library provides powerful analysis, filtering, and export capabilities.

- [Long animation frames script attribution](https://webperf-snippets.net/Interaction/Long-Animation-Frames-Script-Attribution.md)
  Analyzes and visualizes which scripts are responsible for blocking the main thread. This snippet categorizes blocking time by script origin (your code, framework, third-party, extensions) and provides actionable insights for optimization.

- [Long animation frames (LoAF)](https://webperf-snippets.net/Interaction/Long-Animation-Frames.md)
  Tracks Long Animation Frames to identify JavaScript and rendering work that blocks the main thread. LoAF is the underlying API that powers INP debugging and provides detailed attribution for slow interactions.

- [Long tasks](https://webperf-snippets.net/Interaction/LongTask.md)
  Tracks tasks that block the main thread for more than 50ms. Long tasks prevent the browser from responding to user input, causing poor Interaction to Next Paint (INP) and sluggish user experience.

- [Scroll performance analysis](https://webperf-snippets.net/Interaction/Scroll-Performance.md)
  Measures scroll jank, frame drops, and event listener configuration to identify what makes scrolling feel laggy or unresponsive. Scroll jank, visible stuttering during scroll, is one of the most common UX problems on the web, especially on mobile.

## Media

- [Image element audit](https://webperf-snippets.net/Media/Image-Element-Audit.md)
  Audits all <img> elements on the page against image performance best practices, covering loading strategy, fetch priority, format modernisation, responsive markup, and CLS prevention.

- [Oversized images](https://webperf-snippets.net/Media/Oversized-Images.md)
  Compares the pixels of each downloaded image file with the pixels the page draws it at (rendered size × devicePixelRatio), and reports the images that are much larger than needed, which waste bytes, and the images that are smaller than needed, which look blurry.

- [SVG embedded bitmap analysis](https://webperf-snippets.net/Media/SVG-Embedded-Bitmap-Analysis.md)
  Scans all SVG resources on the page, both external files and inline <svg> elements, and flags any that contain embedded bitmap images, reporting name, transfer size, compression encoding, and embedded bitmap details.

- [Video element audit](https://webperf-snippets.net/Media/Video-Element-Audit.md)
  Audits all <video> elements on the page against video performance best practices, covering preload strategy, autoplay configuration, format modernisation, CLS prevention, and playback accessibility.

## Resources

- [Network bandwidth & connection quality](https://webperf-snippets.net/Resources/Network-Bandwidth-Connection-Quality.md)
  Network quality directly affects web performance. Segmenting metrics by connection type helps identify whether performance issues are infrastructure-related or affect only users on slower connections.

## DevTools Overrides

- [Fetch & XHR timeline](https://webperf-snippets.net/DevTools-Overrides/Fetch-XHR-Timeline.md)
  Intercepts every fetch() and XMLHttpRequest call made during the page lifecycle and correlates them with the Largest Contentful Paint (LCP) timing.