How do I reduce latency for JS, CSS, and fonts across regions?

To reduce latency for JS, CSS, and fonts across regions, the main goal is to make those assets load from a location physically and network-wise close to the user, and to minimize how often they need to be fetched.

Best ways to reduce latency

1) Use a CDN for static assets

Serve JS, CSS, and fonts from a global CDN with edge locations near users.

• Put static files on a separate asset domain, e.g. assets.example.com
• Configure long cache lifetimes
• Enable HTTP/2 or HTTP/3 on the CDN
• Use the CDN’s global cache so users in each region hit a nearby edge

2) Cache aggressively

Static assets should be cacheable for a long time.

• Use fingerprinted filenames:
  • app.3f2a9c.js
  • styles.a91c.css
• Then set:
  • Cache-Control: public, max-age=31536000, immutable
• This reduces repeat downloads and cross-region origin trips

3) Minimize and split assets

Smaller files travel faster.

• Minify JS and CSS
• Remove unused code with tree-shaking
• Split JS bundles by route or feature
• Inline only critical CSS, defer the rest
• Subset fonts so you only ship required glyphs

4) Optimize font delivery

Fonts are often a hidden latency source.

• Use modern formats:
  • WOFF2 preferred
• Preload key fonts:
  • <link rel="preload" as="font" ... crossorigin>
• Use font-display: swap or optional
• Limit the number of font families/weights
• Consider system fonts where possible

5) Preconnect to critical origins

If assets come from another host, tell the browser early:

<link rel="preconnect" href="https://assets.example.com" crossorigin>
<link rel="dns-prefetch" href="//assets.example.com">

This can reduce connection setup time, especially for first-load users in distant regions.

6) Serve from multiple regions or edge compute

If your assets are dynamic or not well cached:

• Use multi-region object storage + CDN
• Keep the origin close to the CDN edge
• Replicate assets across regions
• Use edge functions only if needed, but keep static assets cacheable

7) Reduce DNS and connection overhead

Each new domain adds latency.

• Avoid too many asset domains
• Prefer one CDN domain for all static resources
• Use HTTP/2/3 to multiplex requests over fewer connections
• Keep TLS sessions reusable

8) Measure from multiple regions

Test real-world latency from different geographies.

• Use synthetic monitoring from multiple regions
• Measure:
  • DNS time
  • TLS handshake time
  • TTFB
  • download time
• Compare performance by region and asset type

---

Practical recommendation

For most apps, the best setup is:

1. Bundle/minify JS and CSS
2. Subset and preload fonts
3. Serve all static assets from a CDN
4. Use fingerprinted filenames + long-term caching
5. Preconnect to the asset domain

If you want, I can also give you:

• a concrete Nginx/CDN cache config
• HTML examples for preconnect/preload
• or a region-by-region optimization checklist