Ecommerce websites on Cloudflare: best practices

Cloudflare provides numerous benefits to ecommerce sites, including advanced DDOS protection and an industry-leading Web Application Firewall (WAF) that helps secure your transactions and protect customers’ private data.

A key Cloudflare feature is caching, which allows content to be served closer to the end user from our global network of data centers. Doing so improves the user's shopping experience and contributes to increasing the proportion of people completing a purchase (conversion rate).

For example:

• Walmart found improving page load time by 1 second increased their conversion rate by 2%

• Research for Amazon showed every 0.1 second of delay costs 1% of sales

• The Barack Obama campaign website saw an 80% page load time boost resulted in a 14% increase in donations

Cloudflare operates over 110 data centers around the world. When a website implements Cloudflare, visitor requests for the site will proxy through the nearest Cloudflare data center instead of connecting directly to the webserver hosting the site (origin). This means Cloudflare can store content such as images, JavaScript, CSS and HTML on our servers, speeding up access to those resources for end-users.

Most ecommerce websites rely on a backend database containing product descriptions and metadata such as prices. Without caching, each visit to a product page might involve several database requests to pull all the required data, which can introduce added latency to page load time, particularly on a busy website. Serving the website's homepage and product pages from Cloudflare's cache not only eliminates these costly database calls, but also reduces the load on your origin infrastructure.

To make the most of Cloudflare and to help maximize the speed of your website, serve as much content as possible from the Cloudflare cache.

By default, Cloudflare caches static content based on a fixed list of file extensions which includes assets such as images, CSS files and PDFs.

The reason Cloudflare only caches static content out of the box (and does not cache HTML content by default) is to avoid the risk of inappropriate data being cached. For example, if the shopping cart page is cached, then the next visitor might receive the cached version and see a cart with the incorrect contents. Therefore, while enabling more caching will let you make the most of Cloudflare, it requires careful and considered implementation.

Additional caching on Cloudflare can be enabled in one of two ways - using Page Rules or by sending cache headers from your origin. These two methods are explained in more detail here. In this blog post we’ll use Page Rules, but keep in mind you can use headers from your origin too.

A typical HTML page on an ecommerce website will contain static content (such as the product description) and dynamic content such as:

• a header section which varies according to the visitor’s logged in state - e.g. if the user is logged in, it may offer the user a “Logged in as..." message

• a basket section which populates as the user shops on the site

The user might have one or more session cookies to maintain these dynamic elements.

There are few ways to make the most of Cloudflare's caching, while taking into account the dynamic nature of ecommerce websites.

Note: the Bypass Cache on Cookie feature is only available on the Cloudflare Business and Enterprise plans

Many visitors to a site will be brand new, first time visitors - in other words, they won’t be logged in to the site and won’t have any items in their basket.

Serving their request from the Cloudflare cache means they can quickly view the page they’re looking for (whether the homepage or a specific product page). As they're a brand new visitor, the entire page can be served from the Cloudflare cache.

With most ecommerce platforms, as soon as the user logs in to the site or adds an item to basket, a relevant cookie is sent to the browser.

Cloudflare can cache the pages, but will bypass the cache should Cloudflare receive either of the cookies from the browser.

This is achieved by introducing a Page Rule with a “Bypass Cache on Cookie” setting:

In the above example, the Page Rule will cause all requests to the site to serve from cache, unless the web browser has sent a cookie named “loggedin” or “iteminbasket”.

Obviously every ecommerce platform is different, so always think through your settings and ensure you use the correct cookie values to ensure that there is no risk of private data (e.g. someone’s shopping basket) being served from cache and shown to another visitor.

A better solution would be to serve the entirety of the page from cache, but populate the dynamic elements using JavaScript / AJAX.

This means Cloudflare will serve the bulk of the page content and only small requests will pass (via Cloudflare) direct to origin to populate dynamic elements such as the basket contents.

To configure this, use a Page Rule with Cache Level “Cache Everything” for the static content and another Page Rule with Cache Level “Bypass” for the dynamic (AJAX) requests.

In this example, any requests going to www.example.com/ajax/basket_contents.php and www.example.com/ajax/logged-in-state.php would match the first Page Rule, which has cache level “Bypass” - Cloudflare will proxy the request but the request won't touch the Cloudflare cache.

Other requests, e.g. to www.example.com/products/product_page would not match the first Page Rule but would instead match the second “Cache Everything” Page Rule - thus the product page is served from the Cloudflare cache. Within that product page, the dynamic elements (such as the basket contents and the logged in state) are dynamically populated using the AJAX requests.

You should also consider introducing additional appropriate Page Rules for special pages such as the checkout pages - for example, you may wish to create a Page Rule that bypasses the cache for all the checkout pages.

Remember: only one Page Rule will execute for any given request, and Page Rules are processed in the order they exist in the Cloudflare control panel. Read over our Page Rules tutorial to better understand how they work.

Note: the Railgun feature is only available on the Cloudflare Business and Enterprise plans

Cloudflare’s Railgun technology optimizes the connection between Cloudflare and the website origin, for accelerating dynamic HTML content - content that can't be served from the Cloudflare cache.

Railgun helps in two ways:

• Establishing a persistent connection between Cloudflare and the website origin (to speed up initial connection times)

• Compressing the data that passes from the origin to Cloudflare by only sending content that has changed

Before Railgun:

After Railgun:

Railgun can happily be used in conjunction with the previously discussed caching methods.

If you’ve implemented method 1 (the bypass cache on cookie method) then Railgun will accelerate the requests which pass directly to origin due to the presence of the relevant bypass cache cookies.

Method 2 (caching everything on Cloudflare except AJAX calls to populate dynamic sections) is already more efficient than method 1. Railgun can still be used to further accelerate the AJAX requests that pass from Cloudflare to origin.

Railgun is a little more advanced as it requires installation of a small software package on (or very close to) the origin webserver to handle the compression. You can read more about Railgun here and find the installation documentation here.

Ideally a well optimized ecommerce website will leverage our caching service as much as possible - serving images, CSS and JavaScript from Cloudflare's network, in addition to as much static HTML content as possible. Adding our Railgun service to accelerate those inevitable non-cachable requests to the origin webserver will help create a fantastic, speedy shopping experience for your customers.