---
title: "アセットオプティマイザー"
slug: "the-asset-optimizer"
abstract: "CSSスタイルやJSスクリプトを最適化してエンドユーザー体験を向上させましょう。"
---
# アセットオプティマイザー

本番環境では、SXAアセットオプティマイザーはCSSスタイルやJavaScriptを最適化し、転送すべきデータ量を減らすことでエンドユーザー体験を向上させます。

SXAでは、レンダリングやその他のフロントエンド機能が、フロントエンド機能がコンポーネントレベルで分割されている傾向のあるテーマに保存されたファイルにスタイリングまたはスクリプト化されます。これによりフロントエンド開発は容易になりますが、本番環境では提供すべきファイル数が許容できない場合があります。多数の小さなファイルが存在すると性能が低下し、古いブラウザでも問題を引き起こすことがあります。したがって、本番環境で[Asset Optimizerを有効にする](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/enable-and-configure-the-asset-optimizer.html "Enable and configure the Asset Optimizer") ことを推奨します。Sitecore管理者は、このモジュールを全体的にSitecoreインスタンス全体で有効にするか、特定のサイトに対してローカルで有効化できます。

アセットオプティマイザーは以下のルールに従って資産をグループ化します:

-   同じフォルダから来るアセット。
-   同じ拡張を持つ資産です。

各グループのアセットは1つのアセットに連結され、サーバー上でキャッシュされます。マークアップ内の個々のアセットへの参照は、各グループごとに1つのリファレンスに置き換えられ、以下のようになります:

-   参照パスは最初のアセットと同じフォルダパスから始まります。
-   参照パスは最初のアセットと同じ拡張で終わります。
-   リンクタグは初期資産と同じメディア属性の値を持ちます。

以下のコードサンプルは、ページ上で各アセットが別々に参照されている1つのテーマのみのサンプルマークアップです。

<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>

アセットオプティマイザーが有効の場合、前述のHTMLコードサンプルのすべてのリンクは別のテーマファイルにまとめられます。

<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/optimized-min.js?t=20160908T094830Z"></script>

> !注リクエストのアセット最適化をオフにするにはクエリ文字列にaodisable=1を追加します。SXAバージョンによっては、aodisable=1を使うにはSitecore.XA.Foundation.Theming.configファイルのXA.Foundation.Theming.AssetsOptimizationSwitch.Enabled設定を有効にする必要があるかもしれません。