リソースファイルの最適化
Commerce サイトの応答性を高めるには、CSS およびJavaScript（JS）リソースファイルを最適化し、レンダリングをブロックするリソースを排除します。
- CSS ファイルと JS ファイルの最適化 - Adobe Commerceで個別のファイルを 1 つのファイルに結合、縮小、バンドルするように設定することで、CSS およびJavaScript（JS）ファイルの読み込みに要する時間を短縮します。
- レンダリングを妨げるリソースを排除 – 重要な JS および CSS 機能をインラインで配信し、重要でないすべての JS/CSS スタイルを延期することを検討します。 ガイダンスについては、 レンダリングをブロックするリソースを排除するを参照してください。
影響を受ける製品とバージョン
- クラウドインフラストラクチャー上のAdobe Commerce
- Adobe Commerce オンプレミス
CSS ファイルの結合または縮小
CSS およびJavaScript（JS）ファイルの読み込みに要する時間は、個別のファイルを結合、縮小および 1 つのファイルにバンドルすることで、短縮できます。
デプロイメントで HTTP/2 を使用している場合は、ファイルを結合またはバンドルしないでください。 HTTP/2 では、静的ファイルが非同期でダウンロードされます。 ブラウザーは、ファイルのコンテンツを処理する前に、結合ファイル全体をダウンロードする必要があります。
Admin の使用
CSS の結合または縮小を有効にするには、管理/ストア/設定/設定/詳細/開発者/CSS 設定 に移動します。
コマンドラインの使用
クラウドインフラストラクチャー上のAdobe Commerceで CSS 結合を有効にする手順は次のとおりです。
-
次のコマンドをローカルで実行します。
code language-bash bin/magento config:set --lock-config dev/css/merge_css_files 1 -
変更を
app/etc/config.phpファイルにコミットし、再デプロイします。
クラウドインフラストラクチャー上のAdobe Commerceで CSS の縮小を有効にする手順は次のとおりです。
-
次のコマンドをローカルで実行します。
code language-bash bin/magento config:set --lock-config dev/css/minify_files 1 -
変更を
app/etc/config.phpファイルにコミットし、再デプロイします。
JS ファイルの縮小
Admin の使用
管理者 サイドバーで、ストア/設定/設定/詳細/開発者/12}JavaScript設定 に移動します。
コマンドラインの使用
クラウドインフラストラクチャー上のAdobe Commerceで JS の縮小を有効にする手順は次のとおりです。
-
次のコマンドをローカルで実行します。
code language-bash bin/magento config:set --lock-config dev/js/minify_files 1 -
変更を
app/etc/config.phpファイルにコミットし、再デプロイします。
JS ファイルの結合とバンドル
Commerce管理で結合またはバンドルをオンにできます（結合とバンドルを同時に有効にすることはできません）。ストア/設定/設定/詳細/開発者/10}JavaScript設定 。
コマンドラインからAdobe Commerceの組み込みバンドル（基本バンドル）を有効にすることもできます。
php -f bin/magento config:set dev/js/enable_js_bundling 1