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.
- Login to your CloudFlare dashboard, click the settings icon and choose Page rules.
- 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.
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
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.
Note: I conducted a caching experiment and discovered that Cache set using website performance settings can be overridden by that set via Pagerule.