Tag: Cloudflare

BunnyCDN + Cloudflare: Should You Double‑Up and How to Do It

Using BunnyCDN and Cloudflare together can supercharge your WordPress site’s speed and security. But is it necessary to stack these two CDNs, and if so, how do you configure them correctly without causing conflicts? This guide explains when combining BunnyCDN and Cloudflare makes sense and provides a clear, step-by-step setup to get you started.

Quick Fix: How to Use BunnyCDN and Cloudflare Together on WordPress

1. Set up Cloudflare as your DNS and primary CDN with your domain pointing to your origin server.
2. Create a Pull Zone in BunnyCDN targeting your Cloudflare URL or origin server.
3. Configure BunnyCDN as a secondary CDN by rewriting static asset URLs to BunnyCDN URLs in WordPress.
4. Adjust cache settings on both BunnyCDN and Cloudflare to avoid cache conflicts.
5. Test your site to ensure assets load correctly and caching behaves as expected.

Why This Happens: Understanding the Need for BunnyCDN and Cloudflare Together

Cloudflare is a popular CDN and security provider that offers global caching, DDoS protection, and SSL termination. BunnyCDN is a fast, affordable CDN focused on delivering static assets with low latency. Using both together can:

• Improve global performance: Cloudflare caches your entire site at the edge, while BunnyCDN can serve static assets from a highly optimized network.
• Enhance security: Cloudflare protects your origin from attacks and bots.
• Optimize costs: BunnyCDN’s pay-as-you-go pricing for bandwidth can reduce costs for heavy static asset delivery.

However, stacking two CDNs can cause caching conflicts, increased complexity, and potential delays if not configured properly. This is why a clear architecture and cache strategy is essential.

Architecture Options: How to Combine BunnyCDN and Cloudflare

There are two common architectures when combining BunnyCDN and Cloudflare:

The most common and recommended setup is Cloudflare as primary CDN with BunnyCDN serving static assets separately.

Step-by-Step: Setting Up BunnyCDN and Cloudflare Together on WordPress

1. Configure Cloudflare for Your Domain

   1. Sign up or log in to Cloudflare.
   2. Add your domain and update your nameservers to Cloudflare’s.
   3. Enable proxy (orange cloud) for your domain in DNS settings.
   4. Configure SSL (Full or Full Strict) and security settings.
   5. Enable caching and performance features as needed.
   

2. Create a BunnyCDN Pull Zone

   1. Log in to BunnyCDN dashboard.
   2. Go to 'Pull Zones' and create a new zone.
   3. Set the origin URL to your Cloudflare proxied domain (e.g., https://www.yoursite.com).
   4. Choose the closest storage region.
   5. Save the Pull Zone and note the BunnyCDN URL (e.g., yourzone.b-cdn.net).
   

3. Rewrite Static Asset URLs in WordPress

   Use a plugin or code snippet to rewrite URLs for images, CSS, and JS to BunnyCDN URLs.

   <?php
   function replace_static_urls_with_bunnycdn($content) {
       $bunnycdn_url = 'https://yourzone.b-cdn.net';
       $site_url = get_site_url();
       $content = str_replace($site_url . '/wp-content/uploads', $bunnycdn_url . '/wp-content/uploads', $content);
       $content = str_replace($site_url . '/wp-includes', $bunnycdn_url . '/wp-includes', $content);
       $content = str_replace($site_url . '/wp-content/themes', $bunnycdn_url . '/wp-content/themes', $content);
       return $content;
   }
   add_filter('the_content', 'replace_static_urls_with_bunnycdn');
   add_filter('style_loader_src', function($src) use ($bunnycdn_url, $site_url) {
       return str_replace($site_url, $bunnycdn_url, $src);
   });
   add_filter('script_loader_src', function($src) use ($bunnycdn_url, $site_url) {
       return str_replace($site_url, $bunnycdn_url, $src);
   });
   ?>
   

   Alternatively, use plugins like CDN Enabler to rewrite URLs easily.

4. Configure Cache Settings on Cloudflare and BunnyCDN
   • On Cloudflare, set caching level to “Standard” or “Aggressive” but exclude static assets served by BunnyCDN if possible.
   • On BunnyCDN, set appropriate cache expiration headers (e.g., 1 week for images, CSS, JS).
   • Use page rules in Cloudflare to bypass cache for dynamic content or admin pages.
5. Test Your Setup

   1. Clear all caches (WordPress, BunnyCDN, Cloudflare).
   2. Load your site and inspect asset URLs to confirm they use BunnyCDN URLs.
   3. Use browser dev tools to check response headers for caching.
   4. Verify SSL works correctly and site loads fast globally.
   

Cache Rules: Best Practices for BunnyCDN and Cloudflare

• Cloudflare: Use page rules to bypass cache on wp-admin, login pages, and dynamic endpoints.
• BunnyCDN: Cache static assets aggressively with long TTL