Cache Headers Every AEM Dev Should Know

[#1]

Cache Headers Every AEM Dev Should Know

by @daniel-strmecki

Overview

As an Adobe Experience Manager (AEM) developer, understanding HTTP cache headers is essential to optimize content delivery, enhance website performance, and ensure a seamless user experience. Cache headers play a critical role in controlling how content is stored and served by browsers, and intermediary caches like the AEM Apache/Dispatcher and CDN. Here are the most important cache headers every AEM developer should know how to use and apply:

• Cache-Control
  • Defines caching policies for browsers and intermediary cache layers (Dispatcher and CDN)
    
  • Static assets like CSS, JS, and images usually have a longer max-age, while frequently updated pages and APIs might use no-cache or a short max-age to ensure fresh content is served to end users
  • If we set the Cache-Control header on the AEM Publisher, it will be applied to the Apache/Dispatcher, given that TTL is enabled in the Dispatcher configuration
• Expires
  • Specifies a date and time after which the resource should be considered stale
  • Serves a similar purpose to Cache-Control: max-age but uses an absolute timestamp
  • Largely redundant nowadays when the Cache-Control header provides a more flexible and robust way to manage caching behavior
• Age
  • Not a directive but a response debug header
  • Indicates the time (in seconds) since the cached resource was fetched from the origin server
  • Sent OOTB in Apache/Dispatcher, but not on OTTB Adobe-managed CDN
    
• ETag
  • Provides a unique identifier for a specific version of a resource
  • Enables browser or CDN to quickly revalidate cached assets without downloading the entire resource
  • Saves bandwidth by not resending the resource again if the client's ETag value is the same as the current ETag value of the resource on the server
    
  • Calculating unique ETag value is not available OOTB in AEM, but a good solution is provided in ACS Commons.
• Vary
  • Tells the cache layers which request headers should be considered when deciding whether to serve a cached response
  • Ensures the correct variant of a resource is served based on specific request attributes
  • Developers may vary the cache based on User-Agent to serve different versions of a page for mobile and desktop users.
• Surrogate-Control
  • Similar to the Cache-Control but is intended only for intermediary caches, such as CDNs
  • Developers can use it to set a longer TTL for CDN caches while using a shorter TTL for browser caches via Cache-Control

  • Can be used in the the AEM BYO CDN model to disable caching by the Adobe-provided Fastly CDN

• Surrogate-Key
  • Allows developers to tag cached content on the Adobe-provided OOTB Fastly CDN with specific cache keys
  • This enables developers to group and invalidate/clear related cached objects efficiently
• X-Cache
  • Not a directive but a response debug header added by some cache layers OOTB, such as CDNs
  • Indicates to developers whether a resource was served from the cache or fetched from the origin server
  • In AEMaaCS it it is set by the Adobe-proved OOTB Fastly CDN, not the Apache/Dispatcher.
• X-Served-By
  • Not a directive but a response debug header added by some cache layers OOTB, such as CDNs
  • Helps developers identify which server or cache node handled a particular request
  • In AEMaaCS it it is set by the Adobe-proved OOTB Fastly CDN, not the Apache/Dispatcher.

Full Article

Read the full article on https://meticulous.digital/blog/f/cache-headers-every-aem-dev-should-know to find out more.

Q&A

Please use this thread to ask questions relating to this article

[#2]

@daniel-strmecki super helpful!

[#3]

@daniel-strmecki  Good information helpful

[#4]

@daniel-strmecki Great insights, much appreciated!