webperf-loading

WebPerf: Loading Performance

JavaScript snippets for measuring web performance in Chrome DevTools.

Running a script

1. Run the script with mcp__chrome-devtools__evaluate_script and read the object it returns. The scripts have no console output, so the returned object is the result: script, status and the metric data (value, rating, details, items, issues), as described in references/schema.md.
2. When status is "tracking", the script keeps observing the page. After the interactions, call the function named in getDataFn with another mcp__chrome-devtools__evaluate_script call, for example getINP(), and read the object it returns.
3. When status is "error" or "unsupported", read error: the page may not have loaded yet, or the browser lacks the API.

Without Chrome DevTools MCP, run the same snippet with the webperf-snippets CLI, which loads the page in headless Chromium and prints the same result objects: npx webperf-snippets <url> --snippet <Name> --json, where <Name> is the script name without .js. It needs Playwright and Chromium (npm install --save-dev webperf-snippets playwright, then npx playwright install chromium), and tracking snippets take --interact-script <file> to drive the interactions.

Scripts

• scripts/Back-Forward-Cache.js — Back Forward Cache
• scripts/CSS-Media-Queries-Analysis.js — CSS media queries analysis
• scripts/Cache-Strategy-Analysis.js — Cache Strategy Analysis
• scripts/Client-Side-Redirect-Detection.js — Client Side Redirect Detection
• scripts/Compression-Audit.js — Compression audit
• scripts/Content-Visibility.js — Content visibility
• scripts/Critical-CSS-Detection.js — Critical CSS detection
• scripts/Event-Processing-Time.js — Event processing time
• scripts/FCP.js — First contentful paint (FCP)
• scripts/Find-Above-The-Fold-Lazy-Loaded-Images.js — Find above the fold lazy loaded images
• scripts/Find-Images-With-Lazy-and-Fetchpriority.js — Find images with loading lazy and fetchpriority
• scripts/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js — Find non lazy loaded images outside of the viewport
• scripts/Find-render-blocking-resources.js — Find render-blocking resources
• scripts/First-And-Third-Party-Script-Info.js — First And Third Party Script Info
• scripts/First-And-Third-Party-Script-Timings.js — First and third party script timings
• scripts/Fonts-Preloaded-Loaded-and-used-above-the-fold.js — Fonts preloaded, loaded, and used above the fold
• scripts/Inline-CSS-Info-and-Size.js — Inline CSS info and size
• scripts/Inline-Script-Info-and-Size.js — Inline script info and size
• scripts/JS-Execution-Time-Breakdown.js — JavaScript execution time breakdown
• scripts/Prefetch-Resource-Validation.js — Prefetch resource validation
• scripts/Priority-Hints-Audit.js — Priority hints audit
• scripts/Resource-Hints-Validation.js — Resource Hints Validation
• scripts/Resource-Hints.js — Resource hints
• scripts/SSR-Hydration-Data-Analysis.js — SSR framework hydration data analysis
• scripts/Script-Loading.js — Scripts loading
• scripts/Server-Timing-Early-Hints.js — Server-Timing and Early Hints viewer
• scripts/Service-Worker-Analysis.js — Service worker analysis
• scripts/Speculation-Rules-Inspector.js — Speculation rules inspector
• scripts/TTFB-Resources.js — Time to first byte: Measure TTFB for all resources
• scripts/TTFB-Sub-Parts.js — Time to first byte: Measure TTFB sub-parts
• scripts/TTFB.js — Time to first byte: Measure the time to first byte
• scripts/Third-Party-Impact-by-Domain.js — Third-party impact by domain
• scripts/Validate-Preload-Async-Defer-Scripts.js — Validate Preload Async Defer Scripts
• scripts/Webfont-Usage-Analyzer.js — Webfont usage analyzer

Common Workflows

Complete Loading Performance Audit

When the user asks for a comprehensive loading analysis or "audit loading performance":

1. TTFB.js - Establish baseline server/network performance
2. FCP.js - Check initial render timing
3. Find-render-blocking-resources.js - Identify what's blocking rendering
4. Critical-CSS-Detection.js - Validate CSS strategy
5. Script-Loading.js - Audit script loading patterns
6. Resource-Hints-Validation.js - Check optimization hints

Server/Backend Performance Investigation

When TTFB is slow or the user asks "why is my server slow":

1. TTFB.js - Measure overall TTFB
2. TTFB-Sub-Parts.js - Break down into DNS, connection, server time
3. Service-Worker-Analysis.js - Check for SW overhead impacting TTFB
4. TTFB-Resources.js - Identify slow third-party or API endpoints
5. Server-Timing-Early-Hints.js - Read backend phases from Server-Timing and check 103 Early Hints

Font Loading Optimization

When the user asks about fonts, FOIT, FOUT, or font performance:

1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js - Full font audit
2. Resource-Hints-Validation.js - Verify font preloads are correct
3. Find-render-blocking-resources.js - Check if fonts block rendering
4. Webfont-Usage-Analyzer.js - Find font faces that are unused, never loaded, or use a blocking font-display

Text Compression Audit

When the user asks about compression, gzip, brotli, or large transfer sizes for text resources:

1. Compression-Audit.js - Find text resources served without compression and estimate savings
2. Find-render-blocking-resources.js - Prioritize uncompressed CSS/JS that block rendering
3. TTFB-Resources.js - Check server response of the uncompressed resources

Script Performance Deep Dive

When scripts are suspected to slow down the page:

1. Script-Loading.js - Identify blocking scripts and loading strategy
2. First-And-Third-Party-Script-Info.js - Separate first vs third-party impact
   • Third-Party-Impact-by-Domain.js - Rank third-party domains by render-blocking, main-thread time and size
3. First-And-Third-Party-Script-Timings.js - Diagnose slow script connections
4. JS-Execution-Time-Breakdown.js - Network vs parse/execution time
5. Inline-Script-Info-and-Size.js - Measure inline script overhead
6. Validate-Preload-Async-Defer-Scripts.js - Find preload anti-patterns

Resource Hints & Priority Optimization

When the user wants to optimize resource loading priorities:

1. Resource-Hints.js - Overview of all hints in use
2. Resource-Hints-Validation.js - Verify hints are actually used
3. Priority-Hints-Audit.js - Check fetchpriority usage
4. Prefetch-Resource-Validation.js - Validate prefetch strategy
5. Validate-Preload-Async-Defer-Scripts.js - Find conflicts
6. Speculation-Rules-Inspector.js - Inspect prefetch/prerender rules and prerender activation

CSS Optimization Workflow

When CSS is bloated or blocking rendering:

1. Critical-CSS-Detection.js - Check critical CSS strategy
2. Inline-CSS-Info-and-Size.js - Measure inline CSS overhead
3. CSS-Media-Queries-Analysis.js - Find unused responsive CSS
4. Find-render-blocking-resources.js - Identify blocking stylesheets

SSR/Framework Performance

When analyzing Next.js, Nuxt, Remix, or other SSR frameworks:

1. SSR-Hydration-Data-Analysis.js - Analyze hydration data size
2. Script-Loading.js - Check framework script loading patterns
3. JS-Execution-Time-Breakdown.js - Measure hydration execution cost
4. Content-Visibility.js - Check if content-visibility is used for optimization

Decision Tree

Use this decision tree to automatically run follow-up snippets based on results:

After TTFB.js

• If TTFB > 600ms → Run TTFB-Sub-Parts.js to diagnose where time is spent
• If Service Worker detected → Run Service-Worker-Analysis.js to check for SW overhead
• If TTFB varies significantly across resources → Run TTFB-Resources.js
• If server time dominates TTFB-Sub-Parts.js → Run Server-Timing-Early-Hints.js to see which backend phase is slow

After Server-Timing-Early-Hints.js

• If no Server-Timing metrics found → Recommend adding Server-Timing headers for database, cache and render phases
• If cross-origin resources look hidden → Recommend Timing-Allow-Origin on those responses
• If no 103 Early Hints received and server time is high → Recommend Early Hints for the main stylesheet and LCP image

After FCP.js

• If FCP > 1.8s → Run:
  1. Find-render-blocking-resources.js (CSS/JS blocking)
  2. Critical-CSS-Detection.js (CSS strategy)
  3. Script-Loading.js (blocking scripts)
• If FCP is good but user complains about perceived slowness → Check LCP with webperf-core-web-vitals skill

After Find-render-blocking-resources.js

• If blocking stylesheets found → Run Critical-CSS-Detection.js
• If blocking scripts found → Run:
  1. Script-Loading.js (loading strategy)
  2. Validate-Preload-Async-Defer-Scripts.js (check for anti-patterns)
• If fonts blocking → Run Fonts-Preloaded-Loaded-and-used-above-the-fold.js

After Script-Loading.js

• If many blocking/parser-blocking scripts → Run:
  1. JS-Execution-Time-Breakdown.js (measure execution cost)
  2. First-And-Third-Party-Script-Info.js (identify third-party culprits)
• If third-party scripts detected → Run First-And-Third-Party-Script-Timings.js
• If large inline scripts → Run Inline-Script-Info-and-Size.js

After Resource-Hints-Validation.js

• If unused preloads found → Recommend removing them
• If missing preloads for critical resources → Run:
  1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js (fonts)
  2. Priority-Hints-Audit.js (LCP candidate)
• If preloads on async/defer scripts → Run Validate-Preload-Async-Defer-Scripts.js

After Compression-Audit.js

• If uncompressed CSS/JS found → Run Find-render-blocking-resources.js to see if they block rendering
• If estimated savings > 100KB → Recommend enabling gzip or brotli on the server or CDN
• If corsLimitedAnalysis is true → Report the result as a lower bound and suggest Timing-Allow-Origin on resources you control

After Third-Party-Impact-by-Domain.js

• If a domain is render-blocking → Recommend async, defer, lazy loading or self-hosting; run Script-Loading.js for the loading strategy
• If a domain's main-thread time > 250ms → Run Long-Animation-Frames-Script-Attribution.js (webperf-interaction) to find the functions responsible, and recommend delaying or removing the script
• If many domains with few requests each → Recommend auditing tags and removing unused ones
• If corsLimitedAnalysis is true → Report sizes as a lower bound; use First-And-Third-Party-Script-Timings.js for timings of the hidden resources

After Service-Worker-Analysis.js

• If SW overhead > 100ms → Recommend Navigation Preload API
• If SW caching many resources → Run TTFB-Resources.js to verify cache hits
• If SW not detected but site is SPA/PWA → Recommend implementing SW

After Fonts-Preloaded-Loaded-and-used-above-the-fold.js

• If fonts preloaded but not used above-the-fold → Recommend removing preloads
• If fonts used but not preloaded → Recommend adding preload
• If many font variants loaded → Suggest subsetting or reducing variants, and run Webfont-Usage-Analyzer.js to find the unused ones

After Webfont-Usage-Analyzer.js

• If fonts loaded but not used → Recommend removing the @font-face declaration or the preload
• If faces use font-display: auto or block → Recommend swap or optional, then check Find-render-blocking-resources.js
• If font bytes are high → Suggest subsetting with unicode-range and WOFF2
• If the LCP element is text → Run LCP.js with the webperf-core-web-vitals skill

After First-And-Third-Party-Script-Info.js

• If many third-party scripts (>5) → Run:
  1. First-And-Third-Party-Script-Timings.js (detailed timing)
  2. JS-Execution-Time-Breakdown.js (execution impact)
• If third-party scripts are slow → Recommend async/defer or removal

After SSR-Hydration-Data-Analysis.js

• If hydration data > 100KB → Recommend optimization strategies
• If multiple hydration scripts → Investigate framework configuration
• If large inline hydration data → Consider streaming or chunking

After Priority-Hints-Audit.js

• If LCP candidate lacks fetchpriority="high" → Recommend adding it
• If conflicting priorities (preload + low) → Recommend resolving conflict
• If fetchpriority on non-critical resources → Review priority strategy

After Prefetch-Resource-Validation.js

• If >10 prefetch hints → Recommend reducing to critical resources
• If individual prefetch > 500KB → Question necessity
• If total prefetch > 2MB → Flag as mobile bandwidth concern
• If few or no prefetch hints for likely next navigations → Run Speculation-Rules-Inspector.js to check for prefetch/prerender rules

After Speculation-Rules-Inspector.js

• If no speculation rules found but the site has predictable navigations → Recommend adding prefetch or prerender rules
• If invalid JSON or wasteful rules (eager prerender of many URLs) → Recommend fixing or lowering eagerness to moderate or conservative
• If the page was prerendered (activationStart > 0) → Subtract activationStart when interpreting TTFB.js, FCP.js and LCP results

After Critical-CSS-Detection.js

• If render-blocking CSS > 14KB → Recommend inlining critical CSS
• If no inline CSS but has blocking stylesheets → Suggest critical CSS extraction
• If CSS > 50KB total → Run CSS-Media-Queries-Analysis.js to find savings

After Back-Forward-Cache.js

• If bfcache blocked → Provide specific remediation based on blocking reasons
• If bfcache eligible → Confirm optimization is working

After Client-Side-Redirect-Detection.js

• If client-side redirects detected → Recommend server-side redirects
• If redirect chain found → Suggest eliminating intermediate hops

References

• references/snippets.md — Descriptions and thresholds for each script
• references/schema.md — Return value schema for interpreting script output