Performance Budget for E-commerce Sites
Design a performance budget for e-commerce product pages, category pages, and checkout flows. Balance rich product imagery with fast load times to maximize conversion rates.
Detailed Explanation
Performance Budget for E-commerce
E-commerce sites face a unique tension: rich product imagery drives sales, but heavy pages drive users away. Studies consistently show that every second of load time improvement increases e-commerce conversion rates by 2-7%.
Page-Type Budgets
Different e-commerce pages have different performance profiles:
| Page Type | Weight Target | Critical Metric |
|---|---|---|
| Homepage | 600-800 KB | LCP < 2.5s |
| Category/PLP | 500-700 KB | FCP < 1.5s |
| Product/PDP | 700-1000 KB | LCP < 2.5s (hero image) |
| Cart | 400-600 KB | TTI < 3s |
| Checkout | 300-500 KB | TTI < 2s, CLS < 0.1 |
Product Page Budget Example (800 KB total)
| Category | Budget | Details |
|---|---|---|
| HTML | 40 KB | Product markup, structured data |
| CSS | 60 KB | Design system + product styles |
| JavaScript | 200 KB | Cart logic, image zoom, reviews |
| Images | 400 KB | 4-6 product images (WebP, lazy) |
| Fonts | 60 KB | Brand font, 2 weights |
| Other | 40 KB | Analytics, tracking |
Image Strategy for Product Pages
Product images make or break e-commerce performance:
- Hero image — Load eagerly, preload with
<link rel="preload">, AVIF format - Gallery images — Lazy load, load on thumbnail click or scroll
- Thumbnails — Small dimensions (100x100), aggressive compression
- Zoom images — Load on demand (click/hover), not in initial budget
Checkout Performance
Checkout pages should be the leanest pages on the site:
- Remove all non-essential scripts (analytics can stay, but chat widgets go)
- Minimize JavaScript to form validation + payment integration
- Inline critical CSS for the checkout form
- No hero images, no product recommendations
- Sub-2-second Time to Interactive is the goal
Revenue Impact Calculation
If your site has:
- 100,000 monthly visitors
- 3% conversion rate
- $50 average order value
- Current load time: 5 seconds
Improving load time to 3 seconds (a 40% improvement) could increase conversions by 10-20%:
- 3.3% conversion rate = 3,300 orders = $165,000/month
- 300 additional orders = $15,000/month additional revenue
This makes performance optimization one of the highest-ROI activities for e-commerce teams.
Use Case
E-commerce performance budgets directly impact revenue. A Shopify Plus merchant might set a 700 KB budget for product pages and a 400 KB budget for checkout. During Black Friday preparation, the team audits all third-party scripts against the budget. A product manager proposing a new recommendation widget (150 KB) must justify the added weight against the potential revenue uplift, using the performance budget as a framework for the decision.