How do I improve latency for fonts, images, and media files?

To improve latency for fonts, images, and media files, the main goals are to reduce file size, serve assets closer to users, and avoid unnecessary requests. Here are the most effective tactics:

1. Use a CDN

Serve static assets from a Content Delivery Network (CDN) so users download them from an edge location near them.

• Greatly reduces round-trip time
• Helps with global audiences
• Works well for images, fonts, JS/CSS, and media

2. Optimize and compress assets

Images

• Use modern formats: AVIF or WebP
• Resize images to the exact display dimensions
• Compress aggressively without visible quality loss
• Use responsive images (srcset, sizes) so smaller devices get smaller files

Fonts

• Use WOFF2 whenever possible
• Subset fonts to include only needed characters/styles
• Avoid loading too many font weights/styles

Media files

• Use adaptive streaming for video/audio (HLS/DASH)
• Compress media appropriately
• Serve multiple resolutions/bitrates

3. Lazy-load non-critical assets

Delay loading assets that are not immediately visible.

• Lazy-load offscreen images
• Defer below-the-fold video/audio
• Load fonts only when needed

4. Preload critical assets

For assets required immediately on page load:

• Use <link rel="preload"> for key fonts and hero images
• Preconnect to asset origins early (<link rel="preconnect">)
• Prioritize critical resources over non-essential ones

5. Set effective caching headers

Make assets cacheable in the browser and at the edge:

• Use long Cache-Control for versioned files
• Fingerprint filenames (e.g. logo.abc123.png)
• Avoid frequent cache invalidation for static assets

6. Reduce requests and overhead

• Combine only when it makes sense
• Remove unused images/fonts
• Avoid loading background media unless needed
• Use SVG for simple icons/logos

7. Improve delivery and protocol usage

• Use HTTP/2 or HTTP/3
• Enable Brotli or gzip compression where applicable
• Keep connections warm with preconnect
• Avoid redirect chains for assets

8. For fonts specifically

Fonts often hurt perceived performance because they can block rendering.

Best practices:

• font-display: swap or optional
• Preload the most important font files
• Self-host fonts if it improves control and caching
• Limit font families and weights
• Subset by language/script if possible

9. For images specifically

• Use placeholders or low-quality image previews (LQIP)
• Serve images sized correctly for each layout breakpoint
• Prioritize above-the-fold images
• Avoid huge background images when a smaller alternative works

10. For media specifically

• Don’t load autoplay media unless necessary
• Use thumbnails/posters first
• Stream instead of downloading full files
• Use lower bitrate defaults for slower connections

Quick wins

If you want the biggest improvements fast:

1. Put assets on a CDN
2. Convert images to WebP/AVIF
3. Switch fonts to WOFF2 and subset them
4. Lazy-load non-critical media
5. Add proper caching headers

If you want, I can also give you:

• a priority checklist for web performance,
• example HTML/CSS for preload and lazy-loading, or
• a Cloudflare / Nginx / S3 setup for these assets.