Published on

Cloudflare Settings: How to Boost Website Speed by 50%

You can boost your website loading speed by up to 50% by enabling Cloudflare’s automatic caching and content delivery features. Most beginners see a significant drop in Time to First Byte (TTFB - the time it takes for a browser to receive the first byte of data from the server) within minutes of toggling on the "Auto Minify" and "Brotli" settings. These adjustments reduce the size of your files and deliver them from servers located closer to your visitors.

What is Cloudflare and how does it work?

Cloudflare is a Content Delivery Network (CDN - a global network of servers that work together to provide fast internet content delivery). It acts as a protective layer between your website’s server and your visitors. When someone visits your site, Cloudflare serves the content from the nearest physical data center instead of making the request travel across the globe.

This service also offers a suite of performance tools that handle heavy lifting for your server. It can shrink your code files and compress images before they reach the user's screen. Because Cloudflare handles these tasks, your actual web server uses fewer resources and can respond much faster to new requests.

Don't worry if this sounds complex at first. Setting it up mostly involves clicking switches in a dashboard rather than writing any manual code.

What do you need to get started?

Before you begin, ensure you have the following ready:

  • A live website with a registered domain name (like yoursite.com).
  • Administrative access to your domain registrar (the company where you bought your domain, such as Namecheap or GoDaddy).
  • A free Cloudflare account.
  • The latest version of your preferred browser (Chrome, Firefox, or Safari).

How do you set up the basic speed features?

Once your domain is connected to Cloudflare, you can begin the process of making your site faster. We recommend starting with the "Speed" tab in your dashboard, as this is where the most impactful changes happen.

Step 1: Enable Brotli Compression Brotli is a modern compression algorithm (a way to make files smaller without losing information) developed by Google. It is more efficient than older methods like Gzip.

  1. Log in to your Cloudflare dashboard and select your website.
  2. Click on the "Speed" icon in the left-hand sidebar.
  3. Select "Optimization" from the dropdown menu.
  4. Find the "Brotli" toggle and switch it to "On."

What you should see:

  • A green checkmark or "On" status next to the Brotli setting.
  • A slight reduction in the weight of your HTML and JavaScript files when tested in a speed tool.

Step 2: Use Auto Minify Auto Minify removes unnecessary characters from your code, such as white spaces and comments. This makes your files smaller without changing how your website functions.

  1. Stay in the "Speed > Optimization" section.
  2. Locate the "Auto Minify" section.
  3. Check the boxes for JavaScript, CSS, and HTML.

What you should see:

  • All three boxes (JavaScript, CSS, HTML) should be checked.
  • Your site may take a few minutes to update its cached versions of these files.

How do you improve image loading times?

Images are often the heaviest part of a webpage. Cloudflare offers modern ways to serve images so they don't slow down your visitors' experience.

Step 3: Enable Polish (For Paid Users) or Mirage If you are on a free plan, you can still use features like "Rocket Loader." If you have a Pro plan, "Polish" is your best friend for images.

  1. Scroll down to the "Image Optimization" section under the Speed tab.
  2. If you have a Pro account, turn on "Polish" and set it to "Lossy" to shrink image file sizes significantly.
  3. If you are on a Free account, ensure "Rocket Loader" is turned on to improve the loading time of pages that use a lot of JavaScript.

What you should see:

  • A "Rocket Loader is enabled" message.
  • Images on your site should load noticeably faster on mobile devices.

What settings enhance your Caching?

Caching (storing a copy of your site's files so they don't have to be regenerated every time) is the most powerful tool Cloudflare offers. Proper caching ensures your server doesn't work harder than it has to.

Step 4: Set the Browser Cache TTL TTL (Time to Live) tells the visitor's browser how long it should keep a copy of your files before asking for a new one.

  1. Click on the "Caching" icon in the sidebar.
  2. Select "Configuration."
  3. Find "Browser Cache TTL" and set it to at least "1 month" for stable websites.

What you should see:

  • The dropdown menu showing "1 month" or your chosen duration.
  • Repeat visitors will experience much faster load times because their browser already has your site's assets.

What are the common gotchas to avoid?

It is normal to feel a bit nervous when changing these settings. Sometimes, things don't go exactly as planned.

One common mistake is keeping the "Development Mode" turned on. This mode bypasses Cloudflare's speed features so you can see code changes in real-time. If you forget to turn it off, your site will feel slow because nothing is being cached.

Another issue is "Over-minification." Occasionally, shrinking JavaScript files can break a specific feature on an older website. If a button stops working after you turn on Auto Minify, simply uncheck the "JavaScript" box to see if that fixes it.

Lastly, remember that changes aren't always instant. Cloudflare needs time to distribute your new settings to its thousands of servers worldwide. We've found that waiting about 5 to 10 minutes before testing your speed again gives the most accurate results.

How can you test if it worked?

You don't have to guess if your site is faster. You can use free tools to verify your progress.

  1. Go to PageSpeed Insights or GTmetrix.
  2. Enter your URL and run a test.
  3. Look for the "Total Blocking Time" and "Largest Contentful Paint" (how long it takes for the main content to appear).
  4. Compare these numbers to the ones you had before you started this guide.

What you should see:

  • A higher overall performance score.
  • A specific mention in the report that your resources are being served via a CDN.
  • Lower "Initial Server Response Time" numbers.

Next Steps

Now that you have improved your site's delivery speed, you might want to explore more advanced features like Cloudflare Workers (small pieces of code that run on Cloudflare's servers) or specialized security settings. Fast sites are great, but keeping them secure is just as important.

Try running a speed test from different geographic locations to see how your CDN performs for users in other countries. You can also look into setting up "Page Rules" to customize exactly how specific parts of your site are cached.

official Cloudflare documentation


Read the Optimize Documentation