Setting Performance Budgets

Just like financial budgets, performance budgets set limits to keep your website fast and efficient.

They are specific, measurable thresholds for various performance metrics. Think of them as guardrails that prevent your site from becoming slow over time.

Without budgets, performance can slowly degrade with new features or content. This is called "performance regression".

• Prevent Regressions: Catch performance drops early.
• Maintain UX: Ensure a consistently fast user experience.
• Team Alignment: Give developers clear performance goals.
• Business Impact: Protect conversion rates and SEO rankings.

Performance budgets can be set for various aspects of your website. Understanding these categories helps you choose the right focus.

Common types include budgets for resource size, load times, quantity of requests, and even overall performance scores.

This type of budget limits the total size of assets your page loads. Larger files mean longer download times, especially on slower networks.

• JavaScript: e.g., max 150KB (gzipped) for critical JS.
• CSS: e.g., max 50KB (gzipped).
• Images: e.g., max 1MB total for all images on a page.

These budgets help keep your total page weight in check.

These budgets focus on how quickly specific parts of your page load and become interactive. They directly impact user perception of speed.

• First Contentful Paint (FCP): e.g., under 1.8 seconds.
• Largest Contentful Paint (LCP): e.g., under 2.5 seconds.
• Time to Interactive (TTI): e.g., under 3.8 seconds.

These are often tied to Core Web Vitals.

Sometimes, the number of items or requests can impact performance, even if individual items are small. Fewer requests often mean faster loading.

• HTTP Requests: e.g., max 30 requests per page load.
• Web Fonts: e.g., max 2 font families.
• Third-Party Scripts: e.g., max 5 external scripts.

This helps reduce network overhead and processing.

You can also set budgets based on overall performance scores from tools like Google Lighthouse. This provides a holistic target for your site's health.

For example, you might aim for a minimum Lighthouse Performance Score of 90 on mobile. This combines many metrics into a single, easy-to-track number.

Before setting budgets, you need to know your current performance. This "baseline" helps you define realistic and impactful targets.

• Audit Your Site: Use Lighthouse or other tools to measure current metrics.
• Analyze Competitors: See how your site stacks up against industry leaders.
• Understand User Data: Check your analytics for real user performance (RUM data).

Your performance budget targets should be ambitious but achievable. Consider your users' expectations, business goals, and technical constraints.

Start with a few key metrics and iterate. It's better to hit a few important targets consistently than to miss many overly aggressive ones.

Time to test your understanding of performance budget types.

We've learned that performance budgets are crucial for maintaining a fast website over time. They act as limits for various metrics.

You can budget by resource size, load time, quantity of requests, or overall performance scores. Always establish a baseline before setting realistic and achievable targets.