Bandwidth Overview
Every byte costs money after 1TB. Here's where the bytes go—and how to stop the bleeding.
The Short Version
Half your bandwidth is probably images. Fix those first—standardize sizes, use WebP/AVIF, and move to an external CDN at scale. For the implementation details, see the Performance Guide.
The Bandwidth Budget
You get 1TB free on Pro. That sounds like a lot until you do the math:
- 1 page load with a few images: ~2MB
- 1 million page views: 2TB
- Overage cost: $150
Most sites don't hit a million views. But the ones that do can rack up serious overage charges without realizing it.
What's Eating Your Bandwidth?
Here's what we typically see when we audit sites:
| Category | Typical Share | Can You Control It? |
|---|---|---|
| Images | 40-60% | Absolutely |
| Video/Media | 0-30% | Critical if you have any |
| JavaScript bundles | 20-35% | Yes |
| API responses | 10-20% | Yes |
| Fonts | 5-10% | Somewhat |
| HTML/CSS | 3-8% | Barely worth the effort |
Notice the pattern? Images dominate. If you only optimize one thing, optimize images.
The Optimization Order
Work in order of impact:
1. Images (40-60% of bandwidth)
This is where most sites are hemorrhaging bytes. Head to Image Optimization for the full playbook:
- Standardize dimensions (stop using arbitrary
width={347}) - Serve modern formats (WebP, AVIF)
- Lazy-load below the fold
- Consider external CDNs at scale
2. API Responses (10-20% of bandwidth)
Bloated JSON payloads add up fast. See API Responses:
- Return only the fields clients need
- Paginate everything
- Compress large payloads
- Cache aggressively
3. JavaScript Bundles (20-35% of bandwidth)
Covered in the fundamentals: Bundle Analysis
- Code split aggressively
- Lazy-load heavy components
- Audit your dependencies
The Video Problem
Never Self-Host Video
A single 1-minute video can be 50-100MB. Serve that to 10,000 users and you've burned 500GB-1TB on one video. This is the fastest way to blow your bandwidth budget.
Video needs a dedicated solution:
| Provider | What It's Good For | Free Tier |
|---|---|---|
| Cloudinary | Images + light video, auto-transcoding | 25 credits/month |
| Mux | Professional video, detailed analytics | None |
| Bunny Stream | Budget-friendly video hosting | None |
The implementation patterns are in the Performance Guide: Video & Media.
Quick Wins (5 Minutes Each)
Kill Unnecessary Prefetching
Next.js prefetches linked pages by default. Great for UX, terrible for bandwidth on low-traffic links:
// Don't prefetch pages users rarely visit
<Link href="/terms" prefetch={false}>Terms of Service</Link>
<Link href="/privacy" prefetch={false}>Privacy Policy</Link>
<Link href="/careers" prefetch={false}>Careers</Link>Use System Fonts for UI
Custom fonts are 20-200KB each. For body text and headings, sure. For button labels and form fields? Use the fonts already on the user's device:
.ui-text {
font-family: system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, sans-serif;
}Self-Host Brand Fonts Properly
If you need custom fonts, use next/font to self-host them with automatic subsetting:
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
});This eliminates the Google Fonts request and only loads the characters you actually use.
When to Move to an External CDN
If your bandwidth bill is consistently over $100/month, it's time to offload media:
- Cloudflare R2: Dirt cheap storage, generous free egress
- Bunny CDN: Low per-GB pricing, global edge network
- AWS CloudFront + S3: Enterprise-grade, complex pricing
The math usually works out around 2-3TB/month—below that, Vercel's simplicity wins. Above that, dedicated CDNs are significantly cheaper per GB.
Start with Image Optimization—it's typically 40-60% of your transfer and the easiest to fix.