Integrating your website with the StackPath CDN is as easy as changing a couple of DNS records to point your domain to the CDN.
What is a Full Site Integration?
This method is the gold standard for using the StackPath CDN as it provides the best speed, most transparent implementation, and the most robust feature set while still maintaining SEO.
This is because with a Full Site Integration your website's assets will be seen as coming from your domain, just as they were before adding the CDN into the mix - It's truly a win-win scenario.
Full Site Integrations send all requests to your site through the CDN. StackPath will then either proxy requests to your server (also known as an Origin) to fetch the asset being requested, or serve it from the CDN cache if the asset is already in our cache. Easy as pie! Pointing your domain to the CDN is what we refer to as a Full Site Integration.
Let's get started!
Editing DNS Record for your "WWW" subdomain.
When setting up a Full Site Integration, it is recommended that you deliver your website via the "www" version of your website's domain, (rather than just the apex domain). Please make sure your web server is configured to deliver your site over "www" and then follow the steps below to begin your integration with the CDN.
Note: An apex domain is also known as a bare, or root domain that is usually configured with a DNS A or ANAME record. "example.com" is an example of an apex domain. A subdomain, like www.example.com or blog.example.com allows different content to be delivered under the same root domain.
- Find your Edge Address and copy to your clipboard. The Edge Address is shown in the portal as follows in the site Overview page:
- Log into your DNS provider.
- Verify that you already have a DNS CNAME record for "www"
- If yes, and it is a CNAME record already, you may simply edit the existing values as shown in Step 3 below
- If yes, but the www is an A-Record, leave in place - we will remove later in this guide, move on to Step 3 below.
- If no - proceed to step 3 to create as a new DNS record
- Create a new DNS record following this format(the labels of the text fields may vary slightly depending on your DNS provider)
- Record Type - CNAME
- Host/Name - www
- Value/Points to/is alias of - paste your CDN Site's Edge Address
- TTL - 2 minutes or the lowest value available at your provider
- Save the record.
- Depending on your DNS provider, some things may look a bit different, but your record should look like this when finished:
This change may take some time to propagate, so let's move on to some other tasks while we wait!
Editing DNS A-Record for your Apex domain ("@")
Every website must have an A-Record for the apex domain in order to work properly. This is typically represented by the value " @ " in the Host or Name field of the DNS record.
This record dictates what IP Address your domain points to. Right now, this record should be pointing to your origin server's IP address. In the steps below, we will guide you on changing this record to point to the StackPath CDN.
An added benefit is that your origin IP will no longer be exposed in DNS queries, effectively obscuring your IP address from the general public. Instead, when your domain is queried via DNS or an HTTP request is made to your domain, it will show your Stackpath Edge Address. This makes it more difficult for a would-be attacker to find and attack your origin server's network interface.
- Log into the StackPath Control Portal and navigate to the Overview page for your site
- Locate your site's Edge Address and select Copy to copy it to your clipboard
- Next we need to see what IP the EdgeAddress resolves to - Using a browser-based tool like WhatsMyDNS, paste your Edge Address into the tool to do an A-record check on your Edge Address. This will give you its AnyCast IP address. (shown as 18.104.22.168 in the example below, this may or may not vary for your edge address)
- Highlight the IP address that returns in the WhatsMyDNS Tool and copy to your clipboard (right click >> copy or ctrl+c)
- Log into your DNS Provider
- Locate the A-Record with the Host/Name of "@". This record should have an IP address in the Value or Points To field. Note - Terminology may vary slightly based on your provider
- Verify that the IP in this record is currently the IP of your server
- Edit the Record, pasting the IP from above into the IP address field, replacing your server's IP address.
- Set the TTL to 2 minutes or the lowest value available in your provider's panel.
- Save the record.
- If you have a duplicate DNS record for "www" as described in the previous section (Step 2a), you may remove that record at this time.
Verifying the Integration
The last step we have before moving on is to make sure that your site is actually being served over the CDN. The easiest way for most to do this is via the command-line tool cURL. This will send an HTTP request to your domain and return key response headers for you to determine whether or not your site is integrated. The header we are going to be looking for is the X-HW Response Header.
We insert this header from the CDN to give you and our technical staff key information about the Edge location and server that is handling any given request. Please continue with the steps below to find the X-HW Response Header on your site's CDN assets.
For more information on how CDN Caching works on StackPath, feel free to check out this article.
Finding the X-HW Header is quite simple, and can be done using our handy-dandy browser Inspection Tools! I will explain how to do this below:
- Close all tabs or browser windows in which you may have opened your site so far
- Open your browser of choice, using an incognito/private window.
- This will open a browser window that does not utilize any existing data from your browser's cache. This is imperative so that we can see the site as it currently is, not how it was last time it was cached.
- Right Click anywhere in your browser window and select the Inspection tool. Here are examples from the most popular browsers, FireFox and Chrome, respectively:
- Once in your Inspection Tool, select the Network Tab - Firefox (a.) and Chrome (b.) shown below:
- Now load your site! You should see all of the HTTP Requests populate the network tab like so (your view may vary depending on browser preferences) - Firefox (a.) and Chrome (b.)
- Now, in the Name (Firefox) or Domain (Chrome) column, click on any of the requests that show your domain. This will bring up the header view. Here we will locate the X-HW Response Header, which is inserted by the CDN to provide us information on the delivery of a resource:
- SUCCESS! The presence of this header confirms that the site has been integrated with the CDN. If you do not see these yet, please allow time for the DNS changes to propagate. If you believe they have had sufficient time, you may try flushing your local DNS cache to clear out old responses.
NOTE: You do not need to do any sort of CDN Integration using WordPress plugins at this point., but plugins are still useful for Origin-Side optimizations, with the CDN feature turned off. The DNS will handle sending traffic through the StackPath Network.
Move on to Step 4
Congratulations! You've just completed a Full Site Integration, and as the DNS record changes made in this article begin to propagate around the world, your site should start delivering from the CDN.
While you do that, feel free to check out the final article in this guide - Step 4 - Getting the Most out of the CDN.