How can we help?

Help via Chat 24h from monday to friday

CloudFlare Tips

After you have activated CloudFlare, there are some tips that can help you get the most out of it.

First access your account at: https://www.cloudflare.com/a/login

In Speed, activate Auto Minify. This option will minify (reduce size) of all your JavaScript, CSS & HTML files.

AutoMinify included free with any plan, and you can choose whether you want to minify CSS, Javascipt, HTML (even dynamic HTML), or any combination of the three. You can turn Auto Minify on or off via your CloudFlare Settings control panel with a single click and the settings take effect nearly instantly (because you don't have to wait for the flawed cache-and-store approach). Next up for the engineering wizards behind this: a radically better approach to image optimization.

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

cloudflare1.PNG

Activate Rocket Loader as well with the Automatic option on, this will optimize all the JavaScript code.

Rocket Loader prioritises your website's content (text, images, fonts etc) by deferring the loading of all of your JavaScript until after rendering. On pages with JavaScript, this results in a much faster loading experience for your users and improves the following performance metrics: Time to First Paint (TTFP), Time to First Contentful Paint (TTFCP), Time to First Meaningful Paint (TTFMP), Document Load.

cloudflare2.PNG

In Caching, choose Caching Level -> Standard.

  • No Query String: Only delivers files from cache when there is no query string.
  • Ignore Query String: Delivers the same resource to everyone independent of the query string.
  • Standard: Delivers a different resource each time the query string changes.

cloudflare3.PNG

And the last tip is to create a Page Rule setting the Cache Level to cache everything, this way we are making sure that all the previous configurations are running correctly.

cloudflare4.PNG

After updating any static file (image, css & JS) it is important that you run Caching -> Purge Everything to clear the static cache and files be updated.

cloudflare5.png