How to apply CDN to staging website

I want to add CloudFlare CDN to my website, but I’m currently working in a staging environment.

  1. Can I add it to my staging environment? It’s using a different URL than my live website and I know that CloudFlare CDN connects via the domain so I don’t know what to do. Can I only add it to the live version of my website? Or is there a way to add it to the staging site so that I can test everything out before pushing it to the live site?

  2. Once everything transfers from the staging site to the live site, will I need to make any final changes during the transfer so that the live site gets everything it needs (since the CDN might have only been associated with the staging URL)?

  3. I’m using Imagify for image optimization on WordPress and there’s an option to connect a CDN of my choice for the image optimization. Should I connect CloudFlare CDN to Imagify on the staging site? Or should I only do that for the live site? This is a screenshot of where I would connect Imagify with CloudFlare CDN: Image 2021-08-25 at 6.56.03 PM

I don’t want to use CloudFlare’s image optimization service at this time. I want to stick with the free plan.

Thanks in advance for any help!

Is your staging site separated with different subdomain e.g. staging.example.com?

If yes then you can selectively enable Cloudflare for this subdomain only.

Then enable the Cloudflare proxy :orange: of your live site subdomain.

It is advised not to convert images to WebP on your origin, as Cloudflare may accidentally serve WebP images to browsers that do not support WebP.

2 Likes

Thank you for the advice! I have a few follow up questions.

First of all, I’m not using a subdomain. My staging environment is through the Cloudways staging feature. My live URL is https://azurodigital.com/ and my staging URL is https://wordpress-474995-2098530.cloudwaysapps.com/

  1. How should I proceed given the nature of these domains? Can I connect CloudFlare CDN with my staging site to test everything before pushing it to the live site?

  2. How do I properly transfer everything from the staging site to the live site in this case? You previously mentioned “enable the CloudFlare proxy of your live site subdomain” but I’m not using a subdomain, so how does this get impacted? And WHEN exactly do I enable the proxy? And when should I disable it?

  3. For WebP, what do you mean by “on your origin”? What’s the proper way of converting my images to WebP images?

Thanks again for your help!

  1. Sorry, but you can’t add someone else’s subdomain (Cloudwaysapps) to Cloudflare.

  2. I’m not clear on what Eric was saying, but you can ignore the staging configuration once you migrate staging to live. You might want to wait until a bit after you go live before you enable Cloudflare, just to isolate any potential problems.

  3. Some sites deliver WebP with a .jpg extension because it’s easier. But Cloudflare proxies by filename, so a browser that can’t display WebP might get a WebP with a .jpg extension. Paid plans have a “Polish” feature which does this on the fly at Cloudlfare, which is more reliable than the origin approach.

1 Like

Ok thank you. Regarding #3 - can you please check my website: https://wordpress-474995-2098530.cloudwaysapps.com/

To confirm, am I currently using the “origin approach”? If yes, does this mean that some browsers won’t be able to see my images at all? If so, is it a rare issue or is it something that I really need to be concerned about? I’d rather not pay for a paid plan on Cloudflare. Was hoping to use the free plan.

Another quick question - does Cloudflare CDN handle the delivery of ALL website content, including videos? I have uploaded some MP4s directly to the WordPress media library to use as full width background videos that auto-play. Does Cloudflare CDN handle the delivery of those videos? And what about embedded YouTube videos?

And I’m assuming Cloudflare CDN delivers all CSS, JS, and images as well?

Thanks for your help!

Hi there - I’m still very curious to know whether the free version of Cloudflare CDN serves videos.

I have uploaded some MP4s directly to the WordPress media library to use as full width background videos that auto-play. Does Cloudflare CDN handle the delivery of those videos?

This is my website which contains the background videos I’m referring to: https://azurodigital.com/

Someone’s help would be very much appreciated!

Thank you.

A little bit of video is ok. I have some short clips on my sites. And a background video is clearly permissible, as it’s part of a web page.

The issue comes when someone wants to proxy a video service through Cloudflare. That’s way too much bandwidth for a non-Enterprise account.

I was told by WP Rocket support that the free version of Cloudflare does not support the serving of video files. Is this true? I want to make sure that my CDN actually delivers the video files that I was referring to. Would I need to upgrade to a paid Cloudflare plan in order to get video files served by the CDN (specifically MP4s that I uploaded directly to the WordPress media library to use as full width background videos that auto-play)?

Most definitely not. Again, within the confines I described.

Perfect, thank you!

Last question - in a previous thread you mentioned this: “Some sites deliver WebP with a .jpg extension because it’s easier. But Cloudflare proxies by filename, so a browser that can’t display WebP might get a WebP with a .jpg extension. Paid plans have a “Polish” feature which does this on the fly at Cloudlfare, which is more reliable than the origin approach.”

Regarding this, are you able to tell if I’m currently using the “origin approach”? My domain is azurodigital[dot]com (it won’t let me add the link for some reason)

If yes, does this mean that some browsers won’t be able to see my images at all? If so, is it a rare issue or is it something that I really need to be concerned about? I’d rather not pay for a paid plan on Cloudflare. Was hoping to use the free plan.

Thanks again for your help!