Cloudflare has plenty to offer even to free users. I looked into some methods of improving the TTL or time to first byte as a way to speed up my website’s page load times.
I found there was Page Rule configuration in Cloudflare that can be setup to improve the speed through caching.
Table of Contents
Setup Page Rule for Caching
Login to Cloudflare and navigate to the Page Rules page. First create a new rule as shown below:
Setup Page Rule for Bypass
With the above rule all content on the website should be cached. This might lead to an issue with the Dashboard and WordPress backend. This can be fixed by adding another Page Rule like below:
Complete View of Page Rules
When completed the list of page rules should look like below and order matters as the Admin bypass needs to be above the cache everything rule for it to work properly.
Set Browser Cache TTL Settings
One last setting to set before closing Cloudflare is the Browser Cache TTL setting which is found on the Caching page under Configuration. This needs to be set to “Respect Existing Headers” otherwise HTML content will be cached and users might not see updated posts or page updates.
Update htaccess file
A side effect could be that the WordPress Admin bar might disappear and this can be fixed by copy and pasting the below code snippet into the bottom of the .htaccess file.
# Begin Cloudflare headers for page cache
<IfModule mod_rewrite.c>
RewriteCond %{REQUEST_URI} !/wp-admin [NC]
RewriteCond %{HTTP_COOKIE} !"wordpress_logged_in"
RewriteRule ^.*$ - [ENV=LONGCACHE:true]
<IfModule mod_headers.c>
Header unset Pragma env=LONGCACHE
Header unset Expires env=LONGCACHE
Header set Cache-Control "max-age=600" env=LONGCACHE
</IfModule>
</IfModule>
# End Cloudflare headers for page cache
