Performance Without Budgets Degrades Over Time

Without explicit performance budgets, web application performance degrades gradually. Each new feature adds a few kilobytes of JavaScript, a few more images, a few more API calls. The change is imperceptible in each PR but compounds over months into a measurably slower application. Performance budgets prevent this regression. At Nexis Limited, our projects define and enforce performance budgets in CI/CD.

What to Budget

Loading Performance

  • JavaScript bundle size: Total JavaScript delivered to the client. Budget: under 200KB gzipped for initial page load. Every kilobyte of JavaScript has a parsing, compilation, and execution cost — especially on mobile devices.
  • Total page weight: All resources (HTML, CSS, JS, images, fonts). Budget: under 1MB for initial page load.
  • Image size: Use modern formats (WebP, AVIF), appropriate dimensions, and lazy loading. Budget: under 200KB per individual image, under 500KB total images for initial viewport.
  • Font files: Subset fonts to include only needed characters. Budget: under 100KB total font files.

Core Web Vitals

  • LCP (Largest Contentful Paint): Under 2.5 seconds. The time until the largest content element is rendered.
  • INP (Interaction to Next Paint): Under 200ms. The time between user interaction and the next visual update.
  • CLS (Cumulative Layout Shift): Under 0.1. The extent of unexpected layout shifts during page load.

Network Performance

  • Number of requests: Budget: under 30 requests for initial page load.
  • Time to First Byte (TTFB): Under 800ms. Server response time for the initial HTML.
  • Third-party scripts: Budget: under 50KB total third-party JavaScript. Each third-party script adds unpredictable loading time.

Measuring Performance

Lighthouse CI

Run Lighthouse audits automatically in your CI/CD pipeline. Set minimum scores for Performance, Accessibility, Best Practices, and SEO. Fail the pipeline if scores drop below thresholds. Compare results against baselines to detect regressions.

Bundle Analysis

Use @next/bundle-analyzer (Next.js), webpack-bundle-analyzer, or source-map-explorer to visualize JavaScript bundle contents. Identify large dependencies, duplicate modules, and unnecessary code. Review bundle analysis on every PR that adds dependencies.

Real User Monitoring (RUM)

Lab tests (Lighthouse) measure idealized performance. Real User Monitoring measures actual performance across real users, devices, and networks. Use Vercel Analytics, Google Analytics Web Vitals, or a dedicated RUM solution (SpeedCurve, Calibre) to track real-world performance.

Optimization Techniques

JavaScript Optimization

  • Code splitting: Next.js automatically splits code per route. Use dynamic imports for heavy components that are not needed on initial render.
  • Tree shaking: Import only the specific functions you need: import { debounce } from 'lodash-es' rather than import _ from 'lodash'.
  • Dependency audit: Evaluate every dependency — is there a smaller alternative? Can you implement the functionality without a dependency?
  • Lazy loading: Load non-critical components, images, and scripts lazily. Only load what is in or near the viewport.

Image Optimization

  • Use next/image for automatic format conversion, sizing, and lazy loading.
  • Serve appropriate image sizes — do not send a 2000px image for a 300px thumbnail.
  • Use modern formats (WebP for broad support, AVIF for maximum compression).
  • Set explicit width and height to prevent layout shift.

Font Optimization

  • Use next/font for automatic optimization and zero layout shift.
  • Subset fonts to include only the characters you use.
  • Limit the number of font files — each additional weight or style adds a file to download.
  • Use font-display: swap to prevent invisible text during font loading.

Enforcing Budgets in CI/CD

  • Add bundle size checks to your CI pipeline. Fail the build if the JavaScript budget is exceeded.
  • Run Lighthouse CI on preview deployments. Set minimum score thresholds.
  • Comment bundle size diffs on pull requests so reviewers see the performance impact of changes.
  • Track budgets over time — dashboard historical performance data to identify trends.

Conclusion

Performance budgets transform performance from a subjective concern into a measurable, enforceable standard. Define budgets for bundle size, page weight, and Core Web Vitals. Measure with Lighthouse CI and RUM. Enforce in CI/CD pipelines. Without budgets, performance will degrade. With budgets, performance is maintained as a feature of your application.

Optimizing web performance? Our team implements performance budgets and optimization strategies.