[PaaS のみ]{class="badge informative" title="Adobe Commerce on Cloud プロジェクト（Adobeが管理する PaaS インフラストラクチャ）およびオンプレミスプロジェクトにのみ適用されます。"}

リソースファイルの最適化

Last update: Wed Apr 01 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
ベストプラクティス

作成対象：

経験者
開発者

Commerceのレスポンシブなサイトを実現するには、CSSとJavaScript（JS）のリソースファイルを最適化し、レンダーブロックリソースを排除します。

CSS ファイルとJS ファイルを最適化- Adobe Commerceを使用してファイルを縮小およびバンドルするように設定することで、CSSおよびJavaScript（JS）ファイルを読み込むのに必要な時間を短縮します。
レンダリングブロックリソースを排除 – 重要なJSおよびCSS機能をインラインで配信し、重要ではないJS/CSS スタイルをすべて延期することを検討します。ガイダンスについては、レンダーブロッキングリソースの排除を参照してください。

影響を受ける製品とバージョン

サポートされているすべてのバージョン、2.3以降 /:

Adobe Commerce on cloud infrastructure
Adobe Commerce オンプレミス

CSS ファイルを結合または縮小

CSSおよびJavaScript（JS）ファイルの読み込み時間は、個別のファイルを1つのファイルに結合、縮小、バンドルすることで短縮できます。

IMPORTANT

Adobe Commerce オンクラウドインフラストラクチャは、常に実稼動モードで実行され、それ以外の場合は設定できません。そのため、結合、縮小、バンドルを有効にするには、コマンドラインメソッドを使用する必要があります。

デプロイメントでHTTP/2を使用している場合は、ファイルを結合またはバンドルしないでください。 HTTP/2は、静的ファイルを非同期でダウンロードします。ブラウザーは、ファイルの内容を処理する前に、結合ファイル全体をダウンロードする必要があります。

管理者の使用

CSSの結合または縮小を有効にするには、Admin > Stores > Settings > Configuration > Advanced > Developer > CSS Settingsに移動します。

コマンドラインの使用

クラウドインフラストラクチャ上の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の使用中

Admin サイドバーで、Stores > Settings > Configuration > Advanced > Developer > JavaScript Settingsに移動します。

コマンドラインの使用

Adobe Commerce クラウドインフラストラクチャでJSの縮小を有効にするには：

次のコマンドをローカルで実行します。

code language-bash
`bin/magento config:set --lock-config dev/js/minify_files 1`

app/etc/config.php ファイルに変更をコミットして再デプロイします。

バンドル JS ファイル

Commerce Adminでバンドルを有効にできます：Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings。

NOTE

結合とバンドルを同時に有効にすることはできません。

コマンドラインからAdobe Commerceのビルトインバンドル（基本バンドル）を有効にすることもできます。

php -f bin/magento config:set dev/js/enable_js_bundling 1

JS ファイルの結合（推奨されません） merge-js-files

WARNING

Merge JavaScript Filesを有効にすることはお勧めしません。この設定は、ページのHEAD セクションで同期的に読み込まれたJavaScriptに対してのみ設計されており、バンドルとRequireJS ロジックが正しく動作しない可能性があります。後方互換性のみに保持され、HTTP/2が有効になっている場合にパフォーマンス上のメリットはありません。

Merge JavaScript Filesを有効にして問題が発生した場合は、パッチを適用する前に無効にしてみてください。結合を無効にできない場合は、ACSD-67908を参照してください。

追加情報

クライアントサイド最適化設定
設定のベストプラクティスのバンドルヒント - サードパーティのバンドルツール、HTTP/2、非推奨のJSおよびCSS結合に関するガイダンス
ユーザーガイド：リソースファイルの最適化
フロントエンド開発者ガイド：CSSの結合、縮小、サイトパフォーマンス
高度なJavaScriptのバンドル

recommendation-more-help

754cbbf3-3a3c-4af3-b6ce-9d34390f3a60