Static Asset Management: CDN Delivery with Cache Busting

This article explains how we manage and deliver CSS, JavaScript, and other static assets efficiently.

The Problem: Static Assets Need Optimization

A typical page loads:

  • CSS files: Stylesheets for layout and design

  • JavaScript files: Application code and libraries

  • Images: Product images, thumbnails, icons

  • Fonts: Web fonts for typography

Without optimization:

  • Slow downloads: Large files take time

  • No caching: Re-download on every visit

  • No compression: Wasted bandwidth

  • No CDN: Slow for global users

This results in 3-5 second page loads.

The Solution: S3 + CloudFront + Cache Busting

We use a three-part strategy:

  1. S3 storage: Scalable object storage for assets
  2. CloudFront CDN: Global edge locations for fast delivery
  3. Cache busting: Version-based URLs force updates

Static Asset Storage

Static assets are stored in S3:

  • S3 bucket: Object storage for static files

  • Content: CSS, JavaScript, images, fonts

  • Organization: Structured by asset type

CloudFront Delivery

CloudFront serves static assets:

  • Edge locations: Global CDN for fast delivery

  • Caching: Long TTL for static assets

  • Compression: Gzip for text-based assets

  • SSL/TLS: HTTPS for all asset delivery

Cache Busting

We use versioning for cache busting:

  • Version numbers: Asset version in filename

  • Manifest: Central registry of asset versions

  • Automatic updates: New version triggers cache invalidation

Asset Optimization

We optimize assets for performance:

  • Minification: CSS and JavaScript minification

  • Image optimization: WebP format, responsive images

  • Sprite sheets: CSS sprites for icons

  • Code splitting: Lazy loading for non-critical assets

Asset Pipeline

The asset pipeline flows through these stages:

  1. Source Assets: Original CSS, JavaScript, and images
  2. Minification: Remove whitespace, shorten variable names
  3. Versioning: Add version hash to filename
  4. S3 Upload: Store in object storage
  5. CloudFront CDN: Distribute to edge locations
  6. Browser Cache: Client-side caching

Asset Inclusion

Assets are included in templates:

  • CSS: <link rel="stylesheet">

  • JavaScript: <script src="">

  • Images: <img src="">

  • Version: Auto-included from manifest

Summary

Static asset management provides:

  • S3 storage: CSS, JavaScript, images, fonts

  • CloudFront CDN: Fast global delivery

  • Cache busting: Version numbers for updates

  • Optimization: Minification, compression, optimization

  • Automatic updates: Versioned asset delivery