01 · A planning constraint
Budget before the page is expensive
A performance budget is a limit on user-facing timing, resource quantity or both. Timing budgets align with experience: LCP, INP and CLS. Quantity budgets constrain the ingredients that commonly degrade those outcomes: JavaScript, image bytes, fonts, requests and DOM complexity.
Budgets are not universal truth. A text article and visual product page have different jobs. Build a starting point from user needs, target devices, traffic conditions and current field data. Then make it slightly ambitious but achievable. A threshold no one can meet becomes decoration; a limit already exceeded by every template creates no pressure.
Theme assets are only one line item. Reserve capacity for WordPress, plugins, consent, analytics, media and business-critical third parties.
02 · Starting guardrails
A conservative mobile starter budget
The table below is an editorial starting point for a cached, content-led WordPress page—not an official standard and not a guarantee of Core Web Vitals. Adapt it after measuring a representative design. Transferred bytes mean compressed network transfer, not uncompressed resource size.
| Measure | Starter limit | Why watch it |
|---|---|---|
| LCP lab target | ≤ 2.0 s | Leaves margin beneath the 2.5 s field “good” threshold |
| CLS lab target | ≤ 0.05 | Leaves margin for shifts after lab load |
| Total transferred | ≤ 700 KB | Controls mobile transfer and decode work |
| Images transferred | ≤ 450 KB | Usually the largest adjustable payload |
| JavaScript transferred | ≤ 120 KB | Script also costs parse, compile and execution time |
| CSS transferred | ≤ 70 KB | Can block rendering and grow through duplicate systems |
| Web fonts | ≤ 100 KB / 2 files | Avoids excess variants and unstable text |
| Requests | ≤ 45 | Highlights fragmented dependencies and third parties |
| Third-party origins | ≤ 3 critical | Each adds control, connection and privacy risk |
| DOM elements | ≤ 1,000 target | A practical complexity alarm, not a pass/fail standard |
Why target lab LCP below 2.5 seconds? Field Core Web Vitals are judged at the 75th percentile across diverse visits. A lab result sitting exactly on the good threshold has no operational margin. Your exact margin should reflect lab profile and audience.
Do not optimize request count in isolation
HTTP/2 and HTTP/3 make moderate parallel requests less costly than in older connection models. Still, every resource has scheduling, header and processing cost. Ten tiny files are not automatically worse than one huge render-blocking bundle. Use request count as an investigation trigger, then inspect priority and critical path.
03 · Allocate by page job
Give each template a budget envelope
A site-wide maximum prevents extreme outliers, while template budgets recognize necessary variation. Start with the most common mobile journeys and assign both timing and quantity limits.
Prioritize typography and a single responsive hero. Delay embeds.
Reserve script for one essential interaction, not decorative motion.
Budget image gallery, variations and cart behavior explicitly.
Control card image dimensions, lazy loading and DOM repetition.
Then divide the resource envelope among owners. For a 120 KB JavaScript limit, the theme/builder might receive 45 KB, first-party behavior 35 KB, analytics and consent 25 KB, leaving 15 KB contingency. If the builder consumes the full amount, the design must reduce elsewhere or choose another implementation.
04 · Treat limits as tests
Measure continuously, not at launch week
Record one canonical test URL for each template and a fixed test configuration. Run repeat lab tests in CI or on a scheduled environment, but account for variability: fail hard on large resource-budget regressions and use warnings or repeated confirmation for small timing changes.
- Baseline: preserve raw reports for the approved template.
- Pull request: compare bytes, requests and key timing with the baseline.
- Staging: test the complete cached page with production-like third parties.
- Production: collect Web Vitals by template and release version.
- Review: investigate budget exceptions and record their owner/expiry.
Use browser coverage and bundle tooling to find unused code, but do not delete code solely because one route did not execute it. WordPress plugins may enqueue assets globally; conditionally enqueueing by template or block presence often has greater value than minifying an already small file.
05 · Buy outcomes
Spend budget where users receive value
A high-quality product image can deserve more bytes. A reliable checkout integration can deserve script. A decorative carousel that few users operate usually cannot. Require a short exception note: user outcome, added cost, alternatives considered, mitigation and review date.
Common budget recoveries
- Replace the hero carousel with one responsive, properly prioritized image.
- Use system fonts or subset/localize one variable family.
- Load video facades and embeds only after intent.
- Remove duplicate icon libraries and overlapping block suites.
- Conditionally enqueue form, commerce and gallery assets.
- Reserve image dimensions and stabilize consent/promo UI.
- Reduce repeated builder wrappers before micro-minifying HTML.
Performance budgets work best with design-system constraints: approved aspect ratios, type variants, spacing patterns and interaction primitives. That prevents every new page from inventing another payload.
06 · Team worksheet
Write your first budget in 15 minutes
- Audience: primary device class, regions and connectivity assumptions.
- Templates: top traffic and business-critical journeys.
- Experience: LCP, INP and CLS field targets at p75.
- Lab margin: stricter staging thresholds under a named profile.
- Resources: total, image, JS, CSS, font, request and third-party limits.
- Owners: person responsible for each allocation.
- Enforcement: URLs, run count, CI behavior and exception process.
- Review: monthly field review and release markers.
Reference desk
Primary sources
- web.dev: Performance budgets 101.
- web.dev: Your first performance budget.
- web.dev: Web Vitals thresholds and percentiles.
- Lighthouse: Avoid an excessive DOM size — diagnostic context, not a universal standard.
- WordPress developer reference: wp_enqueue_script.