How to Optimize MyListing Websites With BunnyCDN and Bunny Optimizer

Building better MyListing websites. One guide at a time.

Table of Contents

Overview

Our How to Optimize MyListing Websites With BunnyCDN and Bunny Optimizer guide will show you how to easily implement this solution to provide a more powerful and fast website.

In this guide, we will be migrating CDN services for a MyListing website, from Cloudflares’s FREE plan to BunnyCDN’s paid solution.

Cloudflare will continue to host DNS, given that it is arguably the fastest DNS provider in the world and because BunnyCDN does not provide DNS services at the time of this writing.

Note: We are not recommending any CDN solution over another, as every website is different in terms of how they are built, their underlying infrastructure, budgets, etc., but rather, giving you options that we’ve found to be worth your time to explore.

Set Baselines

Before starting out on a journey like this, we highly recommend recording a baseline of the performance of your website, using your preferred testing tool (GTMetrix, Pingdom, Web.dev, etc.).

Which tool you choose for your baseline isn’t as important and being sure to use the same tool each time, to keep your testing consistent.

Each time you introduce a major change, as you go along, you’ll want to record another baseline to see how things have changed, for the good or bad.

By recording baselines, you can then determine which changes were the most beneficial, whether paid options were actually needed, etc.

For the purposes of this guide, we’ll be creating 3 baselines:

  • Baseline 1 (Cloudflare Only): Before any work is done using this guide.
  • Baseline 2 (Cloudflare DNS + BunnyCDN): After removing all services from Cloudflare, with the exception of DNS, plus the addition of BunnyCDN.
  • Baseline 3 (Cloudflare DNS + BunnyCDN + Bunny Optimizer): After removing all services from Cloudflare, with the exception of DNS, plus the addition of BunnyCDN, and the addition of Bunny Optimizer.

So, before continuing on with this guide, it’s advisable to take care of ‘Baseline 1′.

Cloudflare

Before we start with BunnyCDN, we want to remove all services from Cloudflare, with the exception of DNS.

  1. Log into your Cloudflare dashboard.
  2. Select the website you would like to remove Cloudflare from.
  3. Go to the ‘DNS’ tab.
  4. For the A record of your primary domain, click the orange cloud icon (‘Proxied’) so that it becomes grey (‘DNS only’).
  5. Click the ‘Save’ button.
  6. Repeat steps 4-5 for the CNAME record labeled ‘www’, for your primary domain.
bunnycdn,bunny optimizer

At this point, your website will only be using Cloudflare DNS, with all of the other features turned off for your domain.

BunnyCDN

Quick Overview

BunnyCDN is a reliable, powerful, and lightning-fast CDN designed to offer incredible performance at the world’s most cost-effective pricing.

Setup Your First Pull Zone

Your ‘Pull Zone’ tells BunnyCDN where to find your files and how to serve them to your users.

  1. Sign up for a FREE, 14-Day Trial of BunnyCDN.
  2. From the ‘Welcome’ page of your dashboard, click the ‘+Add Pull Zone’ button.
bunnycdn,bunny optimizer
  1. Name > Enter your website name. (Note: Use all lowercase letters and no spaces, along with numbers if desired or required so that your name is unique on the BunnyCDN network.).
  2. Origin URL > Enter your website’s full URL. (Note: If your website is using an SSL certificate, which all websites should be, make sure to enter https:// as part of your full URL.).
  3. Pricing Zones > Click on any of the pricing zones that you don’t want/need to serve data from. (Note: For example, if you only serve users in Europe and North America, disable all of the other pricing zones.).
  4. Click the ‘Add Pull Zone’ button.
bunnycdn,bunny optimizer
  1. Leaving your BunnyCDN Dashboard open, open another browser tab.
  2. In that new browser tab, install and activate the BunnyCDN WordPress Plugin on your website.
  3. After activating the plugin, click on the BunnyCDN link from your WordPress Dashboard’s left-hand menu and enter the same name you used for step #3 above.
  4. Go back to your BunnyCDN Dashboard and go to your account settings.
  5. Click on the ‘eye’ icon to expose and copy your API key.
bunnycdn,bunny optimizer
  1. Go back to your BunnyCDN settings on your website and click on the ‘Switch To Advanced View’ link.
  2. For the ‘API Key (Optional)’ field, paste in your API Key from the steps above.
  3. Click on the ‘Enable BunnyCDN’ button.
bunnycdn,bunny optimizer

Force SSL

Enabling this setting configures insecure (i.e. HTTP) website requests to automatically redirect as secure (i.e. HTTPS) website requests, which also helps prevent duplicate content.

  1. From your BunnyCDN Dashboard, click on the ‘Pull Zones’ tab.
  2. Under ‘Manage Pull Zones’, click on your website name.
  3. Click on the ‘Security’ menu item.
  4. In the ‘Linked Hostnames” section, toggle ON the ‘Force SSL’ setting.
bunnycdn,bunny optimizer

Origin SSL Certificate Validation

This feature will not only connect to your origin (i.e. server) via an encrypted HTTPS connection but also verify the certificate on your server to make sure BunnyCDN is connecting to a verified destination.

If the certificate validation fails, our servers will automatically reject the request, making sure no data is sent to a server or destination outside of your control.

  1. From your BunnyCDN Dashboard, click on the ‘Pull Zones’ tab.
  2. Under ‘Manage Pull Zones’, click on your website name.
  3. Click on the ‘Security’ menu item.
  4. SSL > Toggle ON ‘Verify Origin SSL Certificate’.

Configure Hotlinking Protection

Hotlinking Protection stops other websites from stealing your content and increasing your bandwidth bills.

  1. From your BunnyCDN Dashboard, click on the ‘Pull Zones’ tab.
  2. Under ‘Manage Pull Zones’, click on your website name.
  3. Click on the ‘Security’ menu item.
  4. Allowed Referrers > Add your website’s root domain (e.g. domain.com) and click the ‘Add’ button.
  5. Repeat the steps for your staging environment (e.g. *.domain.com).
  6. Repeat the above steps for any other Pull Zone(s) you add to BunnyCDN.
bunnycdn,bunny optimizer

Caching

At this time, all we will need to configure here is WebP support for the Pull Zone(s).

  1. From your BunnyCDN Dashboard, click on the ‘Pull Zones’ tab.
  2. Under ‘Manage Pull Zones’, click on your website name.
  3. Click on the ‘Caching’ menu item.
  4. Vary Cache > Toggle ON ‘Browser WebP Support’.
  5. Click the ‘Save Vary Configuration’ button.
  6. Repeat the above steps for any other Pull Zone(s) you add to BunnyCDN.

Origin Shield

This is a secondary caching layer that sits between the data centers your BunnyCDN implementation (i.e. Pull Zone) pulls from and your origin (i.e. server).

So, let’s say your website visitors trigger a response from your primary data centers but they are unable to provide a cached version of a particular resource for some reason.

Rather than trying to then pull that resource directly from your server and increasing its load, BunnyCDN will attempt to serve the resource from another data center that’s part of that second layer.

As of this writing, the available Origin Shield locations are Chicago and Paris.

In plain English: If your actual server is located further away from your users than Chicago or Paris, enable Origin Sheild.

  1. From your BunnyCDN Dashboard, click on the ‘Pull Zones’ tab.
  2. Under ‘Manage Pull Zones’, click on your website name.
  3. Click on the ‘Caching’ menu item.
  4. Origin Shield > Toggle ON ‘Origin Shield’. (Optional)
  5. Repeat the above steps for any other Pull Zone(s) you add to BunnyCDN.

At this point, Origin Shield should be configured to use the closest available “secondary caching server” to your primary BunnyCDN data region.

Headers

Add Canonical Headers

If enabled, BunnyCDN will automatically add a Canonical link header to your requests pointing back to your origin URL, which is good for SEO optimization.

  1. From your BunnyCDN Dashboard, click on the ‘Pull Zones’ tab.
  2. Under ‘Manage Pull Zones’, click on your website name.
  3. Click on the ‘Headers’ menu link.
  4. Toggle ON ‘Add Canonical Headers’.
  5. Repeat the above steps for any other Pull Zone(s) you add to BunnyCDN.

At this point, Origin Shield should be configured to use the closest available “secondary caching server” to your primary BunnyCDN data region.

Integrate ShortPixel Adapative Images

If you have the ShortPixel Adaptive Images plugin implemented, as we do, you will want to run through these steps.

  1. From your BunnyCDN Dashboard, click on the ‘Pull Zones’ tab.
  2. Click the ‘+Add Pull Zone’ link.
  3. For the ‘Name’, add anything you would like, such as ‘shortpixelai’.
  4. For the ‘Origin URL’, enter ‘https://no-cdn.shortpixel.ai/‘.
  5. Pricing Zones > Click on any of the pricing zones that you don’t want/need to serve data from. (Note: For example, if you only serve users in Europe and North America, disable all of the other pricing zones.).
  6. Click the ‘Skip Instructions’ button.
  7. Toggle ON ‘Force SSL’.
  8. Security > SSL > Toggle ON ‘Verify Origin SSL Certificate’.
  9. Security> Allowed Referrers > Add ‘shortpixel.ai‘ and ‘*.shortpixel.ai’.
  10. Caching > Vary Cache > Toggle ON ‘Browser WebP Support’ and click ‘Save Vary Configuration’.
  11. Caching > Origin Shield > Toggle ON ‘Origin Shield’. (Optional)
  12. Headers > Toggle ON ‘Add Canonical Headers’.
  13. Copy the new hostname generated for your ShortPixel Pull Zone on BunnyCDN. (ex. shortpixelai.b-cdn.net).
bunnycdn,bunny optimizer
  1. On your website, go to Settings > ShortPixel AI > Behaviour.
  2. API URL > Paste in the hostname you copied from step #3 above.
  3. Prepend ‘https://’ to the hostname.
  4. Append ‘/spai’ to the hostname.
  5. Save your changes in the ShortPixel Adaptive Images plugin.

After you’re done, your API URL for  Shortpixel AI should be something like ‘https://shortpixelai.b-cdn.net/spai‘.

Your images will now be optimized with ShortPixel Adaptive Images and further optimized/served using BunnyCDN.

Integrate WP Rocket

If you have the WP Rocket plugin implemented, as we do, you will want to run through these steps.

  1. From your BunnyCDN Dashboard, click on the ‘Pull Zones’ tab.
  2. Under ‘Manage Pull Zones’, click on your website name.
  3. Copy your ‘Hostname’ value. (Note: This will be something like .b-cdn.net.).
  4. WP Rocket > CDN > Check the box for ‘Enable Content Delivery Network’.
  5. In the CDN CNAME(s) box, copy and paste in your ‘Hostname’ from step #3 above.
  6. Add ‘https://’ in front of the ‘Hostname’. (Note: Your final CNAME entry in WP Rocket should be something like https://.b-cdn.net.).
  7. Click the ‘Save Changes’ button with WP Rocket.

Secure Your Account

It is a good practice in general, to protect your account with 2FA (Two-Factor Authentication), but it is especially important to prevent someone from gaining access to your account, where they can rack up charges, wreak havoc on your website operations, etc.

  1. From your BunnyCDN Dashboard, go to your account settings.
  2. Under the Two-Factor Authentication settings, click on the ‘Enable Two-Factor Authentication’ button and follow the instructions to complete the process.
  3. Once you’re done, we also recommend screen capturing and saving the Backup codes, just in case you lose your 2FA access down the road.
bunnycdn,bunny optimizer

BunnyCDN Testing

At this point, if you’re following this guide in its entirety, your DNS services are being provided by Cloudflare, and CDN services are being provided by BunnyCDN.

Great, so now what? How do I know this thing is working?

If traffic for your website has passed through BunnyCDN, you should see statistical data.

  1. From your BunnyCDN Dashboard, pull up the statistics area of your account.
  2. If you are seeing data, you’re good to go, but if you’re not and you’re really anxious to get this tested, open up a new browser where you are not logged into your website.
  3. Browse the Home page of your website and with your interaction, BunnyCDN will populate its cache and start showing statistics.

Traffic Distribution

Since you browse your website from your region, BunnyCDN will update the cache in their data centers for your region.

As an example, if you were to browse from the United States, you should see the data center closest to you, with the largest amount of cached data.

Once your users start visiting your website (regionally, nationally, or globally), the rest of the BunnyCDN data centers will catch up and serve your website data faster to subsequent visitors.

Your Datacenter Traffic Distribution is shown at the bottom of your BunnyCDN Statistics page.

Cache HIT Rate

Since you just added your website to BunnyCDN, this can be low, but if your website has a good amount of traffic and still has a low cache hit rate (i.e. below 70%), it’s a sign that there may be something wrong.

However, when you first add your website to BunnyCDN, the cache hit rate slowly builds up, so you might need to wait a day to see your cache hit rate be above 70%.

Once you are seeing your Cache HIT Rate where it needs to be, it’s time to create ‘Baseline 2 (Cloudflare DNS + BunnyCDN)‘.

Note: If 24 hours goes by and your Cache HIT Rate never gets above 70%, it might be time to look at BunnyCDN’s advanced troubleshooting guide.

Bunny Optimizer

Quick Overview

Bunny Optimizer automatically minifies, compresses, and optimizes your static files on the fly and provides a powerful image processing API to resize, crop, and manipulate images in real-time.

Setup

At this point, you should have Baseline 2 (Cloudflare DNS + BunnyCDN) in place, so you’re ready to see if the Bunny Optimizer solution is worth the investment for your particular website.

Important: Before you continue on with this section, we recommend you look at any current WordPress optimization solutions (CDN, server, plugins, code snippets, etc.) that you may have, to determine if you need to prevent “functionality overlap”.

Since there are so many combinations of optimization solutions, we can cover them all here, although we would love to do that for you.

  1. From your BunnyCDN Dashboard, click on the ‘Pull Zones’ tab.
  2. Under ‘Manage Pull Zones’, click on your website name.
  3. Click on the ‘Optimizer’ menu item.
  4. Toggle ON ‘Optimizer’ setting.
  5. Maximum Desktop Image Width > 1980px.
  6. Watermark Images > Toggle OFF.
  7. Click the ‘Save Configuration’ button.

Wrap Up

Given that you now have this guide in hand and BunnyCDN offers a FREE 14-Day trial for both their core product and Bunny Optimizer, you have nothing to lose if you want to give it a shot, and compare it to other performance stacks you’ve tried (or not tried).

BunnyCDN also provides a really nice ‘Monthly Bill Estimator‘, at the bottom of their Pricing page.

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)