How to Setup Free TYPO3 Cloudflare?

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

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

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.

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.

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. 

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

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

2. Configure TYPO3 Cloudflare

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

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.

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.

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.