View contents
Resource Optimization Hub: Complete Guide to Images, Fonts, Compression & Protocols
Introduction
Resource optimization is fundamental to web performance. How you deliver images, fonts, stylesheets, and scripts directly impacts loading times, bandwidth consumption, and user experience. This hub organizes all our resource optimization content, from compression to modern protocols.
These optimizations complement Core Web Vitals improvements by reducing the bytes transferred and improving delivery efficiency.
Quick Navigation
| Topic | Type | Learn | Implement |
|---|---|---|---|
| Images | Visual Assets | Image Optimization Explained | Image Optimization Guide |
| Fonts | Typography | Font Loading Explained | Font Loading Guide |
| Compression | Transfer Size | Text Compression Explained | Compression Guide |
| Caching | Browser Cache | Caching Headers Explained | Caching Guide |
| Protocols | HTTP/2 & HTTP/3 | HTTP/2 & HTTP/3 Explained | Migration Guide |
Image Optimization
Images typically account for 50-70% of a page’s total weight. Proper optimization can dramatically reduce page size without sacrificing visual quality.
Why It Matters
- LCP Impact: Hero images are often the LCP element
- Bandwidth: Unoptimized images waste user data
- Page Weight: Largest contributor to total page size
Key Concepts
- Image Optimization Explained - Formats (WebP, AVIF), responsive images, quality vs. size
- Image Optimization Guide - Implementation with srcset, lazy loading, build pipelines
Optimization Targets:
| Metric | Target |
|---|---|
| Format | WebP or AVIF (with fallbacks) |
| Quality | 75-85% for photos |
| Dimensions | Match display size |
| Lazy Loading | Below-the-fold images |
Font Loading Optimization
Web fonts enhance design but can cause invisible text (FOIT) or layout shifts (FOUT) if not loaded properly.
Why It Matters
- FCP Impact: Font loading blocks text rendering
- CLS Impact: Font swapping causes layout shifts
- User Experience: Invisible text frustrates users
Key Concepts
- Font Loading Explained - FOIT, FOUT, font-display, subsetting
- Font Loading Guide - Self-hosting, preloading, variable fonts, FOFT
Optimization Targets:
| Strategy | Benefit |
|---|---|
font-display: swap |
Prevents FOIT |
| Preload critical fonts | Faster loading |
| WOFF2 format | Smallest file size |
| Self-hosting | Eliminates third-party delays |
| Subsetting | Removes unused characters |
Text Compression
Compression reduces file sizes by 70-90% for text-based resources (HTML, CSS, JavaScript, JSON).
Why It Matters
- Transfer Size: Dramatically reduces bytes over the wire
- TTFB Impact: Smaller responses = faster delivery
- Cost: Reduces bandwidth costs
Key Concepts
- Text Compression Explained - Gzip vs. Brotli, Accept-Encoding, Content-Encoding
- Compression Guide - Server configuration (Nginx, Apache, Node.js), build-time compression
Compression Comparison:
| Format | Compression | Browser Support | Best For |
|---|---|---|---|
| Brotli | Best (15-25% smaller) | All modern | Production |
| Gzip | Good | Universal | Fallback |
Caching Headers
Proper caching eliminates repeat downloads entirely, providing instant page loads for returning visitors.
Why It Matters
- Repeat Visits: Cached resources load instantly
- Server Load: Reduces requests to origin
- Bandwidth: Zero bytes transferred for cached resources
Key Concepts
- Caching Headers Explained - Cache-Control, ETag, max-age, immutable
- Caching Guide - Server configuration, asset versioning, CDN caching, invalidation
Recommended Cache Policies:
| Resource Type | Cache Policy | max-age |
|---|---|---|
| HTML | no-cache |
Always revalidate |
| CSS/JS (versioned) | max-age=31536000, immutable |
1 year |
| Images | max-age=31536000 |
1 year |
| Fonts | max-age=31536000 |
1 year |
| API Responses | max-age=60, stale-while-revalidate |
Short |
HTTP/2 and HTTP/3
Modern protocols dramatically improve how browsers load multiple resources simultaneously.
Why It Matters
- Multiplexing: Multiple requests over single connection
- Header Compression: Reduces redundant header data
- 0-RTT (HTTP/3): Instant connections for returning visitors
Key Concepts
- HTTP/2 & HTTP/3 Explained - Multiplexing, QUIC, connection migration
- Migration Guide - Server configuration, CDN setup, removing HTTP/1.1 workarounds
Protocol Comparison:
| Feature | HTTP/1.1 | HTTP/2 | HTTP/3 |
|---|---|---|---|
| Multiplexing | No | Yes | Yes |
| Header Compression | No | HPACK | QPACK |
| Transport | TCP | TCP | QUIC (UDP) |
| 0-RTT | No | No | Yes |
| Connection Migration | No | No | Yes |
Learning Roadmap
Follow this path to master resource optimization:
Level 1: Understanding the Basics
Start by understanding each optimization area:
- Image Optimization Explained - Visual asset fundamentals
- Font Loading Explained - Typography loading behavior
- Text Compression Explained - Compression algorithms
- Caching Headers Explained - Browser cache mechanics
- HTTP/2 & HTTP/3 Explained - Modern protocols
Level 2: Implementation
Apply optimization techniques:
- Image Optimization Guide - Implement modern formats and responsive images
- Font Loading Guide - Configure optimal font loading
- Compression Guide - Enable server compression
- Caching Guide - Configure cache headers
- HTTP/2 & HTTP/3 Migration Guide - Upgrade server protocols
Level 3: Optimization Chain
Understand how optimizations work together:
Resource Delivery Chain:
┌─────────────────────────────────────────────────────────────┐
│ 1. Protocol: HTTP/2 or HTTP/3 (multiplexed connections) │
│ ↓ │
│ 2. Caching: Check browser cache (avoid request entirely) │
│ ↓ │
│ 3. Compression: Brotli/Gzip (reduce transfer size) │
│ ↓ │
│ 4. Asset-Specific: │
│ ├── Images: WebP/AVIF, responsive, lazy loading │
│ └── Fonts: Preload, font-display, WOFF2 │
└─────────────────────────────────────────────────────────────┘
Impact on Core Web Vitals
Resource optimizations directly improve Core Web Vitals:
| Optimization | LCP | CLS | INP | FCP | TTFB |
|---|---|---|---|---|---|
| Image Optimization | ✅ Major | ✅ Minor | - | - | - |
| Font Loading | ✅ Minor | ✅ Major | - | ✅ Major | - |
| Compression | ✅ Minor | - | - | ✅ Minor | ✅ Minor |
| Caching | ✅ Major* | - | - | ✅ Major* | ✅ Major* |
| HTTP/2 & HTTP/3 | ✅ Minor | - | - | ✅ Minor | ✅ Minor |
*For returning visitors
Tools for Testing
| Tool | Tests |
|---|---|
| Lighthouse | Image optimization, compression, caching |
| WebPageTest | Full waterfall analysis, protocol detection |
| Chrome DevTools | Network analysis, cache status |
| PageSpeed Insights | Real-world and lab data |
Related Hubs
Continue learning with related topics:
- Performance SEO Hub - Core Web Vitals and performance metrics
- Basic SEO Hub - Foundational SEO elements
References
- web.dev - Fast load times
- MDN Web Docs - HTTP Caching
- Chrome Developers - Lighthouse Performance Audits
Try It Yourself
Ready to audit your resource optimization?
🔧 Download UXR SEO Analyzer (Free, 100% local analysis)
Disclaimer: The analyzers in this extension are reference guides based on official documentation from MDN, web.dev, and Chrome Developers. They do not represent absolute truths about how search engines evaluate your content—only search engines know their internal algorithms. Use these recommendations as a starting point to improve your site.
Last updated: December 15, 2025