A performance budget sets limits for page weight, load time, and metrics. Recommended budgets: total page weight under 1.5MB, JavaScript under 300KB, images under 1MB, LCP under 2.5 seconds, INP under 200ms, CLS under 0.1. Track budgets with Lighthouse CI in your deployment pipeline. Break the budget into categories: HTML (under 50KB), CSS (under 100KB), JS (under 300KB), images (under 1MB), fonts (under 100KB).
guide2 min read
Performance Budget
Set performance budgets for page weight, load time, and Core Web Vitals.
Try these tools
More guide articles
Optimize Images for Web
Complete guide to image optimization: format selection, compression, sizing, lazy loading, and CDN delivery.
Build a CSS Design System
Step-by-step guide to creating a CSS design system with custom properties, typography, colors, and spacing scales.
Regex for Beginners
Learn regular expressions from scratch. Covers basic syntax, common patterns, and practical examples.
Choosing a Tech Stack
A practical guide to choosing frontend, backend, database, and hosting for your project.