1. Home
  2. Docs
  3. CDN
  4. Configuring DNS
  5. Using Cloudflare for Static Content

Using Cloudflare for Static Content

Should I use Cloudflare with QUIC.cloud CDN?

To answer that question, let’s look at the route that a user request takes with QUIC.cloud alone, and then look at what happens when you add Cloudflare.

Without Cloudflare

Without Cloudflare, all requests look like this:

User request <----> QUIC.cloud <--if cache miss--> Origin server

The request goes to QUIC.cloud. If the content is cached (aka a "cache hit") the content is served. If the content is not present in the cache (aka a "cache miss") then the request goes to the origin to be served.

With Cloudflare’s Default Configuration

By default, Cloudflare does not cache dynamic content. (It is technically possible to cache dynamic content with Cloudflare, but in doing so, you interfere with the smart-tag system and intelligent caching of QUIC.cloud / LiteSpeed Cache, so it is emphatically not recommended.)

Because Cloudflare is not caching dynamic content, but it is caching static content, the request is routed differently based on the type of content.

Dynamic request <----> Cloudflare <----> QUIC.cloud <--if cache miss--> Origin server

As you can see, dynamic requests are made more complicated with the addition of Cloudflare. Since the request must be routed to QUIC.cloud every time, Cloudflare simply increases latency and adds a delay to the request’s travel time.

Static request <----> Cloudflare <--if cache miss--> QUIC.cloud <--if cache miss--> Origin server

Static requests, on the other hand, may go no further than Cloudflare, if it’s a cache hit. As of this writing, Cloudflare has more nodes than QUIC.cloud, which may improve the delivery time to some locations, making it a potentially good choice for static content.

With Cloudflare Handling Only Static Content

You can configure Cloudflare to always handle static content while leaving the dynamic requests for QUIC.cloud, and your requests will look like this:

Dynamic request <----> QUIC.cloud <--if cache miss--> Origin server
Static request <----> Cloudflare <--if cache miss--> Origin server

Decision Time

For the shortest possible path (and therefore fastest response time), we suggest one of two possible configurations:

  1. Use QUIC.cloud alone, for both dynamic and static content
  2. Use QUIC.cloud for dynamic content and Cloudflare for static content.

TIP: For most sites, except maybe those that are particularly media heavy, the loading time for dynamic content is a more important concern than the loading time for static resources. It’s not necessary to worry so much about static content, as there are plenty of tactics you can use to improve the impact, like lazy loading, deferred loading, and asynchronous loading.

Configuration

If you’d like to configure your WordPress site to use Cloudflare for static files (images, JavaScript, CSS, etc.), and use QUIC.cloud to cache and serve dynamic content, as in option #2 above, we recommend you use a subdomain for your static files.

NOTE: Cloudflare may not be used to serve static content in this manner without a paid subscription. Please see Cloudflare’s Terms of Service (section 2.8 as of this writing) for details.

Check out our video How to Use CloudFlare as a Static Content CDN with LSCWP for a step-by-step tutorial.

Set Up Static Content

Setting up your subdomain for static content requires you to configure Cloudflare, your web server, and WordPress.

Cloudflare

Setting Up Cloudflare Subdomain

Log into your Cloudflare account and add a new CNAME record. Call it something like cdn.yourdomain.com and point it to your origin IP. Make sure the cloud icon is orange so that the static files served through the subdomain can keep using Cloudflare.

Web Server

If you are using LiteSpeed WebAdmin, create a virtual host for the new subdomain.

If you are using a control panel such as cPanel, Plesk, DirectAdmin, or CyberPanel, create a subdomain and point it to the same document root as the main site.

WordPress

Setting up the Cloudflare in WordPress

From the WordPress Dashboard, navigate to LiteSpeed Cache > CDN. You will see a note that instructs you not to use CDN Mapping for QUIC.cloud or Cloudflare API. That warning applies when using Cloudflare as a reverse proxy. It does not apply to this particular situation, so please ignore it.

Set up CDN mapping to use Cloudflare with the new subdomain, like so:

  1. Set Use CDN Mapping to ON
  2. Set CDN URL to cdn.yourdomain.com
  3. Put //yourdomain.com/ in the Original URLs box.
  4. Save changes

Verify

 

Verifying Cloudflare is Serving Static Content

At this point, you should be able to view your site’s page source and verify that images and other static files are being served from cdn.yourdomain.com.

Set up Dynamic Content

Configure and enable QUIC.cloud as you normally would, using yourdomain.com.

Was this article helpful to you? Yes 3 No