What you should (and shouldn’t) enable in Cloudflare for web performance

index.md

What you should (and shouldn’t) enable in Cloudflare for web performance

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.

Speed tab

✔ Polish

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).

✔ Brotli

Enable this to make text content you serve (HTML, CSS, JavaScript) smaller in size.

❓ Mirage

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.

❌ Auto Minify

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.

Caching tab

✔ Caching level: standard

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.

What about Rocket Loader, is there any cons or risks enabling this ?

it may improve your load time to 3times faster. i have used it and i am only saying this with my personal experienece. you should have this feature enabled. 100% recommended.

I disagree about never using auto-minify:

If you work on a big-ass project, you could save yourself waiting time if you don't minify locally and on your build servers 50 times a day.

The benefit of minification is for the end-user, but for the developer it only makes the feedback loop slower.

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.