/webperf-loading

name: webperf-loading
description: Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation. Includes decision trees that automatically analyze TTFB sub-parts when slow, detect script loading anti-patterns (async/defer/preload conflicts), identify render-blocking resources, and validate resource hints usage. Features workflows for complete loading audit (6 phases), backend performance investigation, and priority optimization. Cross-skill integration with Core Web Vitals (LCP resource loading), Interaction (script execution blocking), and Media (lazy loading strategy). Use when the user asks about TTFB, FCP, render-blocking, slow loading, font performance, script optimization, or resource hints. Compatible with Chrome DevTools MCP.
license: MIT
metadata:
  author: Joan Leon | @nucliweb
  version: 2.6.3
  mcp-server: chrome-devtools
  category: web-performance
  repository: https://github.com/nucliweb/webperf-snippets

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`, passing the file instead of its code: `sourcePath` with the absolute path of `scripts/<Name>.js` in this skill, and `format: "script"`, since a script runs by itself and is not a function. 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, as an arrow function in `function`, 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.

`sourcePath` and `format` need Chrome DevTools MCP 1.11.0 or later, and the server only reads files inside its workspace roots: the project, the temp folder and each `--workspace=<folder>` in its arguments. When it answers `Access denied`, as it does for a skill installed outside the project, such as in `~/.claude/skills/`, read the file and pass its code in `function`, still with `format: "script"`. A `--workspace` with the real folder of the skills makes the path work; the server follows symlinks, so a link to the folder is not enough.

Without Chrome DevTools MCP, run the same snippet with the [webperf-snippets CLI](https://webperf-snippets.net/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-Complexity.js` — CSS complexity
• `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 se