Caching Static HTML with Magento (version 1 & 2)

Cloudflare users on our Business Plan are able to cache anonymous page views when using Magneto using our Bypass Cache on Cookie functionality. This allows for static HTML to be cached at our edge, with no need for it to be regenerated from request to request.

Before someone logs into the the Magento admin panel or adds something to their shopping cart, the page view is anonymous and it may be possible to cache those requests so that Magento on your origin server doesn't need to constantly regenerate the HTML.

Before starting - be sure to ensure that Cloudflare is set to respect Cache-Control headers from Magento instead of overriding them with Cloudflare default values. In order to set the "Respect Existing Headers" option, visit the Caching tab in the Cloudflare Dashboard:

Scroll down the page to find the "Browser Cache Expiration" option, and select the "Respect Existing Headers" value:

With this in place, we can go ahead and set the necessary Page Rules to cache anonymous page visits. In order to do this we need to head to the Page Rules section in the Cloudflare dashboard:

Next we can go ahead and click the "Create Page Rule" to set-up static HTML caching on our site. The first step is to actually set the Page Rule to match our WordPress installation path, if your site is at https://www.example.com, the rule would be https://www.example.com. In my case, I have installed WordPress on https://junade.com, so my Page Rule should match https://junade.com/*.

We can then set-up the rules that we want to apply. "Cache Everything" will instruct Cloudflare to cache static HTML. When the "Bypass Cache on Cookie" rule matches the criteria we set, Cloudflare won't cache HTML (whilst static images and other files will still be cached). Depending on whether you're using Magento 1 or Magento 2, you will need a different rule:

Magento 1 external_no_cache|PHPSESSID|adminhtml
Magento 2     admin| PHPSESSID|private_content_version

Finally, setting "Edge Cache TTL" will define the maximum period of time Cloudflare should keep cached files before getting them back from the origin. Even after setting a long Edge Cache TTL time, you can still manually clear the cache before this time expires.

Next, just click "Save and Deploy" and we're done! If you're interested in verifying the content is being cached, please review: How can I tell if Cloudflare is caching my site or a specific file?

Enterprise Cloudflare customers can use Custom Cache Keys to take their performance further, contact your Customer Success Manager if interested.

Empty Cart on Magento 1.8.x or 1.9.x

This section is relevant if you set-up Bypass Cache on Cookie on a Magento 1.8.x site or a 1.9.x site; on such software versions you may notice that the "Add to Cart" functionality doesn't work on a user's first attempt to add an item to a shopping cart.

Magento 1.8.x and 1.9.x introduced CSRF (Cross Site Request Forgery checks) across all Magento forms. As this uses cookies, anonymous caching mechanisms can impair this. An external blog post "Cross-site request forgery and caching" describes the technical details of this issue. Below we have described three ways this bug can be fixed, we recommend number 3, the most secure option.

1. Least Secure: The configuration at System -> Configuration -> System -> CSRF protection -> Add Secret Key To Url is set to Yes by default. Setting this to No will disable CSRF security protection on your entire Magento frontend, you should only use this option if you have a separate mechanism for CSRF protection enabled on your site, we do not recommend this approach. Please note that there is a similarly named configuration for the admin panel at System -> ADMIN -> System -> CSRF protection -> Add Secret Key To Url; this configuration should be kept to Yes and not altered. This configuration provides security to your admin endpoint and therefore extra caution should be used.

2. Somewhat Secure: A Magento community module exists which allows users to only disable CSRF checks on the "Add to Cart" form, where the security risk is less significant; the Inovarti_FixAddToCartMage18 plugin does this by whitelisting the "Add to Cart" functionality from CSRF protection. 

3. Most Secure: The best alternative is to use AJAX to dynamically fill in the value of the CSRF token in your Magento site. When a user clicks the button to add something to their cart, some JavaScript jumps in to update the CSRF token in the forms to match the user’s session. This can enable most of the page to be served from cache but will still require a request back to the origin to fetch the token.

This final AJAX mechanism is implemented in a plugin called the Magento Turpentine extension. Whilst this plugin was built for performing caching with Varnish, it can also be used with Cloudflare. 

There are a couple of options for installing this:

  • Download and install the tarball package from the Downloads page on GitHub (note that this is not the "Download as tar.gz" button) and install through Magento Connect Downloader or Magento's mage command.
  • Install through Magento Connect with the extension key: http://connect20.magentocommerce.com/community/Nexcessnet_Turpentine
  • Install with modman. You would just need to use: modman clone https://github.com/nexcess/magento-turpentine.git

After installing the plugin, navigate to System -> Configration -> TURPENTINE -> Varnish Options and find the "Use VCL fix" option, set it to "Disable" and save.

use_vcl_fix.png

Still not finding what you need?

The Cloudflare team is here to help. 95% of questions can be answered using the search tool, but if you can’t find what you need, submit a support request.

Powered by Zendesk