Magento 2 モバイルの速度を改善する 5 つの方法

これは、Konstantin Gerasimov によるゲスト ブログ投稿です。 Konstantin は、Goivvy.com の Magento 認定開発者です。 彼は、パフォーマンスの最適化とバックエンド開発を専門としています。

Magento 2 (M2) は、複雑で機能豊富な e コマース プラットフォームです。 これを使用して、あらゆる種類のオンライン販売体験を実装できます。

コインの反対側は、柔軟性には 1 つの問題、つまりパフォーマンスの低下が伴うということです。 Magento-2 を搭載したストアは、特にネットワーク容量が大きいため大きなファイルのダウンロードが困難なモバイル デバイスでは速度が低下する可能性があります。

M2 での作業中に、モバイルの速度を改善するのに役立ついくつかのトリックを習得しました。 それらをあなたと共有します。 これらはすべて現場で実証されているため、確実に機能します。

モバイル ユーザー向けに Magento 2 を高速化するための 5 つのヒント

1. スクロールせずに見えるコンテンツを最初に読み込みます。
2. ページ サイズをできるだけ小さくします。
3. HTTP/2 を利用します。
4. JS バンドルを使用しないでください。
5. 最初のバイトまでの時間を最適化します。

1. スクロールせずに見えるコンテンツを最初に読み込む

スクロールせずに見えるコンテンツ (または可視コンテンツ) は、下にスクロールする前に表示される Web ページの一部です。 ユーザーが最初に表示するため、読み込みとレンダリングを高速化することが重要です。

どうやってそれを行うのですか？ いくつかのテクニックがあります：

1.1。 Javascript の遅延解析

これは基本的に、JS コードの読み込みと実行を延期することを意味します。 これは、コンテンツが画面に速く表示されるようにするために行われます。

延期するには、すべての Javascript をページの一番下に移動します。 これを行うのに役立つ特定の Magento 2 拡張機能があります。

1.2. 重要な CSS を最初に読み込む

クリティカル CSS は、スクロールせずに見えるコンテンツをレンダリングするために使用されるスタイルシートのセットです。 通常、これはサイトの CSS のほんの一部です。 それを分離して最初にロードする方が良いでしょう。 これにより、表示されるコンテンツのレンダリングが高速化されます。

重要な CSS を自動的に抽出することになっているオンライン ツールがあります。 私はそれらのほとんどを試しましたが、私の経験に基づいて正確ではないようです.

ホームページ、カテゴリ、製品、カート、チェックアウト ページなど、さまざまなページに対して重要な CSS セットを手動で作成することをお勧めします。 その後、ページの head セクションに直接インライン化できます。

2.ページサイズをできるだけ小さくする

モバイル ネットワークは、デスクトップ ブロードバンド接続に比べてダウンロード速度が遅くなります。

それは私たちにとって何を意味するのでしょうか? これは、ページの重量がより重要なパフォーマンス要因であることを意味します。 ページ サイズが大きいほど、Magento 2 モバイルの速度が遅くなります。

ページを軽量化するにはどうすればよいですか? そのために、次の 3 つの方法を紹介します。

2.1. Gzip 圧縮を使用する

Gzipは、ページ サイズを最大 70% 縮小できる特別なテクノロジです。 また、CSS、Javascript、フォント スクリプトなどの外部スクリプトを圧縮することもできます。

ホスティング サポート チームに連絡して、Web サイトで Gzip を有効にするよう依頼してください。 これは小さな構成変更にすぎないため、それほど時間はかかりません。

オンライン ツールの Google PageSpeed Insights を使用して、ストアで Gzip がオンになっているかどうかを確認できます。

2.2. CSS/JS 縮小を使用する

Magento 2 ( Magento 1 とは異なります) には、JS/CSS 縮小機能が付属しています。 これを利用して、ページの重量を減らす必要があります。

バックエンド メニューStores > Configuration > Advanced > Developer (M2.2+ では、このメニューは開発者モードでのみ表示されます) に移動し、縮小を有効にします。

覚えておくべきことの 1 つは、ミニフィケーションはプロダクション モードでのみ機能することです。

あなたは尋ねるかもしれません – それらのモードは何ですか?

Magento 2 には、default、developer 、およびproductionの 3 つの実行モードがあります。 制作は最速です。

モードを切り替えるには、Magento ルート フォルダー内の SSH ターミナルで次のコマンドを実行する必要があります (たとえば、運用モードを設定しましょう)。

 php bin/magento deploy:mode:set production

現在のモードを確認するには:

 php bin/magento deploy:mode:show

2.3. 画像の最適化

e コマース Web サイトを運営している場合は、多くの製品画像が必ずあります。 ページの重量を可能な限り低くするために、最適化と圧縮を維持することが重要です。

画像の圧縮に役立つさまざまなオンライン ツールがあります。 ほとんどの CDN (コンテンツ配信ネットワーク) は、画像の最適化をサポートしています。 $$$ を使っても構わないのであれば、そのうちの 1 つにサインアップすることをお勧めします。

予算が限られている場合は、Google の pagespeed サーバー モジュールをお試しください。 その場で画像を圧縮します。 さらに、他の速度最適化のトリックも行います。 システム管理者またはホスティング サポート チームに、ページ速度拡張機能の設定を支援するよう依頼することをお勧めします。

3. HTTP/2 のパワーを利用する

HTTP ver.2 は、次世代のハイパーテキスト プロトコルです。 Web ブラウジングを安全かつ高速にすることを目的としています。 パフォーマンス上の利点の詳細については、こちらをご覧ください。

Magento 2 は、すぐに HTTP/2 で動作します。 要件は次の 2 つだけです。

1. すべてのページは SSL 経由で提供する必要があります。
2. サーバーは HTTP/2 をサポートする必要があります。

セットアップの支援については、ホスティング サポート チームに問い合わせることをお勧めします。

もう1つ–サーバープッシュ. これは HTTP/2 の特別な機能で、リソースが必要になる前にブラウザでダウンロードできるようにします。 Web ブラウジングを大幅に高速化します。 M2 にサーバー プッシュを導入する拡張機能がいくつかあります。Google で検索して、最適なものを見つけてください。

4. JS バンドルを使用しない

Magento 2 は JavaScript ファイルをバンドルできます。

つまり、JS リソースをグループ化して、ブラウザがページを表示するために行う HTTP リクエストの数を減らすことができます。 その構成ページは、バックエンド メニューStores > Configuration > Advanced > Developerにあります。

もちろん、HTTP/2 を使用しても意味がありません。 その場合、http リクエストの数はパフォーマンスに影響しません。 ただし、まだ http/1 を使用している場合でも、JS バンドルを有効にしないでください。その理由を説明します。

Magento 2 バンドル実装は、すべての JavaScript を 1 つのファイルにまとめます。 特定の部分を利用しなくても、まだそこにあります。 これにより、5Mb ～ 13Mb のファイルが残り、低速のモバイル ネットワークではパフォーマンスが大幅に低下します。

詳細を説明するバグレポートを次に示します。 これはバグですが、M2.2.2 が出回っており、まだ修正されていません。 したがって、JS バンドルを無効にしておくことをお勧めします。

5. 最初のバイトまでの時間 (TTFB) を最適化する

TTFB またはサーバー応答時間は、ブラウザーがサイトのサーバーから応答を受け取るまでに待機する必要がある時間です。 最初のバイトまでの適切な時間は、約 500 ミリ秒です。

Magento 2 には完全なページ キャッシュ機能が組み込まれているため、ページが複数回アクセスされている限り、サーバーの応答時間は問題ありません。 ただし、チェックアウト、カート、カスタマー エリアのページなど、ページ全体をキャッシュできないページがあります。 それらが遅い場合は、TTFB の最適化を検討する必要があります。

サーバーの応答時間を最適化する 3 つの方法を紹介します。

5.1. サードパーティ モジュールの監査

Magento 2 のパフォーマンスが低下する最大の理由は、使用されるカスタム拡張機能の数が多すぎることです。 その理由を説明します。

M2 コア ファイルは、プログラミングの専門家によってコーディングされています。 そこには改善の余地がほとんどないため、Luma テーマを使用した M2 の新規インストールは非常に高速です。 一方、一部のサードパーティ モジュールは、平均的なプログラマーによって書かれており、パフォーマンス ベンチマークを評価していません。 ストアの速度が大幅に低下する可能性があります。

サードパーティ モジュールの監査を実行するには、まず、インストールされているすべてのカスタム拡張機能のリストを取得します。 これを行うには、次の SSH コマンドを実行します。

 php bin/magento モジュール:ステータス

Magento_で始まるものはスキップします。これらはコア プラグインです。

他のユーザーと一緒に次のことを行います: それらを 1 つずつ削除し、サイトの速度をベンチマークします。 拡張機能を削除するには、単にapp/codeフォルダーから削除してから実行します。

 php bin/magento セットアップ:アップグレード遅いプラグインを見つけたら、そのベンダーに連絡して問題を知らせてください。 パッチを求めるか、別の拡張機能を見つけてください。
 5.2 ホスティングプランのアップグレード
場合によっては、複雑な Magento 2 ストアを実行するには、ホスティング サーバーの能力だけでは十分ではありません。 その場合、より多くの CPU と RAM を取得する必要があります。
 サーバーが正常かどうかを確認するにはどうすればよいですか? 次の簡単なテストを実行します。同じサーバーに同じバージョンの M2 の新しいコピーをインストールします。 その速度を実際のサイトと比較してください。 新しい M2 が大幅に高速な場合 – ホスティング プランは問題なく、問題はライブ サイト自体にあります。 新しいコピーがライブ サイトと同じくらい遅い場合は、ホスティング サーバーをアップグレードする時期です。
 5.3 Magento 2 プロファイラーの実行
Magento 2 の内部を深く掘り下げて、TTFB が貧弱な根本原因を突き止めたい場合は、プロファイラーを使用できます。 プロファイラーは、どのコード ブロックの実行にどのくらいの時間がかかるかを示す特別なプログラムです。
 pub/index.phpファイルの先頭に次の行を追加することで、Magento 2 ネイティブ プロファイラーを無効にすることができます。
 $_SERVER['MAGE_PROFILER'] = '1';
 その後、すべてのページの下部にトレースが表示されます。 
 時間の値が最大のコード ブロックを探して調べます。
 他にも使用できるプロファイルがあります。 xhprof は無料のものの中で最高だと思います。
 結論
ご覧のとおり、モバイル デバイスで Magento 2 のパフォーマンスを向上させる効果的な方法がいくつかあります。
 追加の方法を知っている場合は、下のコメント セクションで自由に共有してください。