How to Setup Free TYPO3 Cloudflare?

Every second counts in terms of a TYPO3 site’s loading time. If a TYPO3 site takes more than a few seconds to load than expected, it’ll make people abandon it nearly immediately. With the two legends; TYPO3 + Cloudflare, Your TYPO3 website will be super fast, Let’s see how!

People expect to get access to information on the internet as fast as possible. Therefore, it's far critical to align your website’s overall performance together along with your customers’ expectations. This article will speak about how Cloudflare CDN assists you to boost your TYPO3 website’s loading speed. I’ll additionally offer a step-by-step manual on the way to set it up.

Before exploring and integrating the TYPO3 Cloudflare, I recommend reading below blogs.

via GIPHY

My dear TYPO3 readers, As my ritual before writing anything; I want to dedicate this blog to Xavier Perseguers for developing and maintaining his awesome TYPO3 Cloudflare Client TYPO3 extension. And of course, to all people who contributed to this TYPO3 extension. I got the inspiration to write this blog from this TYPO3 extension. #T3Kudos to everyone!

What Is Cloudflare CDN?

“A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content.”

One of Cloudflare CDN’s functions is growing internet site loading speed. It works by retaining more than one copy of your internet site’s records in proxy servers worldwide.

This approach means that once people need to access your content, the request is dispatched to servers close to their location to make instantaneous processing.

Cloudflare CDN additionally gives safety in opposition to potential DDoS attacks, making sure data privacy in your business and customers.

Why TYPO3 Cloudflare CDN?

“CDNs offer an easy way to increase the speed of a website while also lowering the latency. Therefore, they are essential for the fast, efficient, and secure delivery of content to users around the world.”
- Akamai

Here are a number of the important thing benefits of the usage of Cloudflare to your TYPO3 website:

Fast Reaction Time

Cloudflare makes use of aspect computing, that's liable for the efficient transfer of data from one server to another. This feature reduces the ready time to your web page visitors, enhancing the general consumer experience.

Site Protection

Users can customize website safety settings through the Cloudflare dashboard to block potential online threats. Some safety functions consist of a web utility firewall (WAF) and DDoS protection.

SSL Certificate

Secure Socket Layer (SSL certificate) is a software program that protects website data with the aid of ensuring that the simplest authorized computer systems or browsers can access it.

How Does TYPO3 Cloudflare Works?

Meet Cloudflare + TYPO3 (#1 Faster OpenSource CMS)

TYPO3 is the number one open-source CMS that gets the highest ranking in one of the page performance reports. Feel proud of my friend ;)

Test-Drive TYPO3 Cloudflare

Team T3Planet loves TYPO3 Cloudflare integration; Here is why! The speed of our T3Planet Marketplace portal and blog gets rocket speed.

Step-by-step Guide to TYPO3 Cloudflare

I’m going to write down the in-depth installation and configuration of Cloudflare and the TYPO3 Cloudflare extension.

1. Creating a Cloudflare Account

Let’s sign-up for a free Cloudflare account from https://dash.cloudflare.com/sign-up

2. Adding Domain Name to Cloudflare

Go to your Cloudflare dashboard. Select the Add Site button.

Add the URL of your TYPO3 website. Cloudflare allows its users to add as many websites as they want, even for the free version.

Now, select your plan. For your personal and small website, I recommend choosing the Free version. It comes with all of the needed basic features to protect your website from online threats and enhance its loading speed.

3. Checking the DNS Records of Your Domain Name

Once your TYPO3 site is added to Cloudflare, you’ll be prompted with the DNS details of the domain name. In this step, enable or disable Cloudflare for specific subdomains.

To activate, simply toggle the cloud icon to an orange color.

4. Pointing Your Domain Name to Cloudflare Nameservers

After activating Cloudflare for your domain and subdomains, you will see the Cloudflare nameservers on the next page. It is essential to replace old nameservers with Cloudflare.

Access the Cloudflare nameservers by clicking on the DNS tab on the dashboard.

Under the DNS Management section, you will see the Cloudflare nameservers assigned to your website. Copy these values.

4. Pointing Your Domain Name to Cloudflare Nameservers

Open a new browser tab and go to your hosting control panel. Here is the example, you’ll find the nameservers’ details under the Domains tab.

It may take up to 72 hours for DNS to propagate worldwide. Once the nameservers update is complete, you will receive an email confirmation from Cloudflare.

5. Configure The HTTPS Settings

Go to the SSL tab on your Cloudflare dashboard. Choose Full SSL if you have an existing SSL certificate or Flexible SSL if you don’t.

Head to the Edge Certificates section and turn on Always Use HTTPS. It might take a while for the changes to be visible, so check it after a few hours. Once you see a confirmation message and a padlock icon near the site’s URL, you’ll know that it’s active.

Go to the SSL tab on your Cloudflare dashboard. Choose Full SSL if you have an existing SSL certificate or Flexible SSL if you don’t.

Head to the Edge Certificates section and turn on Always Use HTTPS. It might take a while for the changes to be visible, so check it after a few hours. Once you see a confirmation message and a padlock icon near the site’s URL, you’ll know that it’s active.

6. Get API from Cloudflare

Select Get your API Key from here located below.

A new window will pop up. Go to the API Tokens tab, then select View from the Global API Key option.

7. Install & Configure the Cloudflare TYPO3 Extension

Install TYPO3 Cloudflare Extension

Go to your TYPO3 backend > Admin tools > Extensions Manager; Choose your way to install the TYPO3 Cloudflare extension from TER or Composer based https://extensions.typo3.org/extension/cloudflare

7. Install & Configure the Cloudflare TYPO3 Extension

2. Configure TYPO3 Cloudflare

Go to Admin Tools > Settings > Configure Extensions > Set Email and API Keys of Cloudflare.

For Advanced configuration of TYPO3 Cloudflare extension, Please read at

Pro Tips

Now your whole TYPO3 site will be cached by Cloudflare; Make sure to disable Cloudflare Cache for TYPO3 Backend. Go to Cloudflare > Rules > Create new rules as below.

// Set Cache level and performance
URL pattern: www.example.com/typo3/*
Cache Level: Bypass
Performance: off

Common TYPO3 Cloudflare Problems

A very common error that users get when trying to install Cloudflare on their TYPO3 site is “ERR_TOO_MANY_REDIRECTS” in Chrome or “The page isn’t redirecting properly” (Firefox).

This is due to having SSL setup on your web server already and then having Flexible SSL enabled with Cloudflare. If you have an SSL certificate with your web host already, then you will want to switch the SSL mode to full.

In TYPO3, Please configure the below settings to run your TYPO3 on SSL/HTTPS.

// Below TYPO3 v8
config.baseURL = www.example.com
[globalString = ENV:HTTP_X_FORWARDED_PROTO=https, ENV:HTTPS=on]
config.baseURL = www.example.com
[global]
// Above TYPO3 v9
Go to Site > Site Management > Set your domain name with HTTPS.

How to Clear TYPO3 Cloudflare Cache?

Option 1 – Clear Cloudflare Cache in TYPO3 Extension

Go to Page > Select your created/edited page > Click on the “Clear cache” icon.

Option 2 – Clear Cloudflare Cache from Control Panel

Your other option is to clear the Cloudflare cache from their control panel. To do so, click into the “Caching” tab and then on “Purge Everything.”

Once you have everything up and running smoothly, it’s better to only purge the cache of individual files. Cloudflare provides an easy way to do this.

Tips and Tricks of TYPO3 Cloudflare

Here are the important configurations of TYPO3 Cloudflare which will speed up and secure your TYPO3 site.

TYPO3 Images with Resize + Polish

You can resize, adjust quality, and convert images to WebP format, on-demand. We cache every derived image at the edge, so you store only the original image. This allows you to adapt images to your site’s layout and your visitors’ screen sizes, quickly and easily, without maintaining a server-side image processing pipeline.

Auto Minify - Minify TYPO3 Source

Auto Minify removes unnecessary characters from your source code (like whitespace, comments, etc.) without changing its functionality. Minification can compress source file size which reduces the amount of data that needs to be transferred to visitors and thus improves page load times.

Firewall - Secure Your TYPO3 Site

Consider all provided security settings by Cloudflare; Go to Cloudflare > Firewall > Settings.

Rocket Loader - Control Your Heavy JavaScript

Rocket Loader improves paint times for pages that include Javascript. Visitors will have a better experience by seeing content load faster and speed is also a factor in some search rankings. Rocket Loader improves paint times by asynchronously loading your Javascripts, including third-party scripts so that they do not block rendering the content of your pages.

Mirage - Improve Load Time

Mirage tailors image loading based on the network connection and device type. Devices with small screens receive smaller images, and slower connections receive lower resolution images. This speeds up page rendering so users can begin interacting with your website without waiting for images to download first.

Brotli - Advanced Compression Method

Cloudflare applies Brotli compression to help speed up page load times for your visitors. Cloudflare will select Brotli compression as the preferred content-encoding method if multiple compression methods are supported by the client. If the client does not indicate that Brotli compression is supported, then gzip compression will be applied.

Page Rules - By-Pass Your TYPO3 Pages

Cloudflare provides a cool feature call “Page Rules”; You can configure page-wise rules eg., Some of your pages need to bypass the cache, You can do it.

Wrapping-up!

Thanks for reading my TYPO3 blog. I hope you enjoyed it and found it helpful.

A Content Delivery Network is a vital service that assists you to increase your web page speed. Out of the several options available, I pretty much advise the use of Cloudflare for your TYPO3 CMS. It offers a reliable CDN service with superb safety and standard overall performance improvements.

Do you have any problems or questions about TYPO3 Cloudflare? I’ll be happy to answer your questions in the comment box.

Have a Happy TYPO3 Speedy Site!

How to Setup Free TYPO3 Cloudflare?

Guide to TYPO3 Cloudflare

What Is Cloudflare CDN?