Magepackを使ってMagentoベースのサイトのJavaScript読み込みを最適化する
この記事は公開から 1年以上が経過しています。現在の最新情報との整合性については弊社では一切の責任を負いかねます。
Magento（Adobe Commerceでも基本同じです）ベースでサイトを構築すると、多くのケースで以下のような悩みに直面します。
- JavaScriptの読み込み数が多い
- ページによってJavaScriptの要不要が異なるのに、一括して読み込んでしまう
Magento1の時代からJavaScript読み込みについてはいろいろと言われてきてはいますが、ヘッドレスで別構築しない場合にどのように最適化していけばよいかを解説したいと思います。
標準で用意されているJavaScript読み込みに対する設定項目
最初に、Magentoに標準で用意されているJavaScriptに関する設定パラメータを確認しておきましょう。
今回取り上げる設定パラメータについては、2.4.3-p1を基準にしています。今後のアップデートで変わる可能性がありますので、適宜読み替えてください。
設定項目の場所
Magento2系共通として、JavaScript読み込みに関する設定値は管理画面の
ストア＞設定＞高度な設定＞開発者向け
に用意されています。
Magento2.2系よりあとのバージョンでは、動作モードがproductionになっている場合はこの設定項目は表示されません。
表示されていない場合は、担当の技術者や保守を担当しているベンダーに連絡して、設定値を確認してもらいましょう。
設定項目の解説
では、設定項目を確認していきましょう。
標準では以下の設定項目が用意されています。
- Javascriptファイルをマージする
- Javascriptバンドルを有効にする
- Javascriptファイルを圧縮する
- JSコードをページの一番下に移動
- 翻訳方法
- JSエラーをセッションストレージに記録する
- JSエラーをセッションストレージキーに記録する
7つの設定項目のうち、JavaScript読み込みなどに関係するのは1〜4の設定項目です。5〜7については関係がないので本稿では割愛します。
Javascriptファイルをマージする
この設定を有効にすると、Magento側でJavaScriptファイルをいくつかの大きなファイルにまとめます。
ファイルの読み込み数が多い場合、HTTPリクエストとレスポンスの回数が増えてしまい、全ファイルの読み込みが完了するまでに時間がかかってしまいます。
このオプションを有効にすることで、ファイルの読み込み数を削減してくれます。本番サイトでは可能な限り有効化しましょう。
Javascriptバンドルを有効にする
このオプションを有効にすると、JavaScriptが使用するテンプレート（UI Componentなどが使う拡張子「.html」のもの）とJavaScriptファイルをいくつかの大きなファイルにまとめてくれます。
1つ前のオプションであるマージと併用することが多いのですが、以下のような注意点があります。
- テンプレートファイル内にマルチバイト文字を書いてはいけない（正常動作しなくなります）
- 配信するファイルサイズが肥大化するため、回線帯域が不十分または通信が安定しない場合にボトルネックになる
Javascriptファイルを圧縮する
このオプションを有効にすると、JavaScriptファイルにある改行や空白文字を除去し、ファイルサイズを削減します。
いわゆる「minify」と呼ばれる処理です。
CDNを利用している場合や、データ量に応じた従量課金が行われるサーバー事業者の場合は、少しでも配信データ量を減らしたほうが良いでしょう。
無論、クライアント側もデータ量が少ないほうが早くコンテンツの読み込みが終わります。可能な限り有効化しましょう。
JSコードをページの一番下に移動
この設定値はMagento2.3系の途中で追加されました。
JavaScriptの読み込みや処理をHTML文書上の後半に持ってくることによって、ページの描画の妨げになることを防ごうというものです。
有効にすると、ページ内に散らばっていたJavaScriptコードは全てbodyタグの終了付近に移動します。
標準の設定項目では対処できない点
さて、ここまでは標準の設定項目でできることを取り上げてきました。
ここから標準の設定項目では対処できない点を解説していきましょう。
JavaScriptのマージは全ページ共通しかできない
Magento上には当たり前ですが、様々なページがあります。
代表的なものだけでも、
- CMSページ
- 商品一覧ページ
- 商品ページ
- カートページ
- チェックアウトページ
- マイページ
というように6種類あります。
商品ページは細分化すると商品タイプ別に異なる部分もあるので、ひとまとめに本来すべきではないかもしれません。
これらのページで利用されるJavaScriptファイルを標準機能でマージすると、ほぼすべてのファイルをマージしてしまいます。
その結果、ページで読み込まれるJavaScriptファイルのサイズが肥大化し、Lighthouseなどの検査ツールで
余計なコードをクライアントに読ませないようにしましょう
といった指摘を受けてしまうケースがあります。
ページ単位での最適化、という機能を持っていないので、商品ページや一覧ページといったアクセス数の多いページにおいて無駄なトラフィックを発生させてしまいます。
Magepackを使ってJavaScript読み込みを最適化しよう
標準機能ではなにかと機能不足なMagentoのJavaScript読み込み最適化機能ですが、諦めるにはまだ早すぎます。
「Magepack」を使うことでJavaScript読み込みを最適化可能です。
Magepackとは
Magepackはcreativestyleが開発しているMagento用のJavaScriptビルドツールです。
以下の2つから構成されるツールとなっています。
この2つをインストールすることで、より最適化されたJavaScript読み込みをMagento上で実現可能です。
npmモジュールのインストール
では、最初にnpmモジュールをインストールします。このモジュールは以下の2つの環境にインストールします。
- Magentoがページ上で使用しているJavaScriptを収集し、定義ファイルを作成する環境（主に開発者のPC）
- 定義ファイルに基づいて、JavaScriptファイルを生成する環境（主にビルドを行うサーバー）
インストール手順については、Githubリポジトリの手順に沿って行います。
JavaScriptファイルの収集
npmモジュールのインストールができたら、JavaScriptファイルの収集を行います。
先程の手順でも示されていますが、以下のようなコマンドを実行します。
magepack generate --cms-url="{{CMS_PAGE_URL}}" --category-url="{{CATEGORY_PAGE_URL}}" --product-url="{{PRODUCT_PAGE_URL}}"
指定するURLは以下の3つです。
- CMSページ（TOPページで良いでしょう）
- カテゴリページ
- 商品ページ
また、収集対象の環境では、
- JavaScriptのminify
- JavaScriptのマージ
はオフにしておきましょう。正しく収集ができません。
ビルド処理の実行
収集処理が終わると、magepack.config.js というファイルが作成されます。
一旦ここでMagentoの動作モードをproductionに変更し、ビルドを行います。
magepack bundle
を実行すると、 magepack.config.js に基づいたJavaScriptファイルが作成されます。
Magento用モジュールのインストール
続いてMagento用モジュールをインストールして設定を行います。
Githubリポジトリの手順通り、composerを使用してインストールすると良いでしょう。
当然ですが、composerでインストールしたあとは、magentoコマンドでモジュールを有効化しておきましょう。
Magento側の設定でMagepackを有効化
最後にMagento側の設定でMagepackを有効化します。
minifyやマージの設定と同じところに
Enable JavaScript Bundling with Magepack
という設定項目が増えています（Productionモードでは表示されません）。
これを有効にします。
Productionモードの場合は、
bin/magento config:set dev/js/enable_magepack_js_bundling 1
を実行します。
あとはMagentoのキャッシュをクリアし、Lighthouseで計測してみましょう。
Magepack導入前よりはCore Web Vitalsのスコアが改善していると思います。
まとめ
Magentoに標準で用意されているJavaScript関係の設定項目とMagepackについて解説しました。
標準ではどうしてもCore Web Vitalsの指標が改善しにくいのですが、Magepackを導入することでJavaScriptまわりのスコアをかなり改善可能です。
もちろんCore Web Vitalsはそれ以外（CSSやマークアップ、画像そのもの）を改善していくことで更にスコアを伸ばすことができます。
定期的に測定しつつ、より高いスコアの出せるサイト作りを目指しましょう。
