Set up Speedster Advanced in the Magento backend

Go to System > Configuration > Developer to get started.

1. Javascript Settings

Merge JavaScript Files

Select “Yes” to enable merging of Javascript files under 'JavaScript Settings'.

Exclude from Minify

This field allows you to exclude specific file(s) from the minification process, while still including the merged file in the original file loading order. It's not possible to exclude entire file directories.

Enter the relative URL of any Javascript files that you wish to exclude, separated by a comma. For example: To exclude the following file http://www.example.com/skin/frontend/base/default/js/opcheckout.js, enter skin/frontend/base/default/js/opcheckout.js

The default setting is to exclude js/mage/adminhtml/sales/packaging.js

because this known to cause issues. We recommend that you keep this as a default exclusion (you can still add additional exclusions).

Troubleshooting

Certain files can cause issues when being minified and you want to exclude them from minification. A non-exclusive list of reasons include:

• Trying to minify an already minified Javascript file
• Javascript which isn't coded nicely (eg. not using semi-colons and instead relying on implied linebreaks for functionality – read more on jslint.com)
• Using another Javascript library in addition to Magento's prototype library (eg. Jquery)

2. CSS Settings

Merge CSS Files

Select “Yes” to enable merging of CSS files under 'CSS Settings'.

Exclude from Minify

This field allows you to exclude specific file(s) from the minification process, while still including the merged file in the original file loading order. Enter the relative URL of any CSS files that you wish to exclude, separated by a comma. It's not possible to exclude entire file directories.

Developer Mode

In Magento’s developer mode, Speedster Advanced will include the file names of the merged files in the combined output for easier troubleshooting.

Theme Optimiser

With version 1.4 Magento introduced the concept of static vs skin files (internally). The distinction is made as follows:

Speedster Advanced uses this internal distinction to separate the files into two files. The idea behind this is being able to load all library files and other files which you will require throughout the whole store only once. It is best described  with  an example. Imagine a customer visiting consecutive pages on the store:

To benefit from this Speedster Advanced feature you will need to optimise your theme. Everything that you want to have loaded on every page should reside in the /js folder (think libraries) and loaded via the default handle. All remaining files should live in the skin directories and included via a skin_js directive.

Currently the same separation does not make as much sense for CSS. Our current advice is to load all CSS as skin_css on the first load.