Setting up CDN is one of the best ways to speed up your site and make it load faster for users with slower internet speeds and those located in remote countries. However, not all CDNs are created equal and there’re many factors that you should take into consideration when choosing one for your CMS-based website. Below is a step-by-step guide optimizing page load time with Cloudflare on a WordPress based website as well as resolving TTFB (time to first bite) issues.
One of the important factors to consider is whether the CDN works only for static resources or it can be used as a reverse proxy to serve the whole site. Most of the CDN provides will give you a custom URL that you use to load your styles, scripts, and images while the rest of the site is loaded directly from your server. And if your website is based on WordPress or other similar CMS, these unrouted requests can take a lot of time and resources, especially if your hosting plan and/or provider is not that great.
Optimizing page load time with Cloudflare on a WordPress site. TTFB optimizations.
One of my clients recently had a problem with his WordPress based site that was fully optimized for performance/speed even though it had all possible optimizations, including a CDN for all resources, but still had loading issues and got bad ranking from page speed test from time to time. After the testing and audit, we found that the problem was not with the website itself, but was caused by his web hosting provider. We discovered that his server response time (TTFB – time to the first bite) for the initial unrouted GET request for the website occasionally took up to 5 seconds, this happened even before all the CDN-loaded resources and optimizations kicked in and made all the optimizations almost useless.
In my experience, this is a common problem with shared hosting plans, even with big reputable hosting providers and there’s no easy way to resolve it unless you upgrade to a much more expensive private plan.
Here’s what was happening:
After we located the problem, I suggested my client 2 options:
- Look for a better more optimized hosting provider and/or plan
- Try out using a CDN that works as a reverse proxy and serves a cached version of the full site, not only css, js and images
After a short discussion, we decided to give #2 a try and see if that’d be enough, leaving #1 as “plan B”. We chose Cloudflare as one of the biggest CDN providers with one of the widest servers networks that can be used as a reverse proxy for all website requests. And, as my clients WordPress website had mostly static pages (static homepage, regular information/brochure pages about their business, blog etc.), we were able to cache the whole site at the CDN level and avoid waiting for the server response each time when the site was loaded.
Results of optimizing page load time with Cloudflare
After optimizing page load time with Cloudflare using this approach, load times were down to less than 2 seconds again as the TTFB was significantly improved.
Here are the settings that we used to achieve this. Note that by default Cloudfare won’t cache the entire site and will send the first request to your server and then back to you. Technically, this works same as any other CDN, but may even make your site slower as the first request first goes to them (because you point your domain to their servers, then it’s routed to your hosting, and then the response is finally returned to the client. That’s why you have to adjust the settings so that it serves all content from their cache.
Please note that this works only for static pages/sites (those that show the same content to all users), and websites with dynamic forms, dynamic and/or personalized content etc. won’t work properly with this setup. If your website is in the second group and can’t be fully cached, you may want to do some testing and comparison and see if it’s more beneficial for you to use another type of proxy (the one that doesn’t require re-pointing your domain and only serves static resources via their own custom URL).
Here are the settings we used for a WordPress based site in order to fully cache all content and significantly decrease TTFB:
Here are the steps for Cloudflare caching settings:
- Set caching level to ‘Standard’ under Caching settings
- Set ‘Browser Cache Expiration’ to ‘Respect Existing Headers’ under Caching settings
- Under Page Rules add the following (all URLs start with your website domain e.g. https://www.mysite.com. If you’re using a different CMS use your own login and admin paths):
- Install Cloudflare plugin for WordPress (optional) – it will help you clear Cloudflare cached from your Admin dashboard. Alternatively, you can clean it from within Cloudflare manually.
- Prevent WordPress admin bar from being cached and being shown to other users. If you clear the Cloudflare cache and then visit the website while being logged in to it, CloudFlare can cache your site with an admin bar and then show it to other people (admin URLs/links won’t be accessible, though, if they click on them). It may also be confusing for you as it’ll look like WordPress won’t let you log out. In order to resolve this issue, you can try 2 options:
- Click logout link and don’t refresh the page so that it’ doesn’t display the admin bar again, and then clear the cache from within Cloudflare manually (so that it caches this version without an admin bar).
- Disable WordPress admin bar
Last steps and testing
Once you do these steps, you may want to clean all your browser caches and run a few tests using developer tools and/or website performance testing tools and make sure that everything works as expected and that all the resources get properly cached on the client- (browser caching) and server-side (on CloudFlare).
Please feel free to leave a comment if you’d like additional info on any of the steps described above or have any questions.