CODEWITHSUNDEEP
wordpressamazon-s3minifyamazon-cloudfrontw3-total-cache
Peter G.
Peter G.

Reputation: 8054

W3 Total Cache not rewriting URLs for files cached on AWS-based CDN

I am using W3 Total Cache plugin, the plugin is set up to work with AWS-based CDN (S3+CloudFront):

  1. Minify CSS and JS files
  2. Send them to AWS's S3
  3. S3 sends them to AWS's CloudFront

The process above seems to work fine:

The automatic URL rewrite by the plugin (when loading a webpage) is what most likely fails, because the HTML header still has the original hostname in the URL:

<script type="text/javascript" src="https://www.example.com/wp-content/cache/minify/1/39633.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.example.com/wp-content/cache/minify/1/18704.css" media="all" />

Why does the W3 Total Cache plugin not rewrite the URLs with CloudFront as the host?

Chrome's network console: The minified files get pulled from the original host and not the CDN

The minified files get pulled from the original host and not the CDN

POSSIBLE WORKAROUND:

This seems like a workaround, but it works. By specifying RewriteRules in .htaccess file I force the site to load .css and .js files via the CDN.

RewriteCond %{REQUEST_URI} \.(css|js)$
RewriteRule ^ https://<distribution_id>.cloudfront.net%{REQUEST_URI} [R,L]

But there is still one files that resists to be redirected (18704.css). I have my browser cache turned off (even deleted browser cache manually) and the file still resists to be loaded from cache. I think this has nothing to do with browser caching, Chrome's network console says the file is not loaded from cache.

18704.css

Upvotes: 0

Views: 1496

Answers (1)

Yeasir Muhmmad Pervej
Yeasir Muhmmad Pervej

Reputation: 161

What you need to is to set the minify option to manual and then upload the minify file with w3total cache. enter image description here

Upvotes: 1

Related Questions