ToolypetMCP
intermediate5 minutescross hub

Performance Budget & Optimization

Audit performance budget: calculate statistics from metrics, generate optimized CSS, and verify security overhead.

performanceoptimizationcssstatisticsbudget

何时使用此配方

Performance budgets ensure your app stays fast. Analyze real metrics, optimize CSS delivery, and verify that security measures don't add excessive overhead.

步骤

1

Statistics Calculator

试用此工具

Analyze load time metrics

提示词:Analyze page load times from samples: 1.2s, 1.8s, 2.1s, 1.5s, 3.2s, 1.4s, 1.9s, 2.5s — calculate mean, p95, and p99
2

Percentage Calculator

试用此工具

Calculate failure rate

提示词:What percentage of page loads exceed the 2-second target? 3 out of 8 samples
3

Tailwind Converter

试用此工具

Optimize CSS delivery

提示词:Convert heavy custom CSS to Tailwind utilities to reduce CSS bundle size
4

SRI Hash Generator

试用此工具

Verify bundle integrity

提示词:Generate SRI hashes for optimized bundles to ensure CDN-served files aren't modified

常见问题

What is a performance budget?

Quantitative limits on metrics: e.g., LCP < 2.5s, total JS < 200KB, total CSS < 50KB, third-party requests < 10. Budgets prevent gradual performance degradation.

What's a good p95 page load time?

Under 3 seconds for most web apps. Under 1.5 seconds for e-commerce (every 100ms costs 1% in conversions). Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1.

相关配方