Asset Optimizer

概要

CSS スタイルと JS スクリプトを最適化して、エンド ユーザー エクスペリエンスを向上させます。

実稼働環境では、SXA Asset Optimizer が CSS スタイルと JavaScript を最適化し、転送する必要があるデータ量を削減することにより、エンド ユーザー エクスペリエンスを向上させます。

SXAでは、レンダリングやその他のフロントエンド機能のスタイルやスクリプトを設定するファイルが、フロントエンド機能をコンポーネント レベルに分割する傾向があるテーマに保存されます。これにより、フロントエンドの開発が容易になりますが、本番環境ではファイル数が多すぎて対応できない場合があります。小さなファイルが多数あると、パフォーマンスが低下し、古いブラウザーで問題が発生する可能性があります。したがって、本番環境では Asset Optimizer を有効にすることをお勧めします。Sitecore 管理者は、このモジュールを Sitecore インスタンス全体に対してグローバルに有効にするか、選択したサイトに対してローカルに有効にすることができます。

Asset Optimizer は、次のルールに従ってアセットをグループ化します。

  • 同じフォルダーからのアセット。

  • 同じ拡張子を持つアセット。

各グループのアセットは 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>

Asset Optimizer が有効になっている場合、前の 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 設定を有効にする必要がある場合があります。