Skip to main content

Outline

At a glance
  • What it is: Cache static assets in browser/CDN for faster page loads.
  • Why it matters: Reduces latency, server load, and bandwidth usage.
  • Core APIs: UseStaticFiles middleware, Cache-Control headers, asp-append-version.
  • Best practices: Aggressive caching, cache busting, CDN integration, compression.

This module provides a comprehensive overview of static file caching within Optimizely solutions. Static file caching stores CSS, JavaScript, images, and fonts closer to the end-user (browser or CDN) to improve performance, reduce server load, and enhance user experience.

1. UseStaticFiles Middleware

var builder = WebApplication.CreateBuilder(args); // ... other services var app = builder.Build(); // Configure static files with cache headers app.UseStaticFiles(new StaticFileOptions { OnPrepareResponse = ctx => { const int durationInSeconds = 60 * 60 * 24 * 30; // 30 days ctx.Context.Response.Headers[HeaderNames.CacheControl] = "public,max-age=" + durationInSeconds; ctx.Context.Response.Headers[HeaderNames.Expires] = DateTime.UtcNow.AddSeconds(durationInSeconds).ToString("R"); } }); app.Run();

2. Cache-Control Headers

  • public: Can be cached by any cache.
  • private: Intended for a single user only.
  • no-cache: Must revalidate with the origin server.
  • no-store: Must not store request or response.
  • max-age=<seconds>: Time resource is considered fresh.
  • s-maxage=<seconds>: Applies to shared caches (CDNs/proxies).

3. File Versioning (Cache Busting)

Use the asp-append-version Tag Helper to append a unique hash to static file URLs:

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> <script src="~/js/site.js" asp-append-version="true"></script>

4. ETag and Last-Modified Headers

  • ETag: Unique identifier for resource version; 304 Not Modified if unchanged.
  • Last-Modified: Date/time resource was last changed; 304 Not Modified if unchanged.
  • The UseStaticFiles middleware handles these automatically.

5. CDN Integration

  • Edge Caching: CDNs cache assets closer to users for reduced latency.
  • Configuration: Set Cache-Control headers (max-age, s-maxage) for CDN.
  • Cache Invalidation: Purge URLs or zones when assets update; combine with file versioning.

6. Optimizely Media Assets

  • Media URL Rewriting: Serve images, videos, and documents via middleware/CDN.
  • Versioned Media URLs: Optimizely appends version query string to updated media assets.

Best Practices

  • Aggressive Caching: Use long max-age (30+ days) for static files.
  • Implement Cache Busting: Use asp-append-version or manual versioning.
  • Leverage CDN: For production, to ensure global performance.
  • Compression: Enable Gzip/Brotli for static assets.
  • Minification & Bundling: Reduce requests and file size.
  • Monitor Performance: Check browser tools or performance services to verify caching.

Conclusion

Static file caching is an indispensable technique for optimizing the performance and scalability of Optimizely CMS 12 and Commerce 14 solutions. By correctly configuring ASP.NET Core's static file middleware, leveraging HTTP caching headers, implementing robust cache busting strategies, and integrating with a CDN, development teams can significantly reduce page load times, decrease server load, and deliver a superior user experience. Adhering to these best practices ensures that static assets are delivered efficiently, contributing to a high-performing Digital Experience Platform.