Enable and configure the Asset Optimizer

Current version: 10.3

The Asset Optimizer module optimizes CSS styles and JS scripts. When it is enabled in a production environment, the Asset Optimizer improves overall site performance by reducing the amount of data that needs to be transferred. Sitecore administrators can enable this feature either globally for the entire Sitecore instance or locally for selected sites.

Note

It is best practice to disable the Asset Optimizer in development environments and to enable it in production environments.

Front-end developers can use pre-optimized-min files, which are pre-compiled CSS and JS files, for creating styles for SXA solutions outside the Sitecore database. In this case, the pre-optimized-min files replace the optimized-min files and the normal assets.

If you have both optimized-min and/or custom and/or pre-optimized-min present in your theme styles and scripts folders, the following table describes which file will be served when the Asset Optimizer is enabled or disabled.

Note

The Asset Optimizer is not compatible with ES6. If you use ES6, use SXA CLI for optimization.

Scenario

Asset Optimizer enabled or disabled

File used

pre-optimized-min

Using pre-optimized-min only.

enabled

pre-optimized min

disabled

pre-optimized-min

pre-optimized-min and other

Using pre-optimized-min and custom styles.

enabled

pre-optimized-min

disabled

pre-optimized-min

optimized-min and other

Using optimized-min and custom styles.

enabled

optimized-min

disabled

custom

Enable or disable the Asset Optimizer globally

To enable or disable the optimizer globally:

  • In the Content Editor, navigate to /sitecore/system/Settings/Foundation/Experience Accelerator/Theming/Optimiser and for both Scripts and Styles select Concatenate and Minify to minify all files and concatenate them into one file.

    To disable the Asset Optimizer globally, select Disable to turn off scripts and styles minification and bundling

    Note

    Add aodisable=1 to the query string to turn off asset optimization for a request.

    For some SXA versions, to be able to use aodisable=1, you might have to enable the XA.Foundation.Theming.AssetsOptimizationSwitch.Enabled setting in the Sitecore.XA.Foundation.Theming.config file.

Change the optimization settings for a specific site

To change the optimization settings for a specific site:

  1. In the Content Editor, navigate to sitecore/content/<Tenant>/<Site>/Presentation/Page Designs.

  2. In the Asset Optimization section, in the Styles Optimizing Enabled and Scripts Optimizing Enabled fields, to override styles and scripts optimization settings, select:

    • Default – to inherit global settings.

    • Yes – to always enable optimization for this site.

    • No – to always disable optimization for this site.

Change the optimization settings for a specific theme

To change the optimization settings for a specific theme:

  1. In the Content Editor, navigate to /sitecore/Media Library/Themes and click the theme you want to enable or disable the Asset Optimizer for.

  2. In the Theme section, in the Mode field, select:

    • Inherit from site - to inherit the settings from the site.

    • Inherit from system - to inherit the global settings.

    • Off - to disable optimization for this theme.

    • On - to enable optimization for this theme.

Exclude a CSS file from minification

You might want to exclude specific CSS files from minification by the Asset Optimizer, for example, because the AjaxMin library does not support all syntax inside CSS files.

To exclude a file from minification:

  1. In the Media Library folder, navigate to the the CSS file that you want to exclude.

  2. Right-click the CSS file, click Scripts, and click Convert to unminified file.

    The CSS file is still included in the optimized-min.css file, but its content is not minified.

Do you have some feedback for us?

If you have suggestions for improving this article,