CODEWITHSUNDEEP
amazon-web-servicesamazon-ec2
user3236765
user3236765

Reputation: 413

AWS Cloudfront and browser cache settings

Hi so I have AWS Cloudront running on my site. I also enabled browser caching through .htaccess file.

Soon after I enabled browser caching my Cloudfront hits went very low and misses very high.

My htaccess has following:

ExpiresByType text/css "access plus 7 days" 
ExpiresByType application/javascript "access plus 7 days" 
ExpiresByType text/javascript "access plus 7 days" 
ExpiresByType application/x-javascript "access plus 7 days" 
ExpiresByType text/js "access plus 7 days" 
ExpiresByType text/x-javascript "access plus 7 days" 
ExpiresDefault "access plus 2 days"

Is this to be expected with browser caching and Cloudfront? Thanks!

Upvotes: 1

Views: 1708

Answers (1)

Chris Simon
Chris Simon

Reputation: 6525

Depending on your specific .htaccess configuration - this could very well cause what you've seen.

Cloudfront Behaviour

If your backend doesn't nominate any specific cache headers, then cloudfront will cache according to your cloudfront configuration - but as there are no cache headers, the browser will generally NOT cache, but will hit cloudfront on each request. Cloudfront will record each as a HIT.

If your backend does nominate cache headers, Cloudfront will respect them - but also will pass them onto the browser, so the browser itself may cache the object. As such, the browser will only hit Cloudfront when the cache expires - but by that time, Cloudfront will also have expired its cache of the object - and will thus record it as a MISS.

See Specifying How Long Objects Stay in a Cloudfront Edge Cache and Specifying the Amount of Time that CloudFront Caches Objects for Web Distributions for more details on how Cloudfront and the browser handle different combination of origin headers.

.htaccess Config

Each of the ExpiresByType directives will cause a cache header Cache-Control: max-age=604800 to be added to each request (604800 is the number of seconds in 7 days) - which will signal to the browser that it can cache the object for that duration.

See this Caching Tutorial for a more detailed explanation of the different headers you can use to effect caching and their impact on caches (e.g. Cloudfront) and browsers.

Upvotes: 3

Related Questions