How to setup Full site delivery CDN (FSD CDN) with W3 Total Cache

What is a CDN?

A Content Delivery Network (CDN) is a network of servers distributed geographically around the world that work together to deliver web content to end users quickly and efficiently. CDNs store cached versions of website files, such as images, videos, and scripts, in multiple locations so that users can access them from the server closest to their location. This results in faster load times and a better user experience.

What is an FSD CDN?

A Full Site Delivery (FSD) CDN is a type of CDN that not only caches static files but also serves entire web pages. This means that the CDN acts as a proxy server, retrieving web pages from the origin server, caching them, and delivering them to end users. FSD CDNs can speed up website load times by reducing the time it takes for the server to generate and deliver the HTML content of a page.

Why is the CDN important for WordPress websites?

A Content Delivery Network (CDN) is important for several reasons:

Faster website loading times: By caching and delivering web content from servers located closer to the end-user, CDNs reduce the time it takes for a website to load. This can improve the user experience, reduce bounce rates, and increase engagement and conversions.

Improved website availability: CDNs can distribute website traffic across multiple servers, reducing the risk of website downtime due to server overload or failure. This can improve website availability and ensure that users can access your website at all times.

Reduced server load: CDNs can offload traffic from the origin server, reducing the load on the server and improving its performance. This can be especially important for high-traffic websites or websites that experience sudden spikes in traffic.

Better SEO: Website loading times are a key factor in search engine rankings. By improving website loading times with a CDN, you can improve your website’s search engine rankings and visibility.

Global reach: CDNs have servers located around the world, making it easier to serve web content to users in different geographic locations. This can improve website performance and user experience for users in different parts of the world.

Overall, a CDN is important for improving website performance, availability, and global reach. By using a CDN, you can deliver web content quickly and efficiently to users around the world, improving the user experience and ensuring that your website is always available.

How to set up an FSD CDN in W3 Total Cache

When the FSD CDN option is enabled in W3 Total Cache, the plugin will automatically configure the CDN to deliver full site content, including HTML pages, to end users. This means that the CDN will act as a reverse proxy, retrieving content from the origin server and caching it on the CDN’s servers for faster delivery to end users.

There are a couple of things you need before setting up the FSD CDN with W3TC:

1. W3 Total Cache plugin: You will need to install and activate the W3 Total Cache plugin on your WordPress website and an important note, you need a PRO W3 Total Cache license for this feature. The option to enable FSD CDN in W3 Total cache is in the General section of the plugin – Performance>General Settings – CDN section, an this option will be greyed out if the PRO license is not active.
   Once the plugin is enabled in Pro mode, this option will be available:
   
2. Signup with the CDN provider that offers a full site delivery:
   Some popular FSD CDN providers that support W3 Total Cache include Cloudflare,  StackPath, AWS, and KeyCDN.
3. Access to the domain hosting to change the required DNS settings.

Example: Setup an FSD CDN with Stackpath and W3 Total Cache.

As mentioned above, you first need to sign up with a CDN provider, in case, we will be using Stackpath CDN provider

Once you Signup, you will need to create a site and make sure to select Full Site Integration and not Static Assets Integration

Step1: In Stackpath dashboard > Sites:

Step 2:

Follow the instructions to add your website and validate the origin. On the last page, Verify Domain Ownership, there are two options:

• With DNS Challenge, you will create a CNAME record on your domain’s DNS with a StackPath-generated string. StackPath will verify the record and then issue the SSL certificate.
• With HTTP Request, you will create a CNAME record to point your domains to your Site’s edge address. StackPath will verify the domains’ ownership through an HTTP request.

Note: Every DNS provider is different. As a result, the names listed in the table below may not be compatible with your DNS provider.

For example, if you use StackPath as a DNS provider, then to create an A record for your apex domain, you can enter @ as the name; however, not every DNS provider supports @ as a name for A records. As a result, StackPath recommends that you contact your DNS provider to understand what names are accepted for corresponding values, based on the table offered by the Stackpath in the Validation process.

You can check more details in this link as an example of a GoDaddy provider.

Once the DNS records are updated, you will need to wait up to 24 hrs for the pagination to be completed. The progress can be checked using the https://www.whatsmydns.net/ and after pagination is finished, all should be poignant to Stackpath IP:

Once these steps are complete we are ready to finish up the setup by connecting this to the W3 Total Cache.

1. Navigate to Performance>General settings, scroll down to CDN section, Enable the checkbox FSD CDN, select Stackpath (recommended) from the FSD CDN Type andsave all settings
   
2. Next, go to Performance>CDN, and scroll down to Configuration: Full-Site Delivery section and click the Authorize button.
   
3. This will open a new pop-up window that will ask you to add your Stackpath Account Credentials API Client ID: and API Client Secret: and
   You can find these in the Stackpath console, in the upper right corner, select your profile and click API management which will prompt you to the page to generate the credentials:
   Once you click on the Generate Credentials button, name the credentials (any name you want) and it will show the credentials you need to copy and paste to the W3TC pop-up.
   
   
4. After adding the credentials in the W3TC pop-up, you will be prompted to the next screen where you need to select the website assigned and make sure to select the website you are working on if you have multiple sites added on Stackpath:
   
   Click Apply, and Done, and make sure to save all settings and purge the cache.

And this is it, now your website is set up with Stackpath FSD CDN and connected with the W3 Total Cache.

How to confirm that the website is served from the CDN?

After the setup, and after you have saved all settings and purged the cache, open the website in a new window, inspect the source, go to the network tab, and check the Remote address of the website which should be 151.139.128.10:443 and confirm that the x-hw: is set