{"id":816,"date":"2021-09-01T14:37:14","date_gmt":"2021-09-01T11:37:14","guid":{"rendered":"https:\/\/plumrocket.com\/learn\/?p=816"},"modified":"2025-04-03T15:25:05","modified_gmt":"2025-04-03T12:25:05","slug":"magento-and-cloudflare-how-to-make-it-work-right","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/learn\/magento-and-cloudflare-setup","title":{"rendered":"Magento and Cloudflare: How to Make It Work Right"},"content":{"rendered":"\n<p>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 \u201chit\u201d the server (it has Built-in Security). This prevents the server from losing traffic and resources which in turn leads to <a href=\"\/magento-performance-optimization\">speed improvement<\/a>. Cloudflare uses CDN technology, a geographically distributed network infrastructure that allows you to distribute content to the end-users on the Internet.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"586\" height=\"440\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/cloudflare-and-magento.png\" alt=\"Magento and Cloudflare: How to Make It Work Right\" class=\"wp-image-817\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/cloudflare-and-magento.png 586w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/cloudflare-and-magento-300x225.png 300w\" sizes=\"(max-width: 586px) 100vw, 586px\" \/><\/figure><\/div>\n\n\n\n<h2>How Cloudflare Works<\/h2>\n\n\n\n<p>If a website works through CloudFlare, its traffic is redirected through the intelligent global service network where the delivery time is optimized so the visitors can quickly get to the desired web page. Check out the&nbsp;following diagram&nbsp;that displays how the website works with and without Cloudflare implementation:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"1000\" height=\"500\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/3-1.png\" alt=\"Cloudflare and Magento\" class=\"wp-image-818\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/3-1.png 1000w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/3-1-300x150.png 300w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/3-1-768x384.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure><\/div>\n\n\n\n<p>As you can see, the static data from Cloudflare websites are cached in the global service network. In other words, the static data gets cashed when the users visit the website, so they don\u2019t 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.<\/p>\n\n\n\n<div class=\"wp-block-cover has-background-dim\" style=\"background-color:#f5f5f5;min-height:100px\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-dark-gray-color has-text-color\">If you want to improve your website performance and avoid missing any details during Magento and Cloudflare integration, \u00a0you can take advantage of the\u00a0<a href=\"https:\/\/plumrocket.com\/magento-performance-optimization\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-primary-color\">Magento Speed Optimization Service<\/span><\/a>\u00a0offered by Plumrocket.<\/p>\n<\/div><\/div>\n\n\n\n<h2>How to Set Up Magento with Cloudflare<\/h2>\n\n\n\n<p>Since Cloudflare plays an essential role in Magento optimization by allowing you to improve the website load speed, it is essential to know the main steps of Magento and Cloudflare configuration:<\/p>\n\n\n\n<h3>Step 1. Create an account at Cloudflare &amp; add your website to the service<\/h3>\n\n\n\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/dash.cloudflare.com\/sign-up\" target=\"_blank\">Create an account<\/a>, 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:<\/p>\n\n\n\n<ul><li>&nbsp;&nbsp;&nbsp;&nbsp;Image optimisations with Polish;<\/li><li>&nbsp;&nbsp;&nbsp;&nbsp;Mobile optimisations with Mirage;<\/li><li>&nbsp;&nbsp;&nbsp;&nbsp;More Page Rules included.<\/li><\/ul>\n\n\n\n<p><em>Find more information about Cloudflare subscriptions&nbsp;<\/em><a href=\"https:\/\/www.cloudflare.com\/plans\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>here<\/em><\/a><em>.<\/em><\/p>\n\n\n\n<h3>Step 2. Set up Magento store Base URLs<\/h3>\n\n\n\n<p>After completing the steps on the Cloudflare side, you need to set up the Magento store backend:<\/p>\n\n\n\n<p><em><strong>For Magento 1:<\/strong><\/em><\/p>\n\n\n\n<ol><li>Go to <strong>System&nbsp;menu<\/strong> -&gt; <strong>Configurations <\/strong>-&gt; <strong>General <\/strong>-&gt; <strong>Web<\/strong><\/li><li>Open the <strong>Unsecure<\/strong> and <strong>Secure<\/strong> sections and change the Base URL to <em>http:\/\/www.example.com<\/em> and <em>https:\/\/www.example.com<\/em> accordingly. Then, clear the cache.<\/li><\/ol>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"700\" height=\"690\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/magento-plumrocket-cloudflare.png\" alt=\"Setting up Magento with Cloudflare\" class=\"wp-image-819\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/magento-plumrocket-cloudflare.png 700w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/magento-plumrocket-cloudflare-300x296.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p><em><strong>For Magento 2:<\/strong><\/em><\/p>\n\n\n\n<ol><li>Go to the <strong>STORES <\/strong>menu -&gt; <strong>Configuration <\/strong>-&gt; <strong>General <\/strong>-&gt; <strong>Web<\/strong><\/li><li>Open <strong>Base URLs<\/strong> and <strong>Base URLs (Secure)<\/strong> and change the Base URL to <em>http:\/\/www.example.com<\/em> and <em>https:\/\/www.example.com<\/em> accordingly, and clear the cache.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"896\" height=\"742\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/magento2-plumrocket-cloudflare.png\" alt=\"Setting up Magento 2 with Cloudflare\" class=\"wp-image-820\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/magento2-plumrocket-cloudflare.png 896w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/magento2-plumrocket-cloudflare-300x248.png 300w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/magento2-plumrocket-cloudflare-768x636.png 768w\" sizes=\"(max-width: 896px) 100vw, 896px\" \/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3>Step 3. Manage cryptography settings for your website<\/h3>\n\n\n\n<p>Go to the <strong>Cloudflare control panel<\/strong> and select <strong>Crypto <\/strong>in the menu. If you use SSL for your website, select<strong> SSL Full<\/strong>. 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.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"1024\" height=\"619\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-2-1024x619-1.png\" alt=\"Crypto Menu in Cloudflare\" class=\"wp-image-821\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-2-1024x619-1.png 1024w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-2-1024x619-1-300x181.png 300w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-2-1024x619-1-768x464.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>In case you can\u2019t install the SSL certificate for your site, but need to provide access to the site via HTTPS using Cloudflare, you should select the <em>SSL Flexible<\/em> for <strong>SSL <\/strong>option in the Crypto Menu. Thus, the site will be available via HTTPS, and Cloudflare will have access to the server via HTTP.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"538\" height=\"131\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/5-1.png\" alt=\"Cloudflare access to the server via HTTP\" class=\"wp-image-822\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/5-1.png 538w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/5-1-300x73.png 300w\" sizes=\"(max-width: 538px) 100vw, 538px\" \/><\/figure><\/div>\n\n\n\n<p><em>Note: when you use the SSL Flexible parameter, you can face the looping problem \u2013 ERR_TOO_MANY_REDIRECTS.<\/em><\/p>\n\n\n\n<p>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 port 443 via HTTPS. Meanwhile, Cloudflare is making a call to the origin server (where the Magento store is located) through 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. &nbsp;In order to solve this issue, you should consider adding the following directive to your&nbsp;<em>.htaccess&nbsp;<\/em>file<em>:<\/em><\/p>\n\n\n\n<p>\u25cf For Apache server set directive:<\/p>\n\n\n\n<p>SetEnvIf HTTPS On HTTPS = on<\/p>\n\n\n\n<p>\u25cf For Nginx server:<\/p>\n\n\n\n<p>SetEnvIf X-Forwarded-Proto https HTTPS = on<\/p>\n\n\n\n<h3>Step 4. Manage performance settings for your website<\/h3>\n\n\n\n<p>Now, go to the <strong>Speed menu<\/strong> to manage website performance. There, take into consideration the following functions:<\/p>\n\n\n\n<ol><li><strong>Auto Minify<\/strong>&nbsp;\u2013 provides minification of JavaScript, CSS, and HTML \u2013 it is recommended to enable it.<\/li><li><strong>Polish<\/strong>&nbsp;\u2013 allows you to optimize pictures by reducing their size without losing quality, helping to decrease loading time.<\/li><li><strong>Railgun<\/strong>&nbsp;\u2013 offers you to compress previously uncached web objects up to 99.6% by applying 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.<\/li><li><strong>Enable Accelerated Mobile Links<\/strong>&nbsp;\u2013&nbsp;use 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.<\/li><li><strong>Brotli<\/strong>&nbsp;\u2013 accelerates the page load time for HTTPS traffic using the brotli compression algorithm.<\/li><li><strong>Mirage (Beta)<\/strong>&nbsp;\u2013 allows you to increase website page load speed on mobile devices with a slow internet connection.<\/li><li><strong>Rocket Loader<\/strong>&nbsp;\u2013 is an asynchronous JavaScript loader combined with a browser, that can safely run any JavaScript code on the client\u2019s side.<\/li><\/ol>\n\n\n\n<p><em>* Note: Mirage and Accelerated Mobile Links are currently running in Beta mode.<\/em><\/p>\n\n\n\n<h3>Step 5. Set up Page Rules<\/h3>\n\n\n\n<p>Cloudflare has the ability to customize 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&nbsp;<a href=\"https:\/\/support.cloudflare.com\/hc\/en-us\/articles\/218411427\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.<\/p>\n\n\n\n<h2>Problems That May Occur When Using Rocket Loader<\/h2>\n\n\n\n<p>Among the various Cloudflare tools, Rocket Loader provides you with an opportunity to &nbsp;benefit from the following functionality:<\/p>\n\n\n\n<ul><li>Download all scripts asynchronously<\/li><li>Combine all script requests to a single request that can get multiple responses<\/li><li>Use Local Storage for most browsers and save scripts there<\/li><li>Avoid a process of downloading scripts every time<\/li><\/ul>\n\n\n\n<p>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 third-party scripts (like googleapis script) are used on several website pages. Rocket Loader is enabled on the Product Page and disabled on the Magento Checkout page using the Disable Performance option. 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.<\/p>\n\n\n\n<p>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 <strong>Page Rules<\/strong> settings for website pages and add a new rule.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"1024\" height=\"589\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-1-1024x589-1.png\" alt=\"Creatinh Page Rules in Cloudflare\" class=\"wp-image-823\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-1-1024x589-1.png 1024w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-1-1024x589-1-300x173.png 300w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-1-1024x589-1-768x442.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Then, select the following options in the <strong>Rule Settings<\/strong>:<\/p>\n\n\n\n<ul><li>Rocket Loader Off<\/li><li>Disable Performance<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"1024\" height=\"607\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-1-1024x607-1.png\" alt=\"Creating a Page Rule for Cloudflare\" class=\"wp-image-824\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-1-1024x607-1.png 1024w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-1-1024x607-1-300x178.png 300w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/download-1-1024x607-1-768x455.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Hence, the <strong>Rocket Loader<\/strong> function will be disabled for the Checkout Page and will not be applied for that particular page and script.<\/p>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>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&nbsp;the <a href=\"\/magento-performance-optimization\">Magento Speed Optimization Service<\/a>&nbsp;provided by Plumrocket, select one of the most suitable plans and get the professional team to enhance Magento speed significantly.Step 4<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 \u201chit\u201d 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.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[159,126],"tags":[151],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Magento and Cloudflare: How to Make It Work Right - Magento Tutorials for Beginners &amp; Professionals<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/learn\/magento-and-cloudflare-setup\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento and Cloudflare: How to Make It Work Right - Magento Tutorials for Beginners &amp; Professionals\" \/>\n<meta property=\"og:description\" content=\"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 \u201chit\u201d 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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/learn\/magento-and-cloudflare-setup\" \/>\n<meta property=\"og:site_name\" content=\"Magento Tutorials for Beginners &amp; Professionals\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-01T11:37:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T12:25:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2021\/08\/cloudflare-and-magento.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/816"}],"collection":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/comments?post=816"}],"version-history":[{"count":13,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/816\/revisions"}],"predecessor-version":[{"id":2380,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/816\/revisions\/2380"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/media?parent=816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/categories?post=816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/tags?post=816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}