Skip to content

Instantly share code, notes, and snippets.

@iamakulov
Last active February 17, 2024 03:32
Show Gist options
  • Save iamakulov/106264563793c5e47049ddcc60372ece to your computer and use it in GitHub Desktop.
Save iamakulov/106264563793c5e47049ddcc60372ece to your computer and use it in GitHub Desktop.
What you should (and shouldn’t) enable in Cloudflare for web performance

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.

@kaiimran
Copy link

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

@Proximcode
Copy link

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.

@devmachiine
Copy link

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.

@insidemordecai
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment