My JS and CSS are slow in some regions, how do I troubleshoot CDN latency?

To troubleshoot CDN latency for JS/CSS, isolate where the delay is happening: DNS, connection/TLS, CDN edge selection, origin fetch, or browser rendering. Here’s a practical approach.

1) Measure the right timings

Use browser dev tools or curl to compare:

• DNS lookup
• TCP connect
• TLS handshake
• TTFB (time to first byte)
• Download time

In Chrome DevTools, look at the Timing tab for a slow JS/CSS request. If TTFB is high, the issue is often CDN edge/origin; if connect/TLS is high, it’s network path or handshake.

Quick command:

curl -o /dev/null -s -w \
'dns:%{time_namelookup} connect:%{time_connect} tls:%{time_appconnect} ttfb:%{time_starttransfer} total:%{time_total}\n' \
https://cdn.example.com/app.css

Run this from multiple regions if possible.

---

2) Check CDN edge routing / POP selection

A common cause is users being routed to a faraway or suboptimal edge.

What to verify:

• Are users in slow regions hitting the nearest POP?
• Is GeoDNS/Anycast behaving as expected?
• Is there a regional POP outage or degraded route?

How:

• Look at CDN logs or response headers for:
  • edge POP identifier
  • cache status
  • request ID
• Compare the POP used in fast vs slow regions.

Typical headers vary by CDN:

• Cloudflare: cf-ray
• Akamai: x-cache, akamai-*
• Fastly: x-served-by, x-cache
• CloudFront: x-amz-cf-pop, x-cache

If users in a region are consistently landing on a distant POP, that’s a routing/config issue.

---

3) Determine if it’s cache hit or origin fetch

Slow JS/CSS often means the CDN is missing cache and going to origin.

Check:

• Cache hit ratio
• Cache-Control headers
• Age header
• CDN logs for miss reasons

Look for:

• MISS, BYPASS, EXPIRED, STALE
• Low TTLs
• no-cache, private, must-revalidate
• Query strings preventing caching
• Cookies causing cache bypass

Improve:

• Serve static assets with long TTLs:

  Cache-Control: public, max-age=31536000, immutable
  

• Use file hashing for versioning:
  • app.3f2a1c.js
  • styles.8bd21.css

This lets you cache aggressively and avoid repeated origin fetches.

---

4) Check origin performance from the CDN

If the CDN has a cache miss, slow origin responses will make the asset slow everywhere, especially far from origin.

Symptoms:

• TTFB high only on misses
• Some regions worse than others because of origin distance

Actions:

• Measure origin latency from multiple regions
• Ensure origin is close to CDN or in multiple regions
• Enable origin shield / tiered caching if available
• Check origin server load, TLS, and network saturation

---

5) Inspect DNS latency

Slow DNS can make all assets feel slow, especially if a region has poor resolver paths.

Check:

• Time to first byte at the resolver level
• Whether your DNS provider has good regional performance
• CNAME chain length

Tips:

• Use a fast authoritative DNS provider
• Avoid long CNAME chains
• Ensure low TTLs only where necessary
• Consider DNS prefetch / preconnect for critical third-party domains:

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

---

6) Compare HTTP/2, HTTP/3, and TLS behavior

Some regions or networks may have issues with QUIC/HTTP3 or older TLS paths.

Check:

• Is HTTP/3 enabled?
• Are fallbacks working?
• Any packet loss causing handshake retries?
• TLS cert chain size or handshake overhead?

Test:

• Force HTTP/2 vs HTTP/3 if your CDN supports it
• Compare performance from slow regions
• Look for handshake failures or retries in CDN logs

---

7) Use synthetic testing from multiple geographies

This is often the fastest way to confirm regional latency.

Good tools:

• WebPageTest
• SpeedCurve
• Catchpoint
• Pingdom
• Your cloud providers’ region-based test instances

Test the same asset URL from:

• North America
• Europe
• Asia
• South America
• Africa / Middle East if relevant

Compare:

• DNS
• TTFB
• cache hit ratio
• POP selection

---

8) Check for request bloat

Sometimes the asset is “slow” because it’s simply too large or too many requests are blocking page rendering.

For JS/CSS:

• Minify
• Tree-shake
• Split bundles
• Remove unused CSS
• Compress with Brotli/Gzip
• Avoid render-blocking where possible

Use:

Content-Encoding: br

for modern browsers if supported.

---

9) Watch for regional network issues outside your CDN

The problem may not be the CDN at all.

Possibilities:

• ISP peering issues
• Submarine cable congestion
• Country-level routing problems
• Corporate/firewall inspection delaying TLS or QUIC

If only one region is slow and CDN metrics look normal, compare:

• traceroute/mtr results
• POP selection
• packet loss
• ISP-specific performance

---

10) Build a troubleshooting checklist

For each slow request, record:

• URL
• Region
• DNS time
• Connect/TLS time
• TTFB
• Total time
• CDN POP
• Cache status
• Origin fetch time
• File size
• Protocol (h2/h3)
• Response headers

This makes patterns obvious.

---

Common fixes by symptom

High DNS time

• Improve DNS provider
• Reduce CNAMEs
• Add prefetch

High connect/TLS time

• Check CDN edge proximity
• Enable HTTP/3
• Inspect packet loss / ISP routing

High TTFB with cache miss

• Improve origin performance
• Increase TTL
• Enable tiered caching / origin shield

High TTFB with cache hit

• Check POP health
• Investigate CDN incidents
• Compare different regions/POPs

Slow only for JS/CSS

• Reduce file size
• Add immutable caching
• Ensure Brotli
• Avoid cache-busting query strings if they break caching

---

If you want, I can help you build a step-by-step latency diagnosis workflow for your specific CDN (Cloudflare, CloudFront, Fastly, Akamai, etc.) or help interpret a curl/DevTools timing screenshot.