Make JavaScript plugin (AmazonJS) work with W3 Total Cache

Feb 28

When you start using wordpress you will find a lot of useful plugins that go beyond your expectation. One of these is W3 Total Cache which is really an amazing plugin.

W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.


In other words “It speeds up your site”. The plugin is doing that by a lot of optimization, minification, caching and more. The main problem here is that almost each tutorial aims to help you in configuring this plugin will advice you to use the Auto Minify mode. But if you tried to use a plugin that is written in JavaScript the plugin will not work properly. This is mainly because W3 Total Cache will minify the plugin’s code and you will end up with not working plugin. I found my self in this situation when I decided to use AmazonJS to help me in displaying book’s info from Amazon.com. What I expect to see was some thing like this:

Working AmazonJS

but unfortunately I ended with this:

Not Working Amazonjs

So I solved this annoying problem by

  1. Turning Minify mode to manual and then start configuring the minification by hand.
  2. The problem here is that you will need to know all the css and js files in your site, theme and plugins and then start deciding what to minify and what to leave without minification. There is a way to get a list of all these file easily. Go to gtmetrix.com and enter your site URL. Gtmetrix.com aims to test yous site speed and show you a list of errors to help you in speeding up your site. After running the test a report will be generated with a list of “Breakdown”. Expand Minify CSS and Minify JavaScript sections and you will find your desired list.

    gtmetrix.com break downs


  3. Now Add the files to the minify list.
  4. Just go to Minify setting in W3 Total Cache plugin, then go to JS section and start adding the JavaScripts files you got from gtmetrix.com report. After that go to CSS section and add the css files as done with JavaScript. Don’t add files related to the plugin you intend to make it worke. In our case (AmazonJS) we will exclude these files

    • wp-content/plugins/amazonjs/amazonjs-min.js
    • wp-content/plugins/amazonjs/amazonjs.css
    • wp-includes/js/jquery/jquery.js

Now the plugin should be working fine. One last thing, because of manual minification and excluding some css and js files your score in sites like gtmetrix.com will never be perfect but I think this is acceptable since you know what is going on. 🙂

2 comments

  1. Marija Krstic /

    There is also one free tool that uses google page speed and yslow just like gtmetrix and that is:
    http://tutor.rs

Leave a Reply