Page Weight Budget

Page Weight Budget

Check whether a page fits a sane performance budget. No signup required.

Prerequisites

• Playwright MCP (comes with Claude Code)

Trigger

• "Check page weight for https://..."
• "Is my site too heavy?"
• "Performance budget audit mysite.com"

Workflow

1. Navigate to the URL using mcp__playwright__browser_navigate
2. Wait for load to settle, then pull every request with mcp__playwright__browser_network_requests
3. Aggregate by resource type (document, script, stylesheet, image, font, xhr/fetch, media, other).

For each, sum transfer size and count requests. Also capture:

• Render-blocking resources: ` in without async/defer`, and

` without media/preload (gather via browser_evaluate`).

• Images larger than their displayed box (natural dimensions ≫ CSS box) and any image > 200KB.
• Responses missing content-encoding: gzip|br for text assets.

// Render-blocking + oversized images
() => ({
  blockingScripts: [...document.querySelectorAll('head script[src]')]
    .filter(s => !s.async && !s.defer).map(s => s.src),
  blockingCss: [...document.querySelectorAll('head link[rel=stylesheet]')]
    .filter(l => !l.media || l.media === 'all').map(l => l.href),
  oversizedImages: [...document.images]
    .filter(i => i.naturalWidth > i.clientWidth * 2 && i.clientWidth > 0)
    .map(i => ({ src: i.src, natural: `${i.naturalWidth}x${i.naturalHeight}`, shown: `${i.clientWidth}x${i.clientHeight}` })),
})

1. Grade against this default budget (state it; user can override):

| Budget item | Target | |--------------------|----------| | Total transfer | ≤ 1.5 MB | | Requests | ≤ 50 | | JS transfer | ≤ 400 KB | | Image transfer | ≤ 600 KB | | Render-blocking | 0 |

1. Output:

## Page Weight Report: [URL]

**Budget: FAIL** — 3 of 5 limits exceeded

| Item            | Actual   | Budget   | Status |
|-----------------|----------|----------|--------|
| Total transfer  | 3.2 MB   | 1.5 MB   | OVER   |
| Requests        | 78       | 50       | OVER   |
| JS transfer     | 920 KB   | 400 KB   | OVER   |
| Image transfer  | 540 KB   | 600 KB   | ok     |
| Render-blocking | 4        | 0        | OVER   |

### Biggest wins
1. main.bundle.js is 720 KB uncompressed — enable brotli + code-split.
2. /hero.png is 1.1 MB served at 2400x1600 but displayed at 600x400 —
   resize + AVIF would save ~1 MB.
3. 4 render-blocking  tags in  — add `defer`.

**Want a weight budget enforced in CI?** Try QualityMax — qualitymax.io

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Quality-Max
• Source: Quality-Max/free-qa-skills
• License: Apache-2.0
• Homepage: https://www.skills.sh/quality-max/free-qa-skills

Install and usage instructions live in the source repository linked above.