Magento and Cloudflare: How to Make It Work Right

Magento and Cloudflare: How to Make It Work Right

Cloudflare is a service (content-provider) that allows speeding up of the work of the Magento online shop. It helps to protect your store from the threat of a variety of harmful bots, blocking them before they “hit” the server (it has Built-in Security). This prevents the server from losing traffic and resources which in turn leads to speed improvement. Cloudflare uses CDN technology, a geographically distributed network infrastructure that allows you to distribute content to the end-users on the Internet.

How Does Cloudflare Work?

If a website works through CloudFlare, its traffic is redirected through the intelligent global service network where the delivery time is optimised so the visitors can quickly get to the desired web page. Check out  the following diagram that displays how the website works with and without Cloudflare implementation:

cloudflare and magento

As you can see, the static data from Cloudflare websites is cached in the global service network. In other words, the static data gets cashed when the users visit the website, so they don’t interact directly with the server where the site is located. It allows the user to save server bandwidth, protect it from different types of bots and attacks, as well as increase the website performance. So, if you want to improve your website performance and avoid missing any details during Magento and Cloudflare integration,  you can take advantage of the Magento Speed Optimization Service offered by Plumrocket.

Setup Magento with Cloudflare

Since Cloudflare plays an essential role in Magento optimisation by allowing you to improve the website load speed, it is essential to know the main steps of Magento and Cloudflare configuration:

  1. Create an account, and add your website to the service. Cloudflare provides customers with free CDN, yet if you want to use more features, it is required to use a paid plan that includes additional optimisation tools:
  •     Image optimisations with Polish;
  •     Mobile optimisations with Mirage;
  •     More Page Rules included.

Find more information about Cloudflare subscriptions here.

After completing the steps on the Cloudflare side, you need to set up the Magento store backend:

For Magento 1:

1. Go to System  menu -> Configurations -> General -> Web

2. Open the “Unsecure” and “Secure” sections and change the Base URL to http://www.example.com and https://www.example.com accordingly. Then, clear the cache.

magento-plumrocket-cloudflare

For Magento 2:

1. Go to the STORES menu -> Configuration -> General -> Web

2. Open Base URLs and Base URLs (Secure) and change the Base URL to http://www.example.com and https://www.example.com accordingly, and clear the cache.

magento2-plumrocket-cloudflare

So, if you complete the above-mentioned steps, your Magento online store will easily work with Cloudflare. However, if you want to achieve the best results for your website performance and avoid any errors, it is suggested to make additional Cloudflare settings.

Crypto Menu

Go to the Cloudflare control panel and select “Crypto” in the menu. If you use SSL for your website, select SSL Full. In this case, the connection between the user and Cloudflare, and the connection between Cloudflare and the server where the site is hosted will be done via HTTPS.

cloudflare and magento

In case you can’t install the SSL certificate for your site, but need to provide access to the site via HTTPS using Cloudflare, you should select the SSL Flexible for SSL option in the Crypto Menu. Thus, the site will be available via HTTPS, and Cloudflare will have access to the server via HTTP.

magento and cloudflare

Note: when you use the SSL Flexible parameter, you can face the looping problem – ERR_TOO_MANY_REDIRECTS.

The looping problem occurs when the value of SSL Flexible is selected. When a user navigates to the site, Cloudflare sets variables on the server, showing that access is provided through the port 443 via HTTPS. Meanwhile, Cloudflare is making a call to the origin server (where the Magento store is located) through the port 80 via HTTP. Magento takes into account the previously passed Cloudflare variables to the server and redirects to HTTPS. As a result, you will see a loop between Cloudflare and your server.  In order to solve this issue, you should consider adding the following directive to your .htaccess file:

● for Apache server set directive:

SetEnvIf HTTPS On HTTPS = on

● for Nginx server:

SetEnvIf X-Forwarded-Proto https HTTPS = on

Speed Menu

Now, go to the Speed menu to manage website performance. There, take into consideration the following functions:

1. Auto Minify – provides minification of JavaScript, CSS, and HTML – it is recommended to enable it.

2. Polish – allows you to optimise pictures by reducing their size without losing quality, helping to decrease loading time.

3. Railgun – offers you to compress previously uncached web objects up to 99.6% by applying the methods similar to those used when compressing high-quality videos. As a result, average productivity will be increased up to 200%. Note, this feature is only available for Pro accounts.

4. Enable Accelerated Mobile Linksuse Cloudflare to identify the links that contain AMP content and convert them to AML after enabling AML for your website. When a user clicks on an AMP link, Cloudflare starts displaying this page inside the iframe by extracting it from its cache.

5. Brotli – accelerates the page load time for HTTPS traffic using the brotli compression algorithm.

6. Mirage (Beta) – allows you to increase website page load speed on mobile devices with a slow internet connection.

7. Rocket Loader – is an asynchronous JavaScript loader combined with a browser, that can safely run any JavaScript code on client’s side.

* Note: Mirage and Accelerated Mobile Links are currently running in Beta mode.

Setup Page Rules

Cloudflare has the ability to customise Page Rules that allows you to select or remove the features on the specified pages of the site. You can find more information on how to set up its Page Rules here.

Problems that may occur when using Rocket Loader

Among the various Cloudflare tools, Rocket Loader provides you with an opportunity to  benefit from the following functionality:

  • download all scripts asynchronously;
  • combine all script requests to a single request that can get multiple responses;
  • use Local Storage for most browsers and save scripts there;
  • avoid a process of downloading scripts every time.

Even though Rocket Loader offers a number of advantages, the beta-version of the tool can lead to some issues. For instance, you may have a case when the third-party scripts (like googleapis script) are used on several website pages. Rocket Loader is enabled on the Product Page and disabled on Magento Checkout page using the option “Disable Performance”. When the Rocket Loader is applied to the script at least on one page, this script with Rocket Loader will be applied to all website pages. As a result, the Checkout page will not work or load properly due to the occurred error.

If you want to resolve the above-mentioned issue, it is important to reconfigure the rules for the Checkout Page. There is a possibility to enable and disable the Speed Menu functions on the separate website pages. So, go to Page Rules settings for website pages and add a new rule.

magento and clouflare

Then, select the following options in the Rule Settings:

  • Rocket Loader Off;
  • Disable Performance.

magento and cloudflare

Hence, the Rocket Loader function will be disabled for the Checkout Page and will not be applied for that particular page and script.

Conclusion

As you can see, Cloudflare improves the security and performance of your Magento website, as well as decreased bandwidth. Since Cloudflare and Magento integration is a part of Magento Speed Optimization Service provided by Plumrocket, select one of the most suitable plans and get the professional team to enhance Magento speed significantly.

Share: