WordPress Tutorial: Put your full-page caching layer to CDN
Every website owner would like to get the website load faster. There are many caching layers and techniques, but one of the main ways to speed up the website is to set up a full-page caching layer. In good old days, this type of cache was set up with Varnish cache, later it has also been possible to achieve with the Nginx, but today we will describe a great way how to put your full-page caching layer to CDN (Content Delivery Network). And we are not joking. Free CloudFlare account with properly set page rules can make your websites fly!
Step 1: Install and set up the WPS Hide Login plugin
In a free CloudFlare account, we have just 3 page rules included. We will put all of them to good use. Firstly, we will put the whole wp-admin area and a wp-login area under the same page rule. To utilize that possibility, we need the free WPS Hide Login plugin for WordPress. When we install the plugin, we go straight to the WordPress General Settings and scroll down to the WPS Hide plugin setup. For login page we set up something with keyword “admin” in it, so for example “admin-login” would be great. Save these settings to take effect.
Step 2: First CloudFlare Page Rule for our website
Now it’s time to create our first page rule in CloudFlare dashboard. For this tutorial, we assume you already have a CloudFlare account and website added to it. Go to CloudFlare dashboard, to website settings under the “Page Rules” section. Click “add new page rule” button. Set up the page rules as you see on the following screenshot. Wildcard settings is set up to every page, which has the “admin” word in its URL. The main points of this page rule are to bypass caching and put rigorous security rules into effect. So we added many security rules set to the highest possible levels, and set it up to bypass the CloudFlare page cache (we will need it later, for front-end facing pages of our website). With this step, our admin area is additionally secured by CloudFlare.
Step 3: Second CloudFlare Page Rule for static content (WP Uploads)
This rule is set up to match every URL where the wp-content/uploads content is called, this is usually the static content of our website. The most important points here include browser cache setting to up to a year’s long (because we don’t update uploads often, most probably even never). “Cache Everything” set the CloudFlare cache to cache every single file with the proper path for this rule and edge cache (CloudFlare’s edge server’s cache) is set to up to a month. Security settings are turned off. This way our most static and heavy content (such as images) will load blazing fast forever. Finally, we put this rule under the first rule (to the “Last” place).
Step 4: Third CloudFlare Page Rule for Front-End visitor-facing website
This step will make your website literally fly for your visitors. Reddit, 9gag, 4chan, we are ready to publish the web’s most viral content and share it exponentially! These settings will take care of minification of site assets, create a strong caching layer (to be able to handle thousands of concurrent visitors) and set your servers free of any significant load. Here pay attention to “Cache Everything”, 8-days of browser caching, 2 hours of edge-caching (full page will stay the same on CloudFlare’s edge servers up to 2 hours and be served straight from CloudFlare, without requests to your origin server). We also put “Always Online” to on so your website will stay online even if your server experiences some downtime.
Everything is set up very well now. We wish you a great speed-up of your website(s) and wish you to make them fly, get lots of visitors and if you monetize it, make some great bucks with it! 🙂
Now we would like to show you how all three page rules are visible in CloudFlare panel.