# Test Perf
> Run performance and Core Web Vitals testing on a URL. Use when user wants to test page speed, LCP, CLS, INP, load times, asset optimization, or runtime performance.
- Skill: `az9713/test-perf` (Agent Skill)
- Install (CLI): `npx skillmds@latest add az9713/test-perf`
- Raw SKILL.md: https://api.skillmd.com/api/skills/az9713/test-perf/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: az9713 (https://skillmd.com/u/az9713)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/az9713/test-perf
---
# Performance & Core Web Vitals
Run 25 performance test cases across 3 parallel agents covering page load/CWV, runtime performance, and asset optimization.
## Setup
```bash
URL="${ARGUMENTS:-http://localhost:3000}"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTDIR="test-results/test-perf/$TIMESTAMP"
mkdir -p "$OUTDIR/screenshots" "$OUTDIR/snapshots" "$OUTDIR/traces"
```
Before running, verify prerequisites per `references/prerequisites.md`.
## Parallel Execution — 3 Subagents
### Agent 1: Loading (`-s=perf-loading`)
Tests page load performance and Core Web Vitals.
```bash
playwright-cli -s=perf-loading open "$URL"
playwright-cli -s=perf-loading tracing-start
```
**Test Cases:**
| TC | Test | How to Check |
|----|------|-------------|
| TC-P1 | Time to first meaningful paint | `run-code` to read `performance.getEntriesByType('paint')` for first-contentful-paint timing |
| TC-P2 | LCP ≤2.5s | `run-code` with PerformanceObserver for `largest-contentful-paint` entry, check `startTime ≤ 2500` |
| TC-P3 | FID/INP ≤200ms | `run-code` with PerformanceObserver for `first-input` and `event` entries, check delay ≤ 200ms |
| TC-P4 | CLS ≤0.1 | `run-code` with PerformanceObserver for `layout-shift` entries (no `hadRecentInput`), sum values, check ≤ 0.1 |
| TC-P5 | Time to Interactive (TTI) | `run-code` to measure time until main thread is idle: `performance.timing.domInteractive - performance.timing.navigationStart` |
| TC-P6 | Total page weight <3MB | `run-code` to sum `performance.getEntriesByType('resource').map(r => r.transferSize)`, check < 3MB |
| TC-P7 | DOM node count <1500 | `run-code`: `document.querySelectorAll('*').length`, flag if >1500 |
| TC-P8 | Render-blocking resources count | `run-code` to find `` in `` without `media` attr and `