Magento2は非常に多くのHTTPリクエストをWebサーバーに対して行うアプリケーションです。
何も意識せずにMagento2をインストールして運用していると、1ページあたりのHTTPリクエスト数は100リクエストを軽く超えてしまいます。

YSlowやPageSpeedなどで分析すると、「HTTPリクエストを削減せよ」というアドバイスが必ずと行っていいほど標準のMagento2に対しては上がってきます。

今回はこの問題をどうやって対処するかを解説したいと思います。

Magento2が多くのHTTPリクエストを発生させるワケ

Magento2はJavaScriptを多用しています。
様々なJavaScriptライブラリを使用してアプリケーションを構築する手法は最近良く見られるものですが、Magento2もその例に漏れず、RequireJSを使用してモジュールを動的に読み込む作りになっています。

何も設定していないMagento2のTOPページに対してYslowで計測を行うと、下図のような結果が得られます。

チューニング前

Yslow上では153回のHTTPリクエストが実行され、そのうち128回はJavaScriptに関するものであることがわかります。
たとえブラウザ側のキャッシュが効いていたとしても、データ転送量はさほど変わりません。これはあまり嬉しくありません。

HTTPリクエスト数が多いと、それだけでWebサーバーに負荷がかかるほか、データを無駄にやり取りするので表示が遅くなります。
できればファイルに変更がないのであればその旨だけ教えてほしいものですし、もっというならそもそもリクエストしてほしくないものです。

なお、この結果はTOPページのものです。
管理画面やチェックアウト画面はさらに多くのHTTPリクエストが行われます。これらの画面ではUIComponentというMagento2独自の機構が用いられており、JavaScript側でKnockoutJSと連動した描画処理を行います。
UIComponentではJavaScriptファイルだけでなく、HTMLテンプレートを追加で読み込んで描画を行います。
結果的に1つの処理でより多くのファイルを必要とするため、HTTPリクエスト数が増えることになります。

HTTPリクエスト数を減らすには

では、HTTPリクエスト数を減らすにはどうすればよいでしょうか？
もちろんMagento2にはきちんと対策ができる機能が用意されています。

管理画面の「店舗＞設定＞開発者向け」にアクセスすると、次のような画面が表示されます。
この設定を調整することで、HTTPリクエスト数を大きく減らすことができます。

設定画面

CSSやJavaScriptファイルを1つのファイルにマージする

まず最初に取り組みたいのは、CSSやJavaScriptファイルを1つあるいは少数のファイルに統合（マージ）することです。
この設定を有効にすると、マージできるCSSやJavaScriptファイルをMagentoが自動的に統合してくれます。

また、この設定が有効になっていると、Magentoはマージ済みのファイルのURLをHTMLに出力するため、マージ前のファイルが読み込まれることがなくなります。

CSSやJavaScriptファイルを圧縮する

次に取り組むのは、マージしたファイルを圧縮することです。
CSSやJavaScriptは可読性を維持するために改行やインデントが数多く用いられています。あるいは記述的に簡略化できる記述であっても、可読性維持のためにあえて冗長な記述がされていることがあります。

圧縮処理（minifyと言います）を行うことで、これらが取り除かれ、ファイルサイズを縮小できることがあります。
少しでもファイルサイズが減ると、データ転送に要する時間が短縮できる他、データ量自体が減るのでAWSなどではコスト削減になります。

JavaScriptファイルをバンドル化する

 最後に有効にするオプションは、JavaScriptファイルをバンドル化することです。
バンドル化というのは、RequireJSやKnockoutJSが動的に読み込もうとするJavaScriptファイルやHTMLテンプレートをひとつのファイルに集約してしまうことを指します。

こうすると余計な読み込みはほぼなくなり、HTTPリクエスト数が劇的に削減できます。
反面、1つのJavaScriptファイルのサイズが巨大化しますが、クライアント側でキャッシュしやすくなります。

最終的な結果

さて、3つの対策を行った結果、次の図のような結果となりました。

チューニング後

どうでしょう？
ファイルサイズは増加しましたが、HTTPリクエスト数は大幅に減りました。
また、静的ファイルが全てブラウザ側でキャッシュされているときはデータ転送量が大幅に削減できます。

これらのチューニングは管理画面から簡単に行えるので、本番稼働環境ではぜひ有効にした形で運用されることをオススメします。