Cloudflare is a web-performance-and-security-as-a-service company.
To configure your web app to run faster, you need to:
- sign up for Cloudflare
- connect it to your site (by moving DNS records and setting up proxying)
- enable a few toggles in the settings.
The configuration panel has a lot of tabs. You’ll need these:
Let’s go over settings you should (and shouldn’t) enable in Cloudflare.
Enable this to automatically optimize images. The “Serve WebP images” option is the best in most cases. This requires a Pro account, but it’s not very expensive ($20/month).
Enable this to make text content you serve (HTML, CSS, JavaScript) smaller in size.
Try enabling this to make images load faster on mobiles or slower networks. This might cause rare issues if your app has e.g. image carousels or photo viewers – so if you have problems later, disable this.
If you’re developing a web app with a modern frontend, it’s extremely likely that it’s already minified – so you won’t need this option.
Make sure the standard caching level is enabled – it’s recommended in most cases. But feel free to choose another option if you know it works for you.
I found auto-minify helpful but with a caveat.
If your code is already minified or you are using some plugin then this feature is redundant and could cause issues.
The second thing that I have noticed is having the CSS checkbox checked will most likely cause issues with your stylesheet leading to your website displaying the layout wrongly so one can try out having just the HTML and JS checkboxes checked.