skills.rest
zinohome
zinohomeCOMMUNITY
Explore all skills by this author →
GitHub

performance-budget-setter

Defines and enforces performance budgets for bundle size, API latency, database queries, and Core Web Vitals.

Updated Mar 16, 2026
Search Tags:#monitoring#web vitals#optimization#bundle size#webpack#lighthouse ci#performance budget
One-click install
npx skills add https://github.com/zinohome/RTMessage --skill performance-budget-setter-zinohome
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-budget-setter
Source: https://github.com/zinohome/RTMessage/tree/main/.github/skills/performance-budget-setter
Command: npx skills add https://github.com/zinohome/RTMessage --skill performance-budget-setter-zinohome

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web applications gradually slow down as features accumulate, and teams lack concrete thresholds to detect regressions before users are affected. This Skill provides measurable performance budgets with enforcement and monitoring strategies. ## Core Features & Use Cases - Budget Templates: Pre-built tables for bundle size, API latency percentiles, database query limits, Core Web Vitals targets, and third-party script allowances. - CI/CD Enforcement: GitHub Actions workflow, webpack performance hints, and bundlesize configuration to block pull requests that exceed budgets. - Monitoring & Response: Real User Monitoring with the web-vitals library, Lighthouse CI synthetic checks, alert thresholds, and a budget violation response process. - Use Case: A team notices their checkout page slowing down. Use this Skill to set a 3s Time to Interactive budget, wire bundlesize checks into CI, and configure alerts when LCP exceeds 2.5s for more than 5% of users. ## Quick Start Ask the AI to create a performance budget for your web application covering bundle size, API latency, and Core Web Vitals with CI enforcement.

Frequently Asked Questions about performance-budget-setter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set a performance budget for my website?▼

Define measurable limits per resource type: bundle size in kilobytes, API latency at p50/p95/p99 percentiles, database query times, and Core Web Vitals targets like LCP under 2.5s. Base budgets on current measurements plus user experience research.

How to enforce bundle size limits in CI/CD?▼

Add a bundlesize configuration in package.json with maxSize per asset path, then run npx bundlesize in your CI workflow after the production build. Webpack performance hints with maxAssetSize can also fail builds that exceed limits.

What are good Core Web Vitals targets?▼

Google defines good thresholds as LCP under 2.5s, FID under 100ms, and CLS under 0.1. Stricter internal targets like LCP under 2.0s and CLS under 0.05 give buffer before users experience poor scores.

How do I monitor Core Web Vitals from real users?▼

Use the web-vitals JavaScript library to capture CLS, FID, and LCP metrics in the browser, then send them to your analytics endpoint via navigator.sendBeacon or fetch. Combine this RUM data with Lighthouse CI synthetic tests.

What should I do when a performance budget is exceeded?▼

Block the pull request from merging, notify the team, and investigate the cause within 24 hours. Prefer fixing the code through code splitting or lazy loading; budget increases require a documented justification with impact analysis.

Related Skills

Explore More Software Engineering Skills→
cosmicstack-labscosmicstack-labs
364

web-performance

Optimize web applications for Core Web Vitals with JavaScript code-splitting and caching strategies.

Official
Intermediate
splits-networksplits-network
1

performance-optimization

Optimizes TypeScript backend and React frontend performance via caching, indexing, and bundle reduction.

Official
Intermediate
whawkinsivwhawkinsiv
232

monitor

Automate uptime, error tracking, and performance monitoring for web apps.

Community
Advanced
sunLeeesunLeee

convention-monitoring-alerting

Define monitoring and alerting conventions for production systems.

Community
Advanced