ToolypetMCP
intermediate5 minutescross hub

Performance Budget & Optimization

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

performanceoptimizationcssstatisticsbudget

Wann dieses Rezept verwenden

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

Schritte

1

Analyze load time metrics

Eingabeaufforderung: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

Calculate failure rate

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

Optimize CSS delivery

Eingabeaufforderung:Convert heavy custom CSS to Tailwind utilities to reduce CSS bundle size
4

Verify bundle integrity

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

Häufig gestellte Fragen

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.

Verwandte Rezepte