Quick CDN Startup Guide: Set Up BunnyCDN the Right Way

This is the fast path for setting up BunnyCDN without overcomplicating it. You will create a pull zone, connect your site, optionally add image optimization, and verify that assets are actually loading through the CDN.

Short answer: for most WordPress, static, and marketing sites, BunnyCDN setup is a 15-30 minute job.

The key is not signup.

The key is verification.

If images still load from your origin, you did not set up a CDN. If images load through BunnyCDN but stay oversized, you set up delivery but not image optimization.

What You Are Setting Up

BunnyCDN has two separate ideas that people often mix up.

BunnyCDN pull zone: caches and serves your files from Bunny's edge network.

Bunny Optimizer: adds image optimization on top of delivery.

That distinction matters.

If you only create a pull zone, a 2 MB JPEG still gets delivered as a 2 MB JPEG. It may arrive from a closer server, but the file itself is unchanged.

If you enable image optimization, Bunny can compress images and serve better variants depending on your settings.

So decide what you need:

If you are still unsure whether CDN work is worth doing, read do I need a CDN first.

Before You Start

Get these ready:

• BunnyCDN account
• access to your website admin or codebase
• your origin URL, such as https://example.com
• DNS access if you want cdn.example.com
• a page to test before and after

Also take a baseline.

Open one important page in Chrome DevTools and note:

• largest image size
• LCP element
• current image URLs
• total transferred image bytes
• PageSpeed or Lighthouse score

Do not skip this.

Without a baseline, you cannot tell whether the CDN helped.

Step 1: Create a Pull Zone

A pull zone tells BunnyCDN where to fetch files from.

In BunnyCDN:

1. Open the dashboard.
2. Choose Add Pull Zone.
3. Enter a zone name, such as example-assets.
4. Set the origin URL, such as https://example.com.
5. Choose the pricing tier and regions.
6. Create the zone.

You will get a hostname like:

example-assets.b-cdn.net

Test it before touching your website.

If this origin image exists:

https://example.com/images/hero.jpg

Then this should also work:

https://example-assets.b-cdn.net/images/hero.jpg

If the Bunny URL returns a 404, fix the pull zone origin first. Do not move on to WordPress or DNS yet.

Step 2: Connect Your Website

How you connect the CDN depends on your stack.

WordPress

WordPress is the easiest case.

Use a CDN plugin that rewrites asset URLs to your Bunny hostname.

The basic flow:

1. Install the BunnyCDN plugin or your preferred CDN rewrite plugin.
2. Add your CDN hostname, such as https://example-assets.b-cdn.net.
3. Enable rewriting for images, CSS, and JS.
4. Clear your WordPress cache.
5. Open the site in an incognito window and inspect an image URL.

The image src should now point to the CDN hostname.

For WordPress-specific provider choices, use best image CDNs for WordPress.

Static HTML or Static Site Generators

For static sites, use a helper instead of hardcoding the CDN domain everywhere.

Before:

<img src="/images/photo.jpg" alt="Product photo" />

After:

<img
  src="https://example-assets.b-cdn.net/images/photo.jpg"
  width="1200"
  height="800"
  alt="Product photo"
/>

Better:

const CDN_URL = 'https://example-assets.b-cdn.net'

export function assetUrl(path) {
  return `${CDN_URL}${path}`
}

Keep URL generation centralized. Future migration becomes much easier.

Next.js, React, or Custom Apps

Use an environment variable:

NEXT_PUBLIC_CDN_URL=https://example-assets.b-cdn.net

Then build image URLs through a helper.

If you use next/image, you may want a custom loader instead of raw string replacement. The full Next.js pattern is in image CDN for Next.js.

Shopify

Be careful with Shopify.

Shopify already serves product images through its own CDN. You usually do not need BunnyCDN for normal product images.

Use BunnyCDN only for external assets, landing page assets, downloadable files, or media outside Shopify's normal image pipeline.

Step 3: Add a Custom CDN Hostname

The default Bunny hostname works.

But a custom hostname is cleaner:

cdn.example.com

or:

images.example.com

In your DNS provider, create a CNAME:

cdn.example.com -> example-assets.b-cdn.net

Then add that hostname in the BunnyCDN pull zone hostname settings and enable SSL.

Use the custom hostname in your site:

<img src="https://cdn.example.com/images/photo.jpg" alt="Product photo" />

Why bother?

• cleaner URLs
• easier CDN migration later
• better brand consistency
• clearer ownership for SEO assets

Do this before rewriting thousands of URLs.

Step 4: Enable Image Optimization if You Need It

Basic CDN delivery is enough when your images are already resized and compressed.

Most sites are not in that state.

Enable Bunny Optimizer if:

• images are larger than their rendered size
• Lighthouse says "properly size images"
• Lighthouse says "serve images in next-gen formats"
• you want automatic image compression
• you want WebP delivery without manual exports
• you want one setup for many future uploads

Bunny Optimizer is a paid add-on. Bunny currently lists it at $9.50 per website with unlimited requests, optimizations, and transformations.

After enabling it, test again.

Do not assume it works because the toggle is on.

In DevTools, check:

• Content-Type is image/webp where expected
• transferred size is smaller
• rendered dimensions match the layout
• quality still looks acceptable
• cache headers are sane

If you need deeper image APIs, AVIF-first workflows, upload widgets, or DAM features, compare ImageKit, Cloudinary, Cloudflare Images, and others.

Step 5: Verify the CDN Is Working

Open Chrome DevTools.

Go to Network.

Filter by Img.

Reload the page.

Check an important image.

You want to see:

Then test the full page:

1. Run Lighthouse before and after.
2. Compare LCP.
3. Compare transferred image bytes.
4. Check mobile viewport.
5. Click through multiple page types.

One homepage test is not enough.

Check an article, a product page, a category page, and any page that uses CSS background images.

Common Issues

The biggest mistake is checking the page visually and stopping there.

A page can look right while still loading every image from the origin.

Always inspect the network requests.

Rollback Plan

Have a rollback.

For WordPress, disable the CDN plugin or remove the CDN hostname from plugin settings.

For static sites, revert the CDN base URL helper.

For DNS, keep the original assets available and lower TTL before migration if the site is high traffic.

If you use a custom hostname like cdn.example.com, migration is easier. You can point it at another CDN later without rewriting every image URL.

That is why I prefer custom hostnames from the start.

What to Do After Setup

First week:

• check broken images
• compare PageSpeed before/after
• watch bandwidth in BunnyCDN
• check mobile pages
• confirm WebP/image optimization if enabled

First month:

• review CDN cost
• check 404 logs
• purge any stale assets
• tune image quality if needed
• move more static assets if the test went well

Then leave it alone.

A CDN should become boring infrastructure.

If you keep fighting it, the setup is too complex.

Summing Up!

The BunnyCDN quick setup is simple: create a pull zone, connect your website, add a custom hostname if you care about clean URLs, enable image optimization if images are the bottleneck, and verify everything in DevTools.

Do not judge the setup by the dashboard.

Judge it by the actual page: CDN URLs, cache hits, smaller image bytes, and better LCP.

Once that works, the CDN should mostly disappear into the background.