Reasonable use of CDN to accelerate static resources

Basic Principles of CDN Acceleration for Static Resources

CDN (Content Delivery Network) deploys edge node servers globally to cache static resources closer to users. When a user requests a resource, the CDN serves it from the nearest node instead of fetching it directly from the origin server. This distributed architecture significantly reduces network latency and improves resource loading speed.

Typical CDN workflow:

1. User initiates a resource request (e.g., images, JS, CSS files)
2. DNS resolution routes the request to the nearest CDN node
3. If the node has the resource cached, it returns it directly
4. If not cached, the CDN fetches and caches the resource from the origin server

// Traditional resource reference
<script src="/js/main.js"></script>

// Resource reference using CDN
<script src="https://cdn.example.com/js/main.js"></script>

Resource Types Best Suited for CDN Acceleration

Not all resources are suitable for CDN acceleration. The following types are particularly well-suited:

1. Image resources: Especially high-resolution images, product display images, etc.

   <!-- Original image reference -->
   <img src="/images/product.jpg">
   
   <!-- After CDN acceleration -->
   <img src="https://cdn.example.com/images/product.jpg">
   

2. Frontend static files:

   • JavaScript files (especially third-party libraries)

     <!-- Direct jQuery reference -->
     <script src="/js/jquery.min.js"></script>
     
     <!-- Using CDN -->
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
     

   • CSS stylesheets
   • Web font files

3. Media files:

   • Video files (MP4, WebM, etc.)
   • Audio files (MP3, WAV, etc.)

4. Downloadable files:

   • PDF documents
   • Software installation packages
   • Compressed files

CDN Domain Strategies and Best Practices

Parallel Loading with Multiple Domains

Browsers limit concurrent requests to the same domain (typically 6-8). Using multiple CDN domains can bypass this limit:

<!-- Using two different CDN domains -->
<link href="https://cdn1.example.com/css/style.css" rel="stylesheet">
<script src="https://cdn2.example.com/js/app.js"></script>

Subdomain Segmentation

Use different subdomains for different resource types:

static1.example-cdn.com - for images
static2.example-cdn.com - for JS/CSS
static3.example-cdn.com - for media files

Avoiding Cookie Contamination

Set up cookie-free domains specifically for static resources:

# Nginx configuration example
server {
    listen 80;
    server_name static.example.com;
    
    location / {
        # Disable cookies
        add_header Set-Cookie "";
    }
}

Cache Control and Version Management

Cache Header Settings

Reasonable caching strategies can greatly improve performance:

HTTP/1.1 200 OK
Cache-Control: public, max-age=31536000
Expires: Wed, 21 Oct 2026 07:28:00 GMT
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

File Fingerprinting

Generate unique filenames using content hashes for long-term caching:

// Webpack configuration example
output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

Fallback Mechanism

Automatically fall back to local resources if the CDN is unavailable:

<script src="https://cdn.example.com/js/main.js"></script>
<script>
window.onerror = function() {
    var fallback = document.createElement('script');
    fallback.src = '/js/main.js';
    document.body.appendChild(fallback);
}
</script>

Advanced CDN Optimization Techniques

Intelligent Resource Selection

Dynamically load resources of different quality based on network conditions:

// Detect network speed and load appropriate quality images
function loadAdaptiveImage() {
  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  const img = document.getElementById('product-img');
  
  if (connection) {
    if (connection.effectiveType === '4g') {
      img.src = 'https://cdn.example.com/images/high-quality.jpg';
    } else {
      img.src = 'https://cdn.example.com/images/standard-quality.jpg';
    }
  }
}

Preconnect and Preload

<!-- Establish early connection to CDN -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- Preload critical resources -->
<link rel="preload" href="https://cdn.example.com/js/main.js" as="script">

Edge Computing Processing

Modern CDNs support simple resource processing at edge nodes:

# Edge node image processing example
location ~* ^/images/(.*)\.(jpg|png|webp)$ {
    image_filter resize 800 600;
    image_filter_webp_quality 85;
}

Monitoring and Performance Measurement

Resource Loading Monitoring

// Measure CDN resource loading time using Performance API
const resources = performance.getEntriesByType('resource');
resources.forEach(resource => {
  if (resource.name.includes('cdn.example.com')) {
    console.log(`CDN resource ${resource.name} loading time: ${resource.duration}ms`);
  }
});

Real User Monitoring (RUM)

// Collect real user CDN performance data
window.addEventListener('load', function() {
  const timing = performance.timing;
  const cdnTiming = timing.responseEnd - timing.domainLookupStart;
  
  // Send to analytics platform
  navigator.sendBeacon('/analytics', {
    type: 'cdn_performance',
    duration: cdnTiming
  });
});

Security and Cost Considerations

HTTPS Secure Transmission

Ensure all CDN resources use HTTPS:

<!-- Insecure mixed content triggers browser warnings -->
<script src="http://cdn.example.com/js/main.js"></script>

<!-- Correct HTTPS reference -->
<script src="https://cdn.example.com/js/main.js"></script>

Bandwidth Cost Optimization

1. Enable CDN compression (Gzip/Brotli)
2. Set intelligent caching rules
3. Implement lazy loading for images
4. Apply traffic limiting policies

# Nginx rate limiting configuration
limit_req_zone $binary_remote_addr zone=cdn_zone:10m rate=100r/s;

server {
    location / {
        limit_req zone=cdn_zone burst=50;
    }
}

Hotlinking Prevention

Prevent other websites from stealing your CDN resources:

location ~* \.(jpg|png|gif|jpeg)$ {
    valid_referers none blocked example.com *.example.com;
    if ($invalid_referer) {
        return 403;
    }
}