# Webperf Loading

Intelligent loading performance analysis with automated workflows for TTFB...

- Repository: https://github.com/nucliweb/webperf-snippets (1458 stars)
- Category: AI and agents
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add nucliweb/webperf-snippets --skill webperf-loading -g -a claude-code -y`
Codex: `npx skills add nucliweb/webperf-snippets --skill webperf-loading -g -a codex -y`
Cursor: `npx skills add nucliweb/webperf-snippets --skill webperf-loading -g -a cursor -y`
Gemini CLI: `npx skills add nucliweb/webperf-snippets --skill webperf-loading -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nucliweb/webperf-snippets`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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](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

The rest: https://github.com/nucliweb/webperf-snippets/blob/HEAD/.claude/skills/webperf-loading/SKILL.md