Caching Rule Examples

Let’s start by defining the URLs that we want our rules to apply to. The easiest way is to use wildcards. Regular expressions are a subject in itself and they will not be covered here. This means that all examples will have the “is_wildcard” flag set to true.

One important consideration is that the URL that is matched against the expression does not contain the domain name. In other words, it is relative. For example, the absolute URL “http://www.mydomain.com/images/flower.jpg” will become “/images/flower.jpg”.

The most generic wildcard expression, which matches all objects on the site, is “**”. The globstar pattern (**) matches any character, any number of times, recursively, so it will match “/index.html” as well as “/images/album/today/001.jpg” or any other URL.

Let’s now match all JPEG images in /images, but not in its subdirectories. The expression for this is “/images/*.jpg”.

If we also want to match the JPEG images in the subdirectories, the expression becomes “/images/**.jpg”.

JPEG images can have either the .jpg or the .jpeg extension. We also want to match PNG files. To match all three, the expression becomes “/images/**.{jpg,jpeg,png}”.

It might be that our images have a specific filename format. Let’s assume it is “img” followed by three digits, then the extension (like “img123.png”). The expression becomes “/images/**/img[0-9][0-9][0-9].{jpg,jpeg,png}”.

Knowing how to define the URL(s), we can now create custom caching rules.

Example–Caching All Images for 1 Year

Assume we know we can cache all images for one year (31560000 seconds). Our first rule will look like this:

{  
   "version":1,
   "url":{  
      "is_wildcard":true,
      "value":"/images/**"
   },
   "edge_caching":{  
      "override_origin":true,
      "override_no_cc":true,
      "new_ttl":31560000
   },
   "browser_caching":{  
      "override_edge":false,
      "new_ttl":0,
      "force_revalidate":false
   },
   "cookies":{  
      "override":false,
      "remove_ignored_from_request":false,
      "remove_ignored_from_response":false,
      "ignore_all":false,
      "list_is_keep":false,
      "keep_or_ignore_list":[  

      ],
      "remove_ignored_from_request":false,
      "remove_ignored_from_response":false
   }
}

Example–Caching Images for 1 Day

However, our site also has a directory containing fresh images that are added each day in “/images/today/”. We want to cache only those images for one day (86400 seconds). We have to add another rule to the one defined above:Notice that, apart from override_origin, all other override flags are false. This means we will only modify the edge cache TTL for images and set it to one year, regardless of what the origin says, and we will pass the origin cache control settings to the browser.

{
    "version": 1,
    "url": {
        "is_wildcard": true,
        "value": "/images/**"
    },
    "edge_caching": {
        "override_origin": true,
        "override_no_cc": true,
        "new_ttl": 31560000
    },
    "browser_caching": {
        "override_edge": false,
        "new_ttl": 0,
        "force_revalidate": false
    },
    "cookies": {
        "override": false,
        "remove_ignored_from_request": false,
        "remove_ignored_from_response": false,
        "ignore_all": false,
        "list_is_keep": false,
        "keep_or_ignore_list": [
        ],
        "remove_ignored_from_request": false,
        "remove_ignored_from_response": false
    }
},
{
    "version": 1,
    "url": {
        "is_wildcard": true,
        "value": "/images/today/**"
    },
    "edge_caching": {
        "override_origin": true,
        "override_no_cc": true,
        "new_ttl": 86400
    },
    "browser_caching": {
        "override_edge": false,
        "new_ttl": 0,
        "force_revalidate": false
    },
    "cookies": {
        "override": false,
        "remove_ignored_from_request": false,
        "remove_ignored_from_response": false,
        "ignore_all": false,
        "list_is_keep": false,
        "keep_or_ignore_list": [
        ],
        "remove_ignored_from_request": false,
        "remove_ignored_from_response": false
    }
}

With these two rules in place, we will cache all images for one year, except the ones in “/images/today”, which we cache for one day.

Example–Caching Background Images

Let’s now assume there’s a directory containing big background images, which doesn’t change very often. Moreover, these large images are used by the browser very often, so we would like to cache them for a long time. The trouble is we don’t know when they change, but it’s not more than once a day.

The solution is to let the edge cache keep these images for one day, but allow the browser to keep them for one year, with the condition that it must check that they haven’t changed every time they are loaded. It’s much faster to check if a resource has changed than downloading it completely, especially since the browser only has to validate against the copy stored in the edge cache, which is up to date because the images don’t change more than once per day.

The corresponding rule is the following. The sections that are of no interest (with override flags set to false) are omitted for clarity:

"url": {        
        "is_wildcard": true,
        "value": "/images/backgrounds/**"
    },
…
    "edge_caching": {
        "override_origin": true,
        "override_no_cc": true,
        "new_ttl": 86400
    },
    "browser_caching": {
        "override_edge": true,
        "new_ttl": 31560000,
        "force_revalidate": true
    },
…

Example–Caching a Browser Cookie

Finally, let’s assume we have a special URL, “/images/geobackground.php”, that returns a background image based on the geographical location of the user. The location is stored in a browser cookie called “geoloc”. We would like to store the background in the edge cache for each possible value of the “geoloc” cookie, which means we have to add the contents of the cookie to the hash value of “/images/geobackground.php”. The relevant parts of the rule are displayed:

    "url": {
        "is_wildcard": true,
        "value": "/images/geobackground.php"
    },
…
    "cookies": {
        "override": true,
        "remove_ignored_from_request": false,
        "remove_ignored_from_response": false,
        "ignore_all": false,
        "list_is_keep": true,
        "keep_or_ignore_list": [
        "geoloc"
        ],
        "remove_ignored_from_request": false,
        "remove_ignored_from_response": false
    }

If all these rules are present, in the order they have been presented, the cache behavior will be:

  • Store one instance of the “/images/geobackground.php” image for every value of the “geoloc” cookie, for one year (because of the first rule, applying to all images) and also for one year in the browser cache.
  • Store all background images in “/images/backgrounds/” for one day in the edge cache, but for one year in the browser cache, forcing a revalidation at every access.
  • Store all of today’s images in “/images/today/” for one day in the edge cache and also for one day in the browser cache.
  • Store all other images for one year in both caches.

As you can see, a more specific rule overrides the setting of any general rules preceding it:

{
    "version": 1,
    "url": {
      "value": "\\.(jpg|jpeg|png|gif|webp|js|css|woff)(\\?.*)?$",
      "is_wildcard": false
    },
    "edge_caching": {
      "new_ttl": 604800,
      "override_origin": true,
      "override_no_cc": true
    },
    "browser_caching": {
      "new_ttl": 0,
      "override_edge": false,
      "force_revalidate": false
    },
    "cookies": {
      "remove_ignored_from_request": true,
      "ignore_all": true,
      "remove_ignored_from_response": true,
      "override": true,
      "list_is_keep": false,
      "keep_or_ignore_list": []
    }
  }



Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk