Blog and Content Site Performance Budget
Lightweight performance budgets for blog and content-focused sites. Minimize JavaScript, optimize typography, and maximize reading experience with budgets for static site generators and CMS platforms.
Detailed Explanation
Blog and Content Site Performance Budgets
Content sites should be among the fastest on the web. The primary purpose is delivering text content — which requires minimal JavaScript and can be served from a CDN with aggressive caching.
Content Site Budget Template
| Category | Budget | Notes |
|---|---|---|
| Total Page | 350 KB | Compressed transfer |
| HTML | 30 KB | Article content + markup |
| CSS | 40 KB | Typography + layout |
| JavaScript | 60 KB | Minimal interactivity |
| Images | 150 KB | Article images (lazy) |
| Fonts | 50 KB | 1-2 fonts, subsetting |
| Requests | 20 | Minimal dependencies |
| TTFB | 200 ms | CDN-served static HTML |
| FCP | 1000 ms | Text visible very fast |
| LCP | 1500 ms | Hero image or heading |
JavaScript Budget for Content Sites
Content sites need very little JavaScript:
| Function | Budget |
|---|---|
| Analytics | 15 KB |
| Theme toggle | 2 KB |
| Code highlighting | 20 KB |
| Search (lunr.js) | 15 KB |
| Comments (lazy) | 0 KB* |
*Load comments widget on scroll or click.
Image Strategy for Articles
- Hero image: 80 KB max (WebP, 1200px wide)
- Inline images: 40 KB each (responsive with srcset)
- Diagrams/charts: SVG preferred (typically 5-15 KB)
- All below-fold images: lazy loaded
Static Site Generator Advantages
Static site generators (Next.js static export, Astro, Hugo, 11ty) produce pre-rendered HTML that can be served from a CDN with near-zero TTFB. Budget advantages:
- TTFB: < 100 ms (CDN cache hit)
- HTML: pre-rendered, no server processing
- CSS: can be inlined entirely for small sites
- JS: can be zero for static pages (Astro islands)
Common Budget Violations
- Comment widgets — Disqus adds 300+ KB of JS; use lazy loading
- Social sharing buttons — Load on hover, not on page load
- Advertising scripts — Can add 500+ KB; use lazy loading and size caps
- Syntax highlighting — Prism.js with all languages is 100+ KB; load languages on demand
- Newsletter popups — Delay loading by 5+ seconds or trigger on scroll
Use Case
Content site budgets ensure the reading experience remains fast even as the site grows. A common failure pattern: a blog starts with a 200 KB page weight, then adds comments, sharing buttons, newsletter popups, and analytics — pushing it to 1.5 MB. The budget tracker catches this drift before it harms the user experience and SEO.