Performance Budgets: How to Tell Your Creative Team 'No' (Nicely)

Your creative team just designed a stunning landing page with a full-screen video background, parallax scrolling, custom animations, and 12 high-resolution product shots. It looks incredible.

It also takes 8 seconds to load on mobile.

You need performance budgets — agreed-upon limits that everyone respects before a single pixel is designed.

What Is a Performance Budget?

A performance budget is a set of maximum thresholds for page performance metrics. Just like a financial budget limits spending, a performance budget limits the resources a page can consume.

Types of Budgets

Timing budgets (user experience):

Metric	Budget
LCP	≤ 2.5s
FCP	≤ 1.8s
TTI	≤ 3.5s
CLS	≤ 0.1

Resource budgets (technical):

Resource	Budget
Total page weight	≤ 1.5MB
JavaScript	≤ 300KB
CSS	≤ 100KB
Images	≤ 800KB
Fonts	≤ 100KB
Third-party scripts	≤ 5

Count budgets (simplicity):

Metric	Budget
Total HTTP requests	≤ 50
DOM nodes	≤ 1,500
Third-party domains	≤ 5

Why Creative Teams Push Back

"It limits creativity"

Performance budgets feel restrictive. Designers worry about compromising their vision.

Response: Constraints breed creativity. The best designs work within constraints — screen size, brand guidelines, accessibility requirements. Performance is another constraint.

"The design won't look as good"

Designers associate large images and complex animations with quality.

Response: Modern formats (AVIF) deliver stunning quality at a fraction of the file size. Most quality loss from compression is imperceptible.

"Other sites do this"

They see competitors with video backgrounds and heavy animations.

Response: Pull up those competitors' Lighthouse scores. They're often terrible. Show the conversion data — fast pages convert better than pretty-but-slow pages.

How to Introduce Performance Budgets (Without Starting a War)

Step 1: Establish Shared Goals

Frame performance as a shared objective, not a constraint on design:

• "We all want this page to convert well"
• "Speed is part of the user experience"
• "A beautiful page nobody sees isn't effective"

Step 2: Start with Data

Show the cost of past slow pages:

• Bounce rates on slow vs. fast pages
• Conversion rate differences
• Google Ads Quality Score impact

Step 3: Propose Reasonable Limits

Don't start with aggressive budgets. Begin with limits that prevent the worst offenders:

• Total page weight: 2MB (generous but prevents 8MB pages)
• LCP: 3 seconds (allows some flexibility)
• Images: 1MB total

Step 4: Provide Alternatives

For every "no," offer a "yes":

Request	Alternative
4MB hero video	200KB animated WebP or CSS animation
12 full-size product photos	6 optimized images with lightbox for full-size
Custom font with 8 weights	Variable font (1 file, all weights)
Parallax scrolling	CSS scroll-snap or subtle transforms
Auto-playing carousel	Static featured image with "View gallery" CTA

Step 5: Make It Part of the Process

Add a performance check to the design review:

1. Design review ✅
2. Copy review ✅
3. Performance review ✅ ← new
4. Stakeholder approval ✅
5. Development ✅
6. Launch ✅

Enforcing Budgets Automatically

In CI/CD

Use Lighthouse CI to fail builds that exceed budgets:

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.8}],
        "resource-summary:script:size": ["error", {"maxNumericValue": 300000}],
        "resource-summary:image:size": ["error", {"maxNumericValue": 800000}]
      }
    }
  }
}

With bundlesize

{
  "bundlesize": [
    { "path": "./dist/js/*.js", "maxSize": "300 kB" },
    { "path": "./dist/css/*.css", "maxSize": "100 kB" }
  ]
}

With Performance Monitoring

Set alerts when metrics exceed budgets. This catches issues from content changes (new images, updated copy) that don't go through CI/CD.

The Cultural Shift

Performance budgets only work if they're part of the team culture, not just a rule imposed by engineering. This means:

• Celebrating fast pages as much as beautiful ones
• Including performance in design awards/recognition
• Sharing performance wins in team meetings
• Making metrics visible on dashboards everyone can see

Track Your Budget Compliance

BadPageSpeed monitors your pages against whatever thresholds you set. Get alerted the moment a page exceeds your performance budget.

Set up performance budget alerts →