BigCommerce uses Cloudflare, which is great. However, their solution is not configurable; Only BigCommerce can define how it works.
Cloudflare supports a feature called O2O, which lets you add your own Cloudflare solution on top of BigCommerce’s. This lets you add your own Cloudflare features on top of the ones BigCommerce uses.
And you can start with a free Cloudflare account.
This article explains how you can set up O2O on a BigCommerce store and provides a few tips on what you can do with it.
Setting up Cloudflare O2O in BigCommerce
First, create a Cloudflare account and add your store’s domain to it. You can use the free plan. If you already have an account, you can add the domain to that.
During the setup, it will prompt you to review your DNS settings. It will already have pulled over what it thinks is required. Check to see that everything you use is present. In my case, I had to add a subdomain I was using.
Next, you need to alter a DNS record to enable O2O. This process is documented by Cloudflare and BigCommerce. It’s relatively simple:
If you have an A record for your domain, edit it to a CNAME record with the value “shops.mybigcommerce.com”. Otherwise, add a CNAME for your domain with the same value.
The instructions stop here, which is not complete. You then need to update your Nameservers. Cloudflare provides instructions on how to do that in the Overview section, and they include the new nameservers to use. In my case, I logged into the registrar I bought my domain from and updated the nameservers there.
Then you need to wait for the changes to take effect. However, you can set up features as you wait. Here’s one to get you started.
Disable Rocket Loader
If you have enabled Rocket Loader, we suggest you disable it. We’ve found it often breaks scripts by changing their execution order and messing with how the DCL event fires. They even warn you:
If you observe JavaScript or jQuery issues for your website, disable Rocket Loader and retest your website.
Our scripts protect themselves from Rocket Loader, but many others do not.
Rocket Loader is a blunt instrument for speed. Our Page Lightning app is a precise tool to optimise BigCommerce sites for speed and performance.
The setting is in Speed -> Settings, and select the Content Optimisation tab.
Add more early hints
Early hints tell the browser way in advance that certain resources will be required. Those resources can start loading even before BigCommerce has sent the page’s HTML.
BigCommerce is great at providing early hints for core resources, such as fonts, CSS files, and theme scripts. It even adds them for any script added to the script manager. However, sometimes you may want to manually add your own. And Cloudflare O2O lets you do that.
Responsive images can’t be added to early hints because neither the server nor Cloudflare know which version of an image to load.
Potential early-hints candidates:
- Third-party search provider resources (you want them to load fast)
- Third-party review provider resources
Don’t add early hints for resources that aren’t on all pages unless you know how to modify the code to be selective.
Here’s how to do it…
Switch on the Early Hints caching
Go to Speed->Settings, select the “Content Optimization” tab and switch on “Early Hints”.
Note that after a theme edit, the resource URLs change, which can cause a period when the cached early hints do not match the resources on the page.
Create an Early Hints Worker
We’ve created a tool to help you create the worker you want, without any coding:
Cloudflare Worker Generator Tool
Enter the early hints you wish to add, then follow the instructions to add it to Cloudflare.
Test
- Open the dev tools in your browser and select the network tab.
- Navigate to a page on your site.
- The top entry should be the HTML response; select it.
- You should see an “Early hints headers” section that includes your new early hints.
- Also check that the resources you added as early hints are not causing errors in the network report.
It’s hard to test if the early hints are making a difference. A small TTFB is a good clue that the early hints 103 were sent.
If you log in to WebPageTest and test a page, it does visualise the early hints:
If you click the first response, it will list all the early hints suggested.
Early hints are mainly beneficial for the first page a user visits, which is probably the most important time to load things quickly. On subsequent pages, most of the resources in early hints are probably cached on the device, so will load super fast anyhow.
Better bot protection
There’s an aggressive bot from Singapore that is messing up analytics. Our Cloudflare identified it as being from Alibaba (ASN 45102) in its Analytics->HTTP Traffic report with country filtered to Singapore:
This is a good example of how to block a bot. Go to Security > Security rules and add this custom rule:
- Name: “Alibaba bot”
- AS Num equals 45102
- User Agent contains “Macintosh” (optional)
- User Agent contains “Chrome” (optional)
- Country equals “Singapore” (optional)
- Managed Challenge
- Deploy
This is designed to minimise the impact on real users within Alibaba by being specific to the user agent settings used by the known bot. We also know that the bot has a screen size of 1366×1366, but Cloudflare can’t check that.
