Performance Budgeting in New Architecture Migration

The Situation

Say you are a lead engineer on a team tasked with migrating a legacy application to a new architecture. The directive from management is to "make it faster," but there's no clear definition of what that means or how to measure success. Your team is struggling to turn this vague requirement into a tangible goal. Meanwhile, the current application is experiencing performance issues, with load times exceeding 5 seconds and a bounce rate of 30%. The cost of inaction is high: a 10% decline in user engagement and a 5% drop in sales.

Why It Happens

The lack of a clear performance goal is a common problem in migration projects. Without a well-defined target, teams often focus on optimizing individual components rather than the overall user experience. This can lead to a phenomenon known as "optimization silos," where each component is optimized in isolation, but the overall system performance remains subpar. Furthermore, the absence of a performance budget – a measurable ceiling for load times, latency, and other key metrics – makes it difficult to prioritize optimization efforts and measure progress.

The Fix

To address this issue, teams can adopt a performance budgeting approach. This involves setting a measurable ceiling for key performance metrics, such as:

1. Define the performance budget: Identify the critical user journeys and set a performance budget for each. For example, the budget for the login page might be a load time of 2 seconds or less, while the budget for the dashboard might be 3 seconds or less. To define the budget, consider the following steps:
   • Identify the key performance indicators (KPIs) for each user journey.
   • Determine the acceptable thresholds for each KPI.
   • Establish a baseline measurement for each KPI using tools like WebPageTest or Lighthouse.
2. Establish a monitoring and feedback loop: Set up monitoring tools to track performance metrics and provide feedback to the team. This can include tools like New Relic, Datadog, or Prometheus. To establish the loop, follow these steps:
   • Configure the monitoring tools to collect data on the defined KPIs.
   • Set up alerts and notifications for when the performance budget is exceeded.
   • Schedule regular review sessions to discuss performance metrics and prioritize optimization efforts.
3. Prioritize optimization efforts: Use the performance budget to guide optimization efforts. Focus on the components and user journeys that are exceeding their budget, and prioritize fixes accordingly. To prioritize efforts, consider the following:
   • Identify the components and user journeys that are exceeding their budget.
   • Assess the impact of each component on the overall user experience.
   • Allocate resources to address the most critical issues first.
4. Implement optimizations: Apply optimizations to the components and user journeys that are exceeding their budget. This can include techniques like code splitting, lazy loading, and caching. To implement optimizations, follow these steps:
   • Research and select the most effective optimization techniques for each component.
   • Apply the optimizations and measure their impact on performance metrics.
   • Refine and iterate on the optimizations as needed.

What It Costs, and When Not to Do It

Implementing a performance budgeting approach requires an upfront investment of time and resources. Teams must dedicate time to defining the performance budget, establishing a monitoring and feedback loop, and prioritizing optimization efforts. However, the long-term benefits of a performance budgeting approach can be significant, including improved user engagement, increased conversions, and reduced bounce rates. When not to do it: if the team is under extreme time pressure or if the application is relatively simple and doesn't require complex optimization efforts.

At Your Level

• Starting out: Focus on understanding the key performance metrics and how to measure them. Start by setting up basic monitoring tools and establishing a performance budget for a simple user journey.
• Working engineer: Learn how to prioritize optimization efforts based on the performance budget. Focus on applying optimizations to components and user journeys that are exceeding their budget.
• Senior or staff: Consider the trade-offs between performance and other factors like maintainability and scalability. Develop a comprehensive performance strategy that balances competing priorities.
• Lead or director: Own the performance budget and ensure it is aligned with business goals. Establish a culture of performance-oriented development and provide resources to support optimization efforts.

In the Interview

When asked about performance budgeting in an interview, a weak answer might sound like: "We just try to make it faster, and we use some tools to monitor performance." A strong answer would name the specific performance metrics, the trade-offs involved, and the approach to prioritizing optimization efforts. For example: "We set a performance budget for key user journeys, and we use monitoring tools to track metrics like load time and latency. We prioritize optimization efforts based on the budget, and we balance performance with other factors like maintainability and scalability." A follow-up question might be: "Can you give an example of a time when you had to balance performance with another factor, like security or scalability?" A strong answer would provide a specific example and explain the trade-offs involved.

---

Amit Chakraborty is a founding engineer and senior architect — React Native, AI/RAG systems and production architecture. Portfolio: www.amitchakraborty.dev · LinkedIn · GitHub. Open to senior and founding engineering roles, remote worldwide.