How To Set Browser Caching For Website Via CloudFlare Performance System

Caching means the temporary storage of web page files such as CSS stylesheet, JavaScript files, images and other binary object files (media files, PDFs, etc.) by the web browser. caching help reduce bandwidth consumption as well as increase site loading speed because the browsers uses the cache files it has rather than re-downloading them again.

If your website is powered by CloudFlare CDN, by default it will have a browser cache time to live(TTL) set to a day. according to Google, static resources should have a cache lifetime of at least a week.
Cloudflare cache setup overwrite the default cache settings sent by the web page header. say your origin server headers may be set to cache for 2 weeks and you set CloudFlare to cache your site for a month, CloudFlare will ignore that sent by your server and instead forward the cache instruction you had set in CloudFlare to the web browser to obey. follow the steps below to learn how to set cache via Cloudflare.

  1. Login to your CloudFlare dashboard, click the settings icon and choose Page rules.
    CloudFlare - click pagerule
  2. Setting up Page rule in cloudflare is only active or operational in the URL pattern inserted. By using the asterisk (*) character, you can create powerful dynamic patterns that can match a series of URLs, rather than just one. let’s examine the different url pattern and their matching.
    • yoursite.com – creating a pagerule for this url pattern is only active to that url but not subdomains(e.g – blog.yoursite.com) or folder/file path(e.g – yoursite.com/blog) of the url.
    • yoursite.com/* – this pattern matches for example: yoursite.com/blog, yoursite.com/directory but does not match blog.yoursite.com
    • *.yoursite.com this pattern matches example: blog.yoursite.com, www.yoursite.com But does not match: yoursite.com
    • *.yoursite.com/* – this rule only matches for example: blog.yoursite.com/directory

    Now that you have decided the URL pattern to set cache for, next is setting up the cache rule.
    in Custom caching choose “Basic caching” or do otherwise only if you know what you are doing.
    in Browser cache expire TTL, as per Google advice, choose a date equal or greater than a week(7 days).
    Afterward, click the Add rule to activate.
    Cloudflare cache pagerule

After setting cache to expire in 8 days time for wapden.net, a look into the HTTP Header one of it image URL http://wapden.net/wapden.png via my simple HTTP Header checker tool reveals

Expires: Fri, 27 Sep 2013 15:11:00 GMT
Cache-Control: public, max-age=691200

From the aboveFri, 27 Sep 2013 15:11:00 GMT from today is 8 days time and also converting 691200 seconds to days i.e 691200/60/60/24 equals 8 days

HTTP Header infornation of wapden.net domain

If you do not want to use the CloudFlare Page rule, you can also set Cache from your website Performance settings page as illustrated in the image below.
CloudFlare performance website settings

Note: I conducted a caching experiment and discovered that Cache set using website performance settings can be overridden by that set via Pagerule.

Don’t miss out!
Subscribe to My Newsletter
Invalid email address