W3 Total Cache compatibility with Akamai CDN

Hello Adam,

W3 Total Cache rewrites the URL using the Replace site’s hostname with a section in Performance>CDN.
As you can see in the description, Enter the hostname provided by your CDN provider, this value will replace your site’s hostname in the HTML.
SO instead of yourwebsite.come/wp-uploads/2022/05/someimage.jpeg, you will get the CDN URL for example akamai.yourwebsite.come/wp-uploads/2022/05/someimage.jpeg
And to answer your question, yes you also need to set up a CDN for staging website as this is a different URL.

I hope this helps!

Thanks!

Hello Adam,

1. In the “Replace site’s hostname with” field, the CDN’s edge address should be added. This is used to rewrite the URL of the static resources as I’ve mentioned in the previous post.

2. This should be added in the Performance>CND>Configuration: objects section.

3. The CDN configuration depends on the CDN provider. You can always use Generic mirror and only add the CDN”s Edge address, or use Akamai from a CDN dropdown menu and configure the CDN with Username and Password.
You can check this article for more details about Image Service.

4. W3TC does not handle image resizing upon uploading a new image, so you can use some plugin for this.

Thanks!

Hello Adam,

You are most welcome!

We would really appreciate it if you could take a minute and post a review here. This will help us to continue offering a top-notch product to users.
Thanks!

Hello Adam,

First of all, thank you for the awesome review.
To answer your questions:

1. We do not have documentation on every CDN setting since all settings are self-explanatory and of course, it depends on which CDN provider you are using and if you are using Pull or Push CDN Type. However thank you for the idea, as this might be a good article. I will add explanations below:

Host attachments: when enabled, attachments (e.g. images from the media library) are served through the CDN.

Host wp-includes/files: when it is active the files of the wp-includes folder are served through the CDN.

Host theme files: when enabled the theme files are served through the CDN.

Host minified CSS and JS files: when enabled, minified CSS and JavaScript files are served through the CDN.

Host custom files: refers to the files specified in the Custom file list that you can see in the Advanced tab of this same page.

Add canonical header: This allows you to identify the original URL with the canonical tag. Generally, search engines are able to distinguish the URL without the need to specify it, so by default, the option is disabled.

Advanced

Only purge CDN manually: by default W3TC manages autonomously the purge of the cache. If you enable this option you will purge the cache only manually, normally you don’t need to enable the function, as this was specifically added for Cloudfront users because of the huge invalidation costs on the AWS side

Disable CDN on SSL pages: By activating this option you may run into the problem of mixed content. It happens when some contents are downloaded using HTTP protocol instead of HTTPS and the browser returns a not-secure site warning. In most cases, it is better to leave this option disabled.

Disable CDN for the following roles: This allows you to choose which user roles to disable CDN for.

2. Akamai CDN, as you can see is the origin pull, which means that the files are uploaded automatically to the CDN. Once uploaded, all images and files are served from the CDN. The CDN will not serve the image if it’s not uploaded to the CDN. In this case, the image will be served from the origin.

3. It’s recommended to use different filenames for each image. So if the situation you described occurs, you should try purging the cache manually for the CDN in the W3TC settings. The problem with this is not the CDN, but the Browser Caching. For images, it’s recommended to use 1 year caching for browsers (Expires header and cache-control header) so if the image has the same filename and a different image is uploaded instead, the browser will think it’s the same image and will not fetch for the new one. It’s recommended to use the option “Prevent caching of objects after settings change” in Performance>Browser Cache. This option adds the random query string to files (You can enable it only for images) for example: ?xNNNNN. This will ensure that the browser always fetches the new file from the source, in your case CDN, and all you have to do us to update the media query string in Performance>Browser Cache (Just above the general section), once new image is uploaded with the same filename.

I hope this answers your questions.

Thanks!