E-commerce Performance Budget Template
Complete performance budget template for e-commerce product pages. Includes budgets for product images, JavaScript cart functionality, third-party payment scripts, and Core Web Vitals targets.
Detailed Explanation
E-commerce Performance Budgets
E-commerce sites have a direct financial incentive to be fast. Amazon found that every 100ms of latency cost them 1% of sales. For e-commerce, performance budgets are directly tied to revenue.
Product Page Budget Template
| Category | Budget | Notes |
|---|---|---|
| Total Page | 800 KB | Compressed transfer size |
| HTML | 30 KB | Server-rendered product data |
| CSS | 80 KB | Including component styles |
| JavaScript | 250 KB | Cart, search, analytics |
| Images | 300 KB | Product images (optimized) |
| Fonts | 60 KB | 2 fonts max, WOFF2 only |
| Requests | 40 | Including API calls |
| TTFB | 600 ms | CDN-cached product pages |
| FCP | 1500 ms | Show product info quickly |
| LCP | 2000 ms | Product hero image loaded |
Product Image Strategy
Product images are the primary LCP element on e-commerce pages:
- Hero image: 80-120 KB max (preloaded, WebP/AVIF format)
- Thumbnails: 10-20 KB each (lazy loaded below fold)
- Zoom images: Load on hover/click only (not counted in initial budget)
- Total image budget: 300 KB for initial page load
JavaScript Budget Breakdown
| Component | Budget |
|---|---|
| Framework (React) | 40 KB |
| Cart functionality | 30 KB |
| Search/autocomplete | 25 KB |
| Product gallery | 20 KB |
| Payment scripts | 50 KB |
| Analytics | 25 KB |
| A/B testing | 15 KB |
| Other | 45 KB |
Critical Path Optimization
For product pages, optimize the critical rendering path:
- Inline critical CSS for above-the-fold product card
- Preload the hero product image
- Defer all non-essential JavaScript
- Lazy load below-fold content sections (reviews, recommendations)
Revenue Impact Tracking
When tracking budgets, correlate with business metrics:
- Page weight vs. bounce rate
- LCP vs. conversion rate
- TTI vs. add-to-cart rate
Use Case
E-commerce teams use performance budgets to protect revenue. When a new feature (video reviews, AR try-on, personalization engine) is proposed, the team checks it against the budget. If a 200 KB personalization script would push JavaScript over budget, they must find savings elsewhere or optimize the script before shipping.