Magentoのパフォーマンスの最適化について説明

公開: 2022-03-11

Magentoのパフォーマンスは最も重要です。 読み込み速度は、Webサイトのコンバージョン率に直接かつ測定可能な影響を与えるため、Magentoのインストールを最適化することは、Magentoショップ、場合によってはビジネス全般の成功にとって非常に重要です。

この記事では、Magento開発者がMagento 2のインストールを最適化するいくつかの方法を紹介し、次の方法を説明します。

  • サードパーティのモジュールを確認し、ボトルネックを見つけます
  • フルページキャッシュを有効にする
  • フルページキャッシュ用のファイルではなく、ワニス
  • フルページキャッシュが機能することを確認してください。簡単に壊れる可能性があります。
  • 本番モードを有効にする
  • CSS/JSの縮小
  • フラットテーブルを有効にする
  • 余裕のある最速のホスティングを手に入れよう
  • 画像を最適化する
  • 「スケジュールどおりに更新」するインデクサー
  • GZIP圧縮
  • カタログページでElasticsearchを使用して検索します。
  • ページの読み込み後にサーバーへの不要なAjaxコールバックを確認します(セッションロックを引き起こす可能性があります)
  • ページキャッシュとセッションストレージのRedis

サードパーティのモジュールを確認し、ボトルネックを見つける

コードが正しくない、非推奨のメソッドを使用している、または最新の安定バージョンのMagentoとの互換性の問題がある、サードパーティのMagentoモジュールが多数あります。 重いリクエストを識別する最良の方法は、プロファイラーを使用することです。 これは、ページ上にあるMySQLクエリの数と、同一のクエリの数を特定するのに役立ちます。 それを知っていると、それらのクエリを1つに圧縮して、Magentoを高速化できます。

ジュニア開発者がMagentoで間違っている主なことの1つは、ループ内にモデルをロードすることです。 できるだけそれを避けるようにしてください。 コレクション全体に必要なものをすべてロードしてから、ループします。 時間とスペースの複雑さを常に念頭に置き、最適化された方法でアルゴリズムを構築してください。

Magentoのパフォーマンスチャート

レイアウトがどのようにロードされ、どのテンプレートブロックが最もパフォーマンスが遅いかを確認してから、そのコードを調べます。 モデルCRUDメトリックを調べて、ループへの呼び出しの読み込みなどの洞察に満ちたデータを見つけることができます。

Magentoフルページキャッシュ

ユーザーがストアにアクセスすると、サーバーにリクエストが送信されます。 このリクエストは、PHPが特定の操作とデータベースクエリを実行して処理し、対応するHTMLをユーザーに表示するために返します。 フルページキャッシュはそのHTML応答を保存するため、次の同一のリクエストは、すべてのバックエンド処理とデータベースクエリをスキップして直接それを返します。 これにより、Webサイトの応答がはるかに速くなります。

Magentoの最適化作業の一環としてフルページキャッシュを使用すると、Webサイトの速度を大幅に向上させることができます。 これにより、ページのキャッシュバージョンが作成され、各リクエストのすべてのクエリを実行する代わりに、それらがユーザーに配信されます。 もちろん、すべてのページがキャッシュされるわけではありません。 たとえば、カートページはキャッシュされません。そうでない場合、すべてのユーザーにページの最初のキャッシュバージョンが表示されます。 これらは、動的なページまたはユーザー固有およびセッション固有のページのセクションです。

Magentoのフルページキャッシュを有効にするには、次のCLIコマンドを実行できます。

php bin/magento cache:enable full_page

キャッシュタイプを有効にするには、CLIコマンドを実行します。

php bin/magento cache:enable

管理者としてログインすることにより、MagentoAdminからそれを行うこともできます。

  1. [システム]>[ツール] >[キャッシュ管理]に移動します
  2. アクティブにするキャッシュタイプを選択します
  3. [アクション]ドロップダウンで[有効にする]を選択し、[送信]をクリックします

Magentoのパフォーマンス最適化のスクリーンショット

フルページキャッシュにVarnishを使用する

フルページキャッシュを有効にする場合は、ファイルではなく、Varnishを使用して処理します。 Magentoは、本番環境でVarnish(またはRedis)を使用することを強くお勧めします。 統合されたフルページキャッシング(ファイルシステムまたはデータベースへの)はVarnishよりもはるかに低速であり、VarnishはHTTPトラフィックを高速化するように設計されています。

Varnishのインストールと構成の方法に関する完全なガイドは、Magento2の公式ドキュメントにあります。

Varnishを使用するようにMagentoを構成するには、管理者としてMagentoAdminにログインします。

  1. [ストア] >[構成]>[詳細設定]>[システム] >[フルページキャッシュ]に移動します
  2. キャッシングアプリケーションリストから、 VarnishCachingをクリックします。
  3. パブリックコンテンツのTTLフィールドに値を入力します
  4. Varnish Configurationを展開し、Varnish構成に関する特定の情報を入力します

Magentoパフォーマンス最適化フルページキャッシュのスクリーンショット

フルページキャッシュが機能することを確認する:簡単に壊れます

フルページキャッシュはMagento2で簡単に壊すことができます。たとえば、キャッシュからブロックを除外する場合は、ブロックを宣言するときにXMLレイアウトで属性cacheable="false"を使用しないでください。 これにより、そのブロックだけでなく、そのブロックを含むページ全体のキャッシュが無効になります。 それは私が人々が犯すのを見た間違いです。

レイアウトでcacheable="false"属性を探し、それらが設定されているブロックと、それらのブロックが呼び出されているページを確認します。 したがって、些細なページにキャッシュの問題があるかどうかを識別できます。

ページが手動でキャッシュされているかどうかをテストすることもできます。 ローカル環境またはステージ環境でストアを開発者モードにします。

  1. Magentoキャッシュをクリアする
  2. ブラウザにページをロードする
  3. ブラウザの[ネットワークのデバッグ]タブでページヘッダーを調べます。
  4. X-Magento-Cache-Debugを探します:MISS
  5. ページを更新します。HITに変更されます。

HITに変更されない場合は、ページがキャッシュされておらず、キャッシュが機能していないことを意味します。

本番モードを有効にすることを忘れないでください

Magentoには、デフォルト開発者本番モードの3つの実行モードがあります。

実動モードは、実動システムでのデプロイメントを目的としています。 このモードでは、例外が非表示になり、静的ファイルがキャッシュからのみ提供され、MagentoAdminでキャッシュタイプを有効または無効にすることはできません。 また、コードファイルの自動コンパイルを防ぎます。

ストアの作業および開発中は、開発者モードがアクティブになります。 サイトをライブサーバーにデプロイするときは、本番モードに切り替えることを忘れないでください。

現在のモードを確認するためのCLIコマンドは次のとおりです。

php bin/magento deploy:mode:show

本番モードに切り替えるためのCLIコマンドは次のとおりです。

php bin/magento deploy:mode:set production

開発者モードに切り替えるためのCLIコマンドは次のとおりです。

php bin/magento deploy:mode:set developer

さまざまなMagentoモードの詳細については、こちらをご覧ください。

CSS/JSミニファイ

CSSファイルとJSファイルを縮小することは、Magento2の速度最適化の重要な要素です。 それらを縮小することにより、ファイル内のすべてのスペース、タブ、および改行を削除します。 結果のファイルは文字数が少なくなり、サイズも小さくなるため、ダウンロードが速くなります。

Magentoにはこの機能が組み込まれており、AdminでCSS/JSの縮小を有効にできます。 JavaScriptの縮小を有効にするには、次の手順に従います。

  1. Magentoを本番モードにします
  2. [ストア] >[構成]>[詳細] >[開発者]に移動します
  3. [Javascriptファイルの縮小]オプションを[はい]に設定します
  4. 構成を保存
  5. [システム]>[キャッシュ管理]ページでキャッシュをフラッシュします

Magentoプロダクションモードのスクリーンショット

CSSミニファイを有効にするには、次の手順が必要です。

  1. Magentoを本番モードにします
  2. [ストア]>[構成]>[詳細設定]>[開発者]>[ CSS設定]に移動します
  3. [CSSファイルの縮小]オプションを[はい]に設定します
  4. 構成を保存
  5. [システム]>[キャッシュ管理]ページでキャッシュをフラッシュします

MagentoCSS縮小スクリーンショット

注: JSファイルをマージしないでください-それらを縮小するだけです

フラットテーブルを有効にする

Magentoは、EAV(entity attribute value)モデルを使用します。このモデルは、値のタイプに応じて、エンティティの属性を複数のテーブルに格納します。 複数のテーブルを使用すると、データを取得するために複数のテーブルでの結合と要求が必要になり、クエリの速度が低下する可能性があります。

Magentoには、カタログと製品にフラットテーブルを使用するオプションがあります。 フラットテーブルは、エンティティのすべての属性を1つのテーブルにマージすることによって作成されます。 データをリクエストするときは、1つのテーブルをクエリする必要があります。これにより、テーブルがはるかに高速になります。

Magentoは、すべてのインデックスでフラットテーブルを生成および更新します。 管理者としてMagentoAdminにログインすると、フラットテーブルを有効にできます。

  1. [ストア]>[構成]>[カタログ]>[カタログ]>[ストアフロント]に移動します
  2. フラットカタログカテゴリを使用するには、[はい]を選択します
  3. フラットカタログ製品を使用するには、[はい]を選択します
  4. 構成を保存

Magentoフラットテーブルのスクリーンショット

FastMagentoHostingを選択してください

Magentoの最小要件を確認し、サーバーがそれらを満たしているかどうかを確認してください。 公式のMagento2.2.xテクノロジースタック要件はこちらで確認できます。

ホスティング構成は、Magento2のパフォーマンスにとって非常に重要です。 Magento専用のホスティングサービスもありますが、これらは何よりもマーケティングに関するものである可能性があります。

結論:プロジェクトにとってやり過ぎでない限り、手頃な価格の最速のホスティングソリューションを手に入れましょう。

Magento画像の最適化

画像のサイズは明らかにあなたのウェブサイトの速度に影響を与えます。 たとえば、20個の商品を含むカタログページがあり、各商品の画像のサイズが1Mbの場合、ページの読み込み時に合計20Mbがダウンロードされます。これは、一部のシナリオ(モバイルデバイス、特定の地域などで帯域幅が制限されています)。

画像が適切に最適化されているかどうか、品質とサイズの比率が適切かどうかを確認してください。 また、画像のサイズがCSSによって変更されていないことを確認してください。ただし、ソースファイルのサイズは必要な特定のサイズに変更してください。

もう1つの手法は、遅延読み込みを使用することです。これは、ページが完全に読み込まれた後、またはユーザーがカタログをスクロールしている間に画像を読み込むことを意味します。

AWSまたはCDNを使用して、コンテンツをはるかに高速に配信することもできます。 ビットマップ最適化の観点から、AWS、CDN、および従来のホスティングの違いを簡単に見てみましょう。

従来のホスティング

従来の方法は、画像などのコンテンツをWebサイトと同じサーバーに保存することです。 これにより、ディスクスペースと帯域幅のかなりの部分が占有され、サーバーにかなりの負荷がかかる可能性があります。 明らかに、従来のホスティングでのスケーリングが問題になる可能性があります。

CDN(コンテンツ配信ネットワーク)

コンテンツ配信ネットワークは通常、Webサイトのコンテンツの一部を提供することにより、サーバーの負荷を軽減するために使用されます。 さらに、コンテンツを迅速に配信することで高いパフォーマンスを実現し、複数のネットワークを使用して高可用性を実現します。

AWS(Amazon CloudFront)

Amazon CloudFrontは、ネットワークレベルとアプリケーションレベルの両方の保護を提供する、安全性の高いコンテンツ配信ネットワーク(CDN)です。 AWSの使用を開始し、コンテンツをより速く配信する方法については、このチュートリアルを確認してください。

さらに、AWSを使用して、クエリパラメータを介して渡されたディメンションに基づいてその場で画像のサイズを変更できます。 詳細については、AmazonCloudFrontとLambda@Edgeを使用した画像のサイズ変更に関するこのチュートリアルを参照してください。

インデクサーを「スケジュールどおりに更新」に設定します

Magentoインデクサーは、「保存時に更新」または「スケジュールに更新」の2つのモードに設定できます。

商品、属性、カテゴリを保存するたびに「保存時に更新」に設定すると、特定のインデックスの実行が開始されます。 インデクサーはリソースを消費する可能性があり、サーバーの速度が低下する可能性があります。

インデクサーを設定するのに最適なモードは、「スケジュールどおりに更新」することです。 このようにして、設定した特定の時間にcronジョブによって実行されることが確実になります。 あなたのウェブサイトのトラフィックが少ない時間を選択してください。

次のコマンドを実行すると、現在のインデクサーモードを表示できます。

php bin/magento indexer:show-mode

または、Magento Adminで、次の場所に移動します。

システム>インデックス管理

次のコマンドを実行して、インデクサーモードを「スケジュールどおりに更新」に変更できます。

php bin/magento indexer:set-mode schedule

次のコマンドを実行して、インデクサーモードを「保存時に更新」に変更できます。

php bin/magento indexer:set-mode realtime

そしてここにそれはMagentoAdminにあります:

[システム]>[インデックス管理]:すべてのインデクサーを選択し、[アクション]ドロップダウンから[スケジュールに従って更新]を選択します

画像の代替テキスト

また、管理者に移動して、スケジュールされたタスクを構成します。

[保存]> [設定] >[構成]>[詳細]>[システム]>[ cron(スケジュールされたタスク)]

「グループのcron構成オプション:インデックス」を展開します

Magentocron設定ダイアログ

GZIP圧縮

Gzipは、ネットワーク転送を高速化するためにファイルを圧縮する方法です。 圧縮により、Webサーバーはより小さなファイルサイズを提供できるようになり、Webサイトユーザーの読み込みが速くなります。 ただし、これにはコストがかかります。

ファイルを圧縮している間、CPUをロードし、ファイルを圧縮すればするほど、処理に時間がかかります。 これによりサーバーのCPU負荷が増加する可能性がありますが、帯域幅の使用量も大幅に減少する可能性があります。 gzipを使用すると、1〜9の範囲のさまざまな圧縮レベルから選択できます。

レベル1では、圧縮時間が最も速くなりますが、圧縮率は低くなります。 反対側では、レベル9で圧縮率が最も高くなりますが、速度は遅くなります。 gzipのデフォルト構成では、レベル6が使用され、速度よりも圧縮が優先されます。 ただし、Nginxはレベル1を使用し、ファイルサイズよりも速度を優先します。

gzip圧縮をオンにして、Apacheのmod_deflateモジュールをアクティブ化するには、以下に示すように、.htaccessファイルを更新して適切な行のコメントを解除することにより、これを追加できます。 mod_deflateモジュールは、静的リソースをブラウザに転送する前に、より小さなファイルに圧縮します。

 <IfModule mod_deflate.c> ############################################ ## enable apache served files compression ## http://developer.yahoo.com/performance/rules.html#gzip # Insert filter on all content SetOutputFilter DEFLATE # Insert filter on selected content types only AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/json image/svg+xml # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # MSIE masquerades as Netscape, but it is fine BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary </IfModule>

カタログページと検索でElasticsearchを使用する

Webサイトの速度を上げるもう1つの方法は、カタログページと検索結果にElasticsearchを使用することです。 Elasticsearchサーバーをセットアップし、Magentoストアをサーバーに接続します。 Elasticsearchを使用すると、検索がはるかに高速になります。

この公式ガイドでは、Elasticsearchを使用してMagentoを構成する方法について説明します。

Elasticsearchを使用するようにMagentoを構成するには、管理者としてMagentoAdminにログインします。

  1. [ストア]> [設定] >[構成]>[カタログ]>[カタログ]>[カタログ検索]をクリックします。
  2. 次の図に示すように、[検索エンジン]リストから[ Elasticsearch ]または[ Elasticsearch5.0+ ]をクリックします。 ( Elasticsearch 5.0以降のオプションはMagento2.1では使用できません。)

MagentoでのElasticsearchのセットアップ

不要なAjax呼び出しを確認します

ページの読み込み後にサーバーにコールバックすると、セッションロックが発生する可能性があります。 ページが実行しているすべてのAjax呼び出しを確認する方法は、ChromeのDevToolsを使用することです。 ページを右クリックして[検査]を選択すると、ページを開くことができます。

[ネットワーク]タブに移動すると、XHRでリクエストをフィルタリングできます。 これで、ページのすべてのAjaxリクエストを確認し、それらをチェックして、その特定のページでどれが必要かを確認できます。

MagentoでのAjax呼び出し

ページキャッシュとセッションストレージのRedis

Redisは、デフォルトでMagento2で使用されるZend_Cache_Backend_Fileを置き換えるオプションのバックエンドキャッシュソリューションです。

なぜRedisを使用するのですか?

Redisを使用すると、複数の利点があります。

  • memcachedはPHPセッションストレージにも使用できるため、Redisに置き換えることができます。
  • Redisは、ディスク上の保存とマスター/スレーブレプリケーションをサポートしています。これは、memcachedではサポートされていない非常に要望の多い機能です。 レプリケーションは単一障害点を回避し、高可用性を提供します。
  • Redisはファイル内のタグにインデックスを付けることで機能するため、タグ操作ではすべてのキャッシュファイルを完全にスキャンする必要はありません。
  • バックエンドは、foreachループなしのタグベースのキャッシュクリーンアップをサポートします。

主な欠点もあります:

  • Redisはインメモリストアであるため、すべてのデータがメモリに収まる必要があります。つまり、RAMの速度と容量によってのみ制限されます。

セッションストレージにRedisを使用するようにMagentoを構成する

以下は、 <your Magento install dir>app/etc/env.phpに追加する構成例です。

 'session' => array ( 'save' => 'redis', 'redis' => array ( 'host' => '127.0.0.1', 'port' => '6379', 'password' => '', 'timeout' => '2.5', 'persistent_identifier' => '', 'database' => '2', 'compression_threshold' => '2048', 'compression_library' => 'gzip', 'log_level' => '1', 'max_concurrency' => '6', 'break_after_frontend' => '5', 'break_after_adminhtml' => '30', 'first_lifetime' => '600', 'bot_first_lifetime' => '60', 'bot_lifetime' => '7200', 'disable_locking' => '0', 'min_lifetime' => '60', 'max_lifetime' => '2592000' ) ),

ここで、パラメーターに関するすべての詳細と、RedisのインストールがMagentoと一緒に正常に機能することを基本的に検証する方法を確認できます。

ページとデフォルトのキャッシュにRedisを使用するようにMagentoを構成する

ページとデフォルトのキャッシュ用にRedisを設定する方法は2つあります。 <Magento install dir>app/etc/env.phpファイルを手動で編集するか、コマンドラインを使用できます。これは、検証も提供するため、推奨される方法です。

デフォルトのキャッシュの場合、次のコマンドを実行します。

php bin/magento setup:config:set --cache-backend=redis --cache-backend-redis-<parameter_name>=<parameter_value>...

Redisのデフォルトのキャッシュに固有のパラメーターを指定します。

ページキャッシュの場合、次のコマンドを実行します。

Php bin/magento setup:config:set --page-cache=redis --page-cache-redis-server=redis.example.com --page-cache-redis-db=1

このコマンドは、Redisページのキャッシュを有効にし、ホストをredis.example.comに設定し、データベース番号を1に割り当てます。MagentoDevDocsですべての詳細を確認できます。

Magentoのパフォーマンスの最適化の要約

Magento 2のパフォーマンスを最適化するためのかなりの数のアプローチについて説明したので、簡単に要約してみましょう。

ボトルネックを特定して解決すると、データの処理に大きな違いが生じます。 フルページキャッシュとVarnishを使用すると、Webサイトの速度が向上し、HTTPトラフィックが加速します。 言い訳はできませんが、ライブサーバーの本番モードでは常にMagentoを使用する必要があります。 ミニファイを使用してCSSファイルとJSファイルのサイズを小さくします。ファイルが小さいほど、ダウンロードが速くなり、使用する帯域幅が少なくなります。

フラットテーブルを有効にして、データベースリクエストを減らし、データベースの応答時間を改善します。 画像を最適化し、可能であればCDNを使用します。 スケジュールどおりに更新するようにインデクサーを設定し、Magentocronを有効にします。 gzip圧縮を有効にすると、ダウンロードするファイルのサイズも小さくなります。 Elasticsearchを使用すると、カタログページの速度が向上し、検索結果ページの読み込みがはるかに速くなります。 デフォルトのmemcacheよりも大幅に高速なページキャッシュとセッションストレージにRedisを使用します。

これらの推奨事項のすべて、またはこれまで使用していないいくつかの推奨事項を実装できます。 Magentoのパフォーマンスを向上させるには、カップルでも十分なはずです。これにより、より多くのコンバージョンに変換できるはずです。