Skip to content

Instantly share code, notes, and snippets.

@andypotanin

andypotanin/cloudfront-guide-and-cheatsheet.md

Last active November 20, 2017 14:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save andypotanin/0813087b57d046f02c1ce2fa2989eb82 to your computer and use it in GitHub Desktop.
Save andypotanin/0813087b57d046f02c1ce2fa2989eb82 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cloudfront-guide-and-cheatsheet.md

It helps to identify the type of content we will have.

  1. Content Pages - change often, most likely will have different content based on host
  2. Static Assets - scripts, styles and images. always same, even if host changes. See example #1
  3. Administrative Areas - require login and special cookies to be allowed.
  4. API and RPC - dont require cookies but should not be cached

For most dynamic pages that following headers should be allowed:

  • CloudFront-Is-Mobile-Viewer - only if WordPress may show different results based on user agent.
  • CloudFront-Viewer-Country - only set if needed. on UD we actually use this to detect the visitor's country to pre-fill their checkout form.
  • Host - without this, WordPress will not know what to show you, and you will get something like https://d3mutomj1d4h8w.cloudfront.net/

Specific cookies must be allowed to be passed. If not, cache will very rearely work because browsers will send a bunch of cookies, that may not matter for caching purposes. Allow the following cookie patterns on all "content pages" as well as administrative areas:

  • comment_author_*
  • wordpress_*
  • wp-settings-*
  • rabbit-*

Query parameters, if not enabled, will mean that realty.ci and realty.ci/?pageType=json return the same exact thing. The first one to be cached, will be returned until purged. Here is a list of our known/common query parameters that are used by content pages and static assets.

  • preview_* - used by preview links
  • ver - used by all JS/CSS enqueued files
  • customize_* - used by Customizer
  • pageType - used in our React themes
  • amd_asset_type
  • theme_custom_asset
  • redirect_to

In summary, important points to consider:

  • Use as few behaviour headers as possible to maximize cache coverage.
  • For some paths, no headers or cookies are needed since they are identical to everybody regardless of domain name.
  • Do allow the "ver" GET parameter since that is what WordPress uses, so that jquery.js?ver=1.2 is seen as different file form jquery.js?ver=2.1
  • If we cache something, we want to cache it for as long as possible, and purge it when needed. The min, max and default TTL should be fixed to "31536000".

Example 1 - Static Assets

Headers do not mater for static assets. For examle, all 3 of the following URLs will show the same exact content, regardless of what "host" is used:

  • dayafer.com/wp-includes/js/wp-embed.min.js
  • discodonniepresents.com/wp-includes/js/wp-embed.min.js
  • d3mutomj1d4h8w.cloudfront.net/wp-includes/js/wp-embed.min.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment