CDN Configuration Issues | Blue Frog Docs

CDN Configuration Issues

Diagnose and fix Content Delivery Network configuration and caching issues

CDN Configuration Issues

What This Means

Content Delivery Network (CDN) issues prevent optimal content delivery from edge servers, resulting in slower page loads, higher origin server load, and inconsistent user experiences across regions.

Impact

  • Slow global performance - Users far from origin experience delays
  • Higher server costs - Origin handles more traffic
  • Poor cache hit rates - Resources fetched repeatedly
  • Inconsistent experience - Performance varies by location

How to Diagnose

Check CDN Headers

Look for CDN-specific response headers:

curl -I https://example.com/script.js

Common headers:

Header CDN Values
cf-cache-status Cloudflare HIT, MISS, BYPASS, EXPIRED
x-cache AWS CloudFront Hit from cloudfront, Miss from cloudfront
x-fastly-request-id Fastly Request identifier
age Generic Seconds in cache

Check Cache Performance

  • HIT - Served from cache (good)
  • MISS - Fetched from origin (first request)
  • BYPASS - Cache intentionally skipped
  • EXPIRED - Cache expired, refetched

General Fixes

1. Configure Cache-Control Headers

Set appropriate caching policies:

# Static assets (long cache)
Cache-Control: public, max-age=31536000, immutable

# HTML pages (short cache)
Cache-Control: public, max-age=3600, must-revalidate

# API responses (no cache)
Cache-Control: no-store, private

2. Set Up Cache Rules

Cloudflare Page Rules:

  • Cache Everything for static paths
  • Bypass Cache for dynamic content
  • Set Edge Cache TTL

AWS CloudFront Behaviors:

  • Configure path patterns
  • Set TTL values
  • Enable compression

3. Use Proper File Versioning

Enable long caching with versioned filenames:

<!-- Version in filename -->
<script src="/js/app.v2.1.0.js"></script>

<!-- Content hash -->
<script src="/js/app.a1b2c3d4.js"></script>

<!-- Query parameter (less reliable) -->
<script src="/js/app.js?v=2.1.0"></script>

4. Enable Compression

Configure CDN to serve compressed content:

# Request
Accept-Encoding: gzip, br

# Response
Content-Encoding: gzip

Supported formats:

  • gzip - Universal support
  • brotli (br) - Better compression, modern browsers

5. Configure Origin Settings

  • Set appropriate origin timeouts
  • Enable origin shield if available
  • Configure failover origins

CDN Best Practices

Assets to Cache

  • JavaScript files
  • CSS stylesheets
  • Images and media
  • Web fonts
  • Static HTML (where appropriate)

Assets NOT to Cache

  • User-specific content
  • Shopping carts
  • Authenticated pages
  • Real-time data

Monitoring

Track these metrics:

  • Cache hit ratio - Target >90% for static assets
  • Origin requests - Should be minimal
  • Edge latency - Response time from CDN
  • Bandwidth savings - Data served from cache

Platform-Specific Guides

Platform CDN
Shopify Built-in Fastly CDN
WordPress Use plugin + external CDN
Squarespace Built-in CDN
Webflow Built-in CDN
↑ Back to top
// SYS.FOOTER