Intro
You have an upcoming event that will spike traffic on your website and you need a fast solution to avoid crashing ?
Or you just want to improve and optimize performance ?
If so, you may be in the right place.
I will show you how you can drastically improve performance of your website with Cloudflare caching.
Cloudflare caching
Caching is the main component of Cloudflare that we'll need, caching entire pages of your website will drastically improve performance.
The goal is to cache as much pages as possible.
For example, if you have an e-commerce website, you'll want to cache all product pages and listing pages with a refresh interval (1hr - 24hr).
Setup Cloudflare
Account
First you'll need to create an account if you don't already have one.
Add your website to Cloudflare
1. Once you're logged in and are on the dashboard, click on Add site button.
2. Then you'll be asked to enter your domain name (shown below)
Enter your domain and click on Add site
3. After that you will be asked to choose a pricing plan
You can start with the Free plan, you'll be able to upgrade afterwards if necessary.
4. Review DNS
Cloudflare will scan your domain's existing DNS records, review them make sure that all records have been detected, if there are missing records, add them manually.
5. Change nameservers
You'll need to change your domain's nameservers on the website (registrar) where you bought the domain.
Cloudflare tells you to which nameservers you need to change them as shown below.
Once you've changed your nameservers, you'll need to wait until DNS propagation finishes, you'll receive an email from Cloudflare when it's done.
Setup caching
Once your website is running on Cloudflare network, now you can enable caching on your website with regex rules.
At this point, you need to know what pages of your website you can fully cache.
1. Go to Page Rules
Rules -> Page Rules
2. Create a cache everything page rule
Example
In this example i am creating a page rule that will cache all blog articles.
It will cache all html, css and js for 7 days after which it will refresh the cache.
Click on Save and Deploy Page Rule to create and enable the page rule.
3. Create more Cache everything page rules if needed
Bear in mind that the Free plan only allows 3 page rules, so if you need more than 3 page rules, consider upgrading to Pro plan which is 20$/month.
Once you've created and enabled your page rules, you should immediately see the acceleration of your website.
Rules example
Here is an example of Page rules
Red text = rule explanation
I say it again, Order of the rules is important.
Page Rule 1: www.iterativecode.io/some-dynamic-content
This rule tells cloudflare to avoid caching this page maybe because it has forms or other dynamic content in it.
Page Rule 2: www.iterativecode.io/
This rule tells cloudflare to cache the homepage of the website.
Page Rule 3: www.iterativecode.io/*
This rule tells cloudflare to cache all other pages of website.
Keep in mind that this rule does not negate the Page Rule 1 because of the order.
Conclusion
Thank you for reading, hope this was helpful, if so consider leaving a like.