Skip to content

FAQ: CDN

maxicus edited this page Dec 3, 2018 · 5 revisions

I don't understand what a CDN has to do with caching, that's completely different, no?

Technically no, a CDN is a high performance cache that stores static assets (your theme files, media library etc) in various locations throughout the world in order to provide low latency access to them by readers in those regions.

How do I configure Amazon Simple Storage Service (Amazon S3) or Amazon CloudFront as my CDN?

First create an S3 account (unless using origin pull); it may take several hours for your account credentials to be functional. Next, you need to obtain your "Access key ID" and "Secret key" from the "Access Credentials" section of the "Security Credentials" page of "My Account." Make sure the status is "active." Next, make sure that "Amazon Simple Storage Service (Amazon S3)" is the selected "CDN type" on the "General Settings" tab, then save the changes. Now on the "Content Delivery Network Settings" tab enter your "Access key," "Secret key" and enter a name (avoid special characters and spaces) for your bucket in the "Create a bucket" field by clicking the button of the same name. If using an existing bucket simply specify the bucket name in the "Bucket" field. Click the "Test S3 Upload" button and make sure that the test is successful, if not check your settings and try again. Save your settings.

Unless you wish to use CloudFront, you're almost done, skip to the next paragraph if you're using CloudFront. Go to the "General Settings" tab and click the "Enable" checkbox and save the settings to enable CDN functionality. Empty the cache for the changes to take effect. If preview mode is active you will need to "deploy" your changes for them to take effect.

To use CloudFront, perform all of the steps above, except select the "Amazon CloudFront" "CDN type" in the "Content Delivery Network" section of the "General Settings" tab. When creating a new bucket, the distribution ID will automatically be populated. Otherwise, proceed to the AWS Management Console and create a new distribution: select the S3 Bucket you created earlier as the "Origin," enter a CNAME if you wish to add one or more to your DNS Zone. Make sure that "Distribution Status" is deployed and "State" is enabled. Now on "Content Delivery Network" tab of the plugin, copy the subdomain found in the AWS Management Console and enter the CNAME used for the distribution in the "CNAME" field.

You may optionally, specify up to 10 hostnames to use rather than the default hostname, doing so will improve the render performance of your site's pages. Additional hostnames should also be specified in the settings for the distribution you're using in the AWS Management Console.

Now go to the General tab and click the "Enable" checkbox and save the settings to enable CDN functionality and empty the cache for the changes to take effect. If preview mode is active you will need to "deploy" your changes for them to take effect.

Anything I need to do when using Amazon Web Services with limited permissions (S3, CloudFront, SNS)?

We recommend that you use IAM to create a new policy for AWS services that have limited permissions. A helpful tool: AWS Policy Generator

You also find a S3 configuration sample in the "ini" folder in the plugins directory.

How do I configure Rackspace Cloud Files as my CDN?

First create an account. Next, in the "Content Delivery Network" section of the "General Settings" tab, select Rackspace Cloud Files as the "CDN Type." Now, in the "Configuration" section of the "Content Delivery Network" tab, enter the "Username" and "API key" associated with your account (found in the API Access section of the rackspace cloud control panel) in the respective fields. Next enter a name for the container to use (avoid special characters and spaces). If the operation is successful, the container's ID will automatically appear in the "Replace site's hostname with" field. You may optionally, specify the container name and container ID of an existing container if you wish. Click the "Test Cloud Files Upload" button and make sure that the test is successful, if not check your settings and try again. Save your settings. You're now ready to export your media library, theme and any other files to the CDN.

You may optionally, specify up to 10 hostnames to use rather than the default hostname, doing so will improve the render performance of your site's pages.

Now go to the General tab and click the "Enable" checkbox and save the settings to enable CDN functionality and empty the cache for the changes to take effect. If preview mode is active you will need to "deploy" your changes for them to take effect.

How do I use an Origin Pull (Mirror) CDN?

Login to your CDN providers control panel or account management area. Following any set up steps they provide, create a new "pull zone" or "bucket" for your site's domain name. If there's a set up wizard or any troubleshooting tips your provider offers, be sure to review them. In the "Content Delivery Network" tab of the plugin, enter the hostname your CDN provider provided in the "replace site's hostname with" field. You should always do a quick check by opening a test file from the CDN hostname, e.g. http://cdn.domain.com/favicon.ico. Troubleshoot with your CDN provider until this test is successful.

Now go to the "General" tab and click the checkbox and save the settings to enable CDN functionality and empty the cache for the changes to take effect.

How can I host my favicon with my (origin push) CDN?

If the file exists in your document root (i.e. http://domain.com/favicon.ico), the plugin can take care of that for you using custom upload options. If the file is in your theme directory you can also have the plugin uploaded from there.

What about the wp-includes files, can those be served from the CDN?

Yes, you can specify which file types you would like served by CDN and they will be uploaded and always downloaded from that location. This includes the smilies, JavaScript files et al. By default we take care of them all.

Are minified files uploaded to my CDN provider?

Yes, any CSS and JS you manage with the plugin are minified before being uploaded to your CDN. You don't have to make any special changes to your theme. We encourage you to make sure that your provider supports HTTP compression as the benefit of having your static assets available from more than one POP alone is not enough.

Who do you recommend as a CDN provider?

That depends on how you use your blog and where most of your readers read your blog (regionally). Here's a short list:

Hang on, don't I need to modify my CSS files so they'll work on the CDN?

No, that is taken care of for you. Your CSS files will originate from your CDN provider and all paths to any images in your CSS will be changed from relative to absolute, making sure that they load just fine. Do nothing differently, yet reap all the benefits.

What is the purpose of the "Media Library Import" tool and how do I use it?

The media library import tool is for old or "messy" WordPress installations that have attachments (images etc in posts or pages) scattered about the web server or "hot linked" to 3rd party sites instead of properly using the media library.

The tool will scan your posts and pages for the cases above and copy them to your media library, update your posts to use the link addresses and produce a .htaccess file containing the list of of permanent redirects, so search engines can find the files in their new location.

You should backup your database before performing this operation.

What is the purpose of the "modify attachment URLs" button?

If the domain name of your site has changed, this tool is useful in updating your posts and pages to use the current addresses. For example, if your site used to be www.domain.com, and you decided to change it to domain.com, the result would either be many "broken" images or many unnecessary redirects (which slow down the visitor's browsing experience). You can use this tool to correct this and similar cases. Correcting the URLs of your images also allows the plugin to do a better job of determining which images are actually hosted with the CDN

As always, it never hurts to back up your database first.

How do I set up Full Site Delivery (FSD) with MaxCDN?

  • Select CDN provider of your choice in a "Full site mirroring" group of "CDN type" dropdown on "General Settings" page, select MaxCDN there.
  • Go to "CDN" page.
  • Click "Authorize" button
  • Type in API key of your account. You can obtain it by following a link in a popup. When opening that link, you will be prompted for your MaxCDN login and password. Select Zone from the list or choose "Add new" to create new zone (type in some friendly name of zone in that case)
  • In a zone setup form you will be notified with the settings required for zone. Tou have only 1 editable field is IP address of your WordPress host. W3 Total Cache tries to guess it, but its not possible to know that in all possible cases.
  • You get success page with information about DNS changes. Now you need to change record of your wordpress host from IP address and replace it to CNAME to specified hostname.
  • It works

How do I set up Full Site Delivery (FSD) with CloudFront?

  • Select CDN provider of your choice in a "Full site mirroring" group of "CDN type" dropdown on "General Settings" page, select CloudFront there.
  • Go to "CDN" page.
  • Click "Authorize" button
  • Type in Access Key and Secret Key of your account.
  • Select Distribution from the list or choose "Add new" to create new zone (type in some friendly name of zone in that case - that will not be visible anywhere except your AWS control panel)
  • In a distribution setup form you will be notified with the settings required. You have only 1 editable field, which is the alternative hostname of your WordPress host. For example if your have myblog.com website with A record pointing to 1.2.3.4 IP, create another one origin.myblog.com DNS record with A record pointing to 1.2.3.4 IP and type in "origin.myblog.com" in this form.
  • You get success page with information about DNS changes. Now you need to change record of your wordpress host from IP address and replace it to CNAME to specified hostname.
  • It works

How do I set up Full Site Delivery (FSD) with StackPath?

How do I get CloudFront Dynamic Caching to work with full site delivery (FSD)?

First enable Browser Cache and disable "Expires" header. This is because CloudFront does not cache properly when "Expires" headers are set. When using CloudFront and full page caching there are no purging of cached pages when posting new posts etc. Cache invalidations in CF is limited per month and also takes up to 15 minutes to complete.

Since there is no purging and you want to people to be able to comment it is recommended to use a hosted commenting software, such as Facebook Comments or Disqus. If you do not use this comments are not shown after they been posted or approved.

Main step to get CloudFront full page caching working is to have your site on a different domain than the one you want your visitors to see. So you should install or configure your site so its on a separate domain, for example wp.example.com. You will then later configure example.com so its used by CloudFront.

How to configure CloudFront on AWS:

  • Go to AWS Console
  • Click "Create Distribution"
  • Select "Web"
  • Click "Continue"
  • Enter wp.example.com into "Origin Domain Name"
  • Enter CustomWWW-example.com into "Origin ID"
  • Set Origin Protocol Policy to HTTP Only (CloudFront will connect to my origin using only HTTP).
  • Select "Allow HTTP Methods" - GET, HEAD, PUT, PATCH, DELETE, OPTIONS
  • Select "Forward Query Strings" - Yes
  • Enter example.com (the domain that your visitors will type into their browser) into Alternate Domain Names(CNAMESs)
  • Set logging to "On"
  • Enter "webserverlog-example.com" into "Bucket for logs"
  • Enter "stats-logs/" into Log Prefix
  • Enter "CDN for example.com" into Comment.
  • Click "Create Distribution"

Configure DNS

  • Add new CNAME record for example.com that points to the Domain Name that belongs to the distribution you created previously.

How to configure W3 Total Cache: There are two methods to configure W3 Total Cache CDN. Origin Pull "CloudFront" or "Generic mirror". If you want to be able to invalidate URLs from within WordPress you need to use the CloudFront option. If you do not configure an CDN the wrong URLs will be used when linking to CSS, JS and other files.

Configure CloudFront:

  • Select Origin Pull (Mirror) Amazon CloudFront on General Page
  • Go to the CDN page.
  • Enter your AWS credentials
  • Enter example.com as an CNAME
  • Save Settings

Configure Generic Mirror:

  • Enter example.com into "Replace site's hostname with:"
  • Save Settings