Performance budget
Category: Design
What is Performance Budget?
Performance Budget is a set of constraints and goals defined for a web application or website that determine the acceptable levels of performance. These are quantitative boundaries for different metrics that the team is committed to follow.
Performance Budget serves as a "financial budget" - it determines how much "cost" we can afford for performance before user experience deteriorates.
Why is Performance Budget important for UI/UX?
Impact on user experience
Slow website leads to high bounce rate and decreased conversion
SEO implications
Google uses website speed as a ranking factor
Accessibility
Users with slow connections or old devices need optimized websites
Business results
Every 100ms delay has a negative effect on sales
Key metrics in Performance Budget:
1. Metrics based on time
- Time to First Byte (TTFB) < 200ms
- First Contentful Paint (FCP) < 1.5s
- Largest Contentful Paint (LCP) < 2.5s
- Time to Interactive (TTI) < 3.5s
2. Metrics based on size
- Total page size < 2MB for mobile devices
- JavaScript size < 300KB compressed
- CSS size < 50KB compressed
- Number of HTTP requests < 50 for the entire page
3. Qualitative metrics
- Cumulative Layout Shift (CLS) < 0.1 for stable layout
- First Input Delay (FID) < 100ms for quick response to interactions
- Speed Index < 3s for visual loading
Process of creating Performance Budget:
Defining business goals
What are the key user paths and which pages are most important?
Analysis of current state
Measuring current metrics and identifying problem areas
Setting realistic goals
Based on industrial standards and competitive analysis
Allocating the budget
Determining the acceptable size for each component (JS, CSS, images)
Implementation and monitoring
Integration into the development workflow and continuous monitoring
Roles and responsibilities in the team:
UI/UX designers
- Optimizing images and icons
- Choosing effective animations
- Minimizing expensive visual effects
- Designing progressive loading states
Frontend developers
- Code splitting and lazy loading
- Minification and compression of assets
- Effective use of cache
- Optimization of JavaScript execution
Backend developers
- Optimization of database requests
- Caching of server responses
- CDN implementation
- Effective API design
Tools for monitoring and execution:
- Lighthouse Automated auditing for performance, accessibility and SEO
- WebPageTest Detailed tests from different locations and devices
- Chrome DevTools Performance panel for analysis of rendering and JavaScript performance
- Bundlesize Git integration for checking the size of bundles
- Calibre Continuous monitoring and reporting
Good practices:
- Start early - include performance budget in the early stages of the project
- Test real conditions - use middle-range networks and mobile devices
- Monetize every addition - for each new feature recalculate the budget
- Automate checks - integration in CI/CD pipeline
- Train the entire team - everyone must understand the impact of their decisions on performance
- Regular reviews - monthly or quarterly reviews of performance metrics
Challenges and solutions:
Designer feature creep
Problem: Designers add more and more visual elements without considering performance impact
Solution: Early inclusion of performance considerations in the design process
Third-party scripts
Problem: Analytics, chat widgets and ads add significant load
Solution: Evaluation of impact and lazy loading of third-party resources
Business priorities
Problem: Adding new features quickly at the expense of performance
Solution: Data on the impact on business metrics (conversion, retention)