The Asset Optimizer

Current version: 10.1

In a production environment, the SXA Asset Optimizer improves the end user experience by optimizing CSS styles and JavaScript, and reducing the amount of data that needs to be transferred.

In SXA, renderings and other front-end functionality are styled or scripted in files stored in themes that tend to have the front-end capabilities broken down on a component level. This makes front-end development easier, but the number of files that need to be served may not be acceptable in a production environment. Having a large number of small files causes performance to deteriorate and can also cause issues in older browsers. Therefore, we recommend that you enable the Asset Optimizer in production environments. Sitecore administrators can enable this module either globally for an entire Sitecore instance or locally for selected sites.

The Asset Optimizer groups assets together according to the following rules:

  • Assets that come from the same folder.

  • Assets that have the same extension.

Assets from each group are concatenated into one asset and cached on the server. References to individual assets in the markup are replaced with one reference for each group, so that:

  • The reference path starts with the same folder path as the initial assets.

  • The reference path ends with the same extension as the initial assets.

  • The link tag has the same value of media attribute as the initial assets.

The following code sample is a piece of sample markup for just one theme used on the page where each asset is referenced separately:

RequestResponse
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-location-service.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-ajax.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-base-view.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-box.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-data.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-daterange.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-dropdown.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-managed-range.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-range-slider.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-slider.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-load-more.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-location-filter.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-page-selector.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-page-size.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-query.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-radius-filter.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-results.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-results-count.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-results-filter.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-sort.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-url.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-variant-filter.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-service.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-router.js"></script>

If the Asset Optimizer is enabled, all the links in the previous HTML code sample are gathered in a separate theme file:

RequestResponse
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/optimized-min.js?t=20160908T094830Z"></script>
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.

Do you have some feedback for us?

If you have suggestions for improving this article,