1. サイト表示のスピードはTTFBに注目する

Magento2はよく「重い」「遅い」と言われます。
コードが膨大なので仕方ないだろうと思うのですが、まだ開店前で、サイトを構築している段階でも、編集したページを確認するのすら時間がかかり、作業している自分もじれったくなってしまうような環境は、やはり問題があります。

サイトの表示速度を測るのに、一番注目するといいのは、TTFB(Time To First Byte)とされています。
これは、直訳で「はじめの1バイトが届くまでの時間」の意で、いわゆるサーバーのレスポンスタイム、サーバーからのはじめの1バイトをブラウザが受け取るまでの時間=サイトが開くまでに閲覧者が待っている時間のことになります。
厳密には、サイトの表示速度のことではなく、サーバー⇔ブラウザの反応時間のことになるのですが、この時間をできる限り短縮することが、サイト高速化の第一の目標になります。もちろん、これがすべてではないのですが、一つの指標として参考にしてみてください。

このTTFBを測るサイトは、 keyCDNやPingdomのテストツールが使いやすいです。

keyCDN Web Performance Test
https://tools.keycdn.com/performance

Pingdom Website Speed Test (TTFBは「Wait」として黄色のバーで表示されます。)
https://tools.pingdom.com/

TTFB サーバーレスポンス速度テスト

上の図はkeyCDNのテストページの結果で、URLを入れて測定すると、世界14都市でのTTFBの数値が表示されます。
サンプルとして測定したのは、Magento2・Lumaのデモサイト(東京サーバー)で、TTFBは東京とシンガポールからの数値が緑色になっていて、フランクフルトなどヨーロッパの都市では1秒前後も長くかかっています。サーバーロケーションに近いほど、TTFBが短くなるということが分かります。

Googleによると、200ms(0.2秒)以内がTTFBの理想値なので、この200msを一つの目安としていいのではないかと思います。600ms以内なら標準、それ以上長いと、やはりなんらかの方法で改善を考えたほうがいいかもしれません。

このパフォーマンスを上げるには、どうしてもサーバー設定や環境構築のところから確認していく必要があるのですが、かなり複雑な内容になってしまうので、先ずは、どのような環境でも共通するような、Magento2の管理画面内での設定項目の確認からしてみます。

2. Cache(キャッシュ)を有効化する

Magento2には、ページ表示を速くするために、Cache(キャッシュ)=ファイルを一時的に保存する機能が備わっています。
ページを開くのが昔のダイヤル回線のように不自然なほど遅い場合には、先ず、このキャッシュがきちんと有効になっているかどうかを確認してください。

Magento2の管理画面 SYSTEM > Cache Management をクリックすると、Magento2のキャッシュシステムの操作ページが開きます。

Magento2 Cacheキャッシュ有効状態

上記のように、緑色の[ENABLED]という表示が並んでいる状態では、すべてのCacheキャッシュが有効化されています。

しかし、以下のように、赤色の[DISABLED]という表示が並んでいる状態では、Cacheキャッシュの一部(またはすべて)が無効化されているので、有効化に切り換える必要があります。

Magento2 Cacheキャッシュ無効状態

Cacheキャッシュを有効化するには、有効化するキャッシュにチェック✔️を入れて、左上プルダウンから[Enable]を選択して、[Submit](送信)をクリックします。

Magento2 Cacheキャッシュを有効に切り換える
Magento2 Cacheキャッシュを有効に切り換える

すると、以下のように緑色の[ENABLED]に切り換わり、フルページキャッシュが有効化されます。

Magento2 Cacheキャッシュを有効に切り換える

ただし、Magento2がProductionモードになっている時には、上記のプルダウンで[Enable]の選択肢がリストになく、管理画面からキャッシュを有効化することができません。(Magento2のモードについては、Magento2のモード変換と静的ファイルの展開についてをご参照ください。)
この場合は、Magento2のルートにSSHアクセスして、以下のコマンドラインで、キャッシュを有効化させます。

php bin/magento cache:enable

Cacheキャッシュの有効化は基本的なことなので、Magento2を使い慣れている人には当たり前のことなのですが、稀に、なんらかの事情で(特に、エクステンションをインストールしたりモードを変更したりした際のセットアップ後に)、Cacheキャッシュが勝手に無効化されてしまう場合があります。原因がよく分からないのですが、急激にサイトのスピードがダウンした時などは、フルページキャッシュが効いていない可能性が高いので、Cacheキャッシュの状態を確認してみてください。

3. CSSとJSファイルの最適化

次に、CSSとJSファイルを最適化します。CSSファイルとJavascriptのファイルを最小化することで、読み込みファイルの総量を軽量化することができます。

先ず、管理画面 STORES > Configuration > Advanced > Developer > JavaScript Settings / CSS Settings へ進みます。

CSSとJavascriptの最適化

それぞれの項目を、以下のように設定します。

JavaScript Settings
Merge JavaScript Files: Yes にします。JSファイルをマージ(結合)することで、軽量化します。
Enable JavaScript Bundling: No にします。バンドルをYesにすると効果的なケースもありますが、一般的にバンドルされたJSファイルが大きくなりすぎて逆効果になることが多く、推奨されていません。(ご参考: https://inchoo.net/magento-2/javascript-bundling-magento-2/
Minify JavaScript Files: Yes にします。JSファイルを最小化します。

CSS Settings
Merge CSS Files: Yes にします。CSSファイルをマージ(結合)することで、軽量化します。
Minify CSS Files: Yes にします。CSSファイルを最小化します。

設定をしたら、右上のオレンジ色の [Save Config] ボタンをクリックして保存します。
その後、SYSTEM > Cache Management に進み、[Flush Magento Cache]ボタンをクリックして、Magento2のキャッシュをクリアしてください。

4. HTMLファイルの最適化

次に、HTMLファイルを最適化します。HTMLファイルを最小化することで、読み込みファイルの総量を軽量化することができます。

上記2と同じページ内の、管理画面 STORES > Configuration > Advanced > Developer >Template Settings へ進みます。

HTMLファイルの最適化

以下のように設定します。

Template Settings
Minify HTML: Yes にします。HTMLファイルを最小化します。

設定をしたら、右上のオレンジ色の [Save Config] ボタンをクリックして保存します。
その後、SYSTEM > Cache Management に進み、[Flush Magento Cache]ボタンをクリックして、Magento2のキャッシュをクリアしてください。

CSS、JS、HTMLの最適化でのご注意

  • Magento2がproductionモードの場合、Advanced > Developer のパネルは管理画面からアクセスできません。いったんdeveloperモードに変更し、上記を設定したら、もう一度productionモードへ戻してください。その際に、6. Magento2をprudctionモードにする で紹介するコマンドの順で実行してください。
  • CSS、JS、HTMLの各ファイルの最適化では、CDNや他のキャッシュ系サービスとの共用でコードが衝突し、サイトのページが崩れたり、カート画面がブランクになってしまうケースが報告されています。設定後は、必ずサイトの表示を確認し、テスト注文も入れるようにしてください。もしトラブルが発生している場合は、先ずHTMLの最小化を無効にして、再確認をしてみてください。
  • productionモードに変更後、最適化が効いていないと思われる場合は、Apacheサーバーでは .htaccessファイルでの MAGE_MODEの値をproductionに、Nginxサーバーでは、nginx設定ファイル中のMAGE_MODEの値をproductionに変更してください。(ご参考: https://magento.stackexchange.com/questions/251861/magento-2-not-minifying-js-css-or-html-in-production-mode

5. Flat Catalogを有効化する

Magento2の商品データベースは、デフォルト状態では、Entity-Attribute-Value (EAV) というシステムを利用しています。
この状態だと、一つの商品に複数のattributes(属性)が結びついている場合、その商品ページを表示するために、Magento2は複数のデータベースのテーブルを参照しなければなりません。
しかし、Flat Catalogを有効にすることで、この複数のテーブルを一つにまとめることができます。そのぶん、商品ページの表示スピードが速くなります。

このFlat Catalogを有効化するためには、STORES > Configuration > CATALOG > Catalog > Storefront に進みます。
そして、画面をややスクロールして、Use Flat Catalog Category と、Use Flat Catalog Product の項目を見つけます。

Flat Catalogの有効化

右のUse system valueのボックスに入っているチェックマークを外して、それぞれの項目を、以下のように設定します。

Use Flat Catalog Category: Yes にします。
Use Flat Catalog Product: Yes にします。

設定をしたら、右上のオレンジ色の [Save Config] ボタンをクリックして保存します。
その後、SYSTEM > Cache Management に進み、[Flush Magento Cache]ボタンをクリックして、Magento2のキャッシュをクリアしてください。

すると、Magento2管理画面の上部に、以下のようなメッセージが表示されます。

indexが無効です

これは、Magento2のIndexに無効になっているものがあります、という意味で、Flat Catalogをインデックスする必要があるということです。

Magento2にCronが設定されていると、指定の時間帯でIndexerが動くので、このメッセージはしばらくして自動的に消えます。
Cronが設定されていない場合は、お使いの環境でCronを設定してください。Cronについては、Magento2 Cron(クロン)の設定方法の記事をご参照ください。

6. Magento2をproductionモードにする

Magento2には、「モード」があります。
インストール直後は、通常 defaultモードになっていて、これは、サイト構築の段階で最も推奨されるモードです。
しかし、サイト構築が完成し、いざ開店、本番環境への移行となりましたら、Magento2のモードを productionモードに変更してください。このproductiomモードの状態だと、/pub/フォルダ以下に静的ファイルが配置され、Magento2の表示速度が一番速くなります。
Magento2のモードについては、Magento2のモード変換と静的ファイルの展開についての記事をご参照ください。

Magento2をproductionモードに変更するには、管理画面からの操作ではなく、SSHアクセスのコマンド作業が必要になります。
productiomモードへの変更は、以下のコマンドを実行します。

php bin/magento deploy:mode:set production --skip-compilation
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento setup:static-content:deploy ja_JP #日本語ストアがある場合

7. 使用していないエクステンションを無効化する

Magento2には、デフォルト状態で、サードパティーのエクステンションが同梱されています。名前をあげると、Dotmailer、Amazon、Klarna、Vertex などです。
これからのサービスは、本来、Magento2のコアコードとは関係なく、利用する人だけが任意でインストールすべきエクステンション(モジュール)になります。使用していない場合は、モジュールを無効化することで、Magento2への負担を多少でも減らすことができます。

ご参考:
https://www.yireo.com/blog/2018-05-23-disabling-annoying-3rd-party-magento-modules
https://www.integer-net.com/make-magento-2-small-again/

エクステンション(モジュール)の状態を確認したり、無効化するには、以下のコマンドを実行してください。

# Magento2コア以外のエクステンションリストを見る
php bin/magento module:status | grep -v Magento_

# エクステンション無効化の例
php bin/magento module:disable Klarna_Core Klarna_Ordermanagement Klarna_Kp
php bin/magento module:disable Amazon_Core Amazon_Login Amazon_Payment
php bin/magento module:disable Dotdigitalgroup_Email
php bin/magento module:disable Temando_Shipping
php bin/magento module:disable Vertex_Tax

# セットアップ
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
php bin/magento cache:flush

8.サーバースペックを確認する

Magento2では、なるべく高スペックのサーバーで運営することが必要と言われています。
では、どのくらいのスペックならいいのか、ということですが、Magentoの公式ドキュメントに、推奨環境が説明されています。

Upgrading the Magento applications and extensions you obtain from Magento Marketplaces and other sources can require up to 2GB of RAM. If you are using a system with less than 2GB of RAM, we recommend you create a swap file; otherwise, your upgrade might fail.
https://devdocs.magento.com/guides/v2.3/install-gde/system-requirements-tech.html

上記の引用は、メモリの説明で、2GBを推奨値としています。

しかし、2GB以下はダメかというと決してそういうわけでもなく、メモリ2GB以下の環境では、Marketplaceからのアップデートやエクステンションのダウンロードをうまく進めるために、swap(スワップファイル)を作成してください、と注記しています。逆に言うと、スワップファイル/領域を作成すれば、2GB以下のメモリでも、なんとか凌ぐことができると解釈できます。
さらに言うと、Setup WizardやComposerを使用しない通常稼働の状態では、2GBメモリ以下(1GBなど)でも問題ない、ということにもなります。

swap(スワップ)は、共用サーバーでは作成できない環境が多いので、最小メモリでMagento2にトライするには、VPSの環境が一番ふさわしいかもしれません。

ただ、これはテスト環境やサイト構築時、開店当初の段階での推奨値なので、ストアの商品数やアクセス数の増加により、必要とされるスペックも変わってくることにご注意ください。

また、Magento2バージョンとPHP、MySQLの各バージョンの整合、PHPのエクステンション(OPcacheなど)が正しくインストールされて機能しているかも、上記リンクを参照しながら確認してください。

9. Webサーバーの構成を見直す

Magento2を動かすWebサーバーとしては、Apache(アパッチ)サーバーか、Nginx(エンジンエックス)サーバーか、大きく二つの選択肢があります。

例えば、日本のMagento第一人者、Veriteworksの西氏がさくらのナレッジで公開されているチュートリアルでは、Apacheサーバーをベースにすべてが説明されています。
https://knowledge.sakura.ad.jp/serialization/use-magento/

大変優れたチュートリアルで、学ぶことが多いのですが、Apacheサーバーでは、特に本番環境において、Varnishというキャッシュを導入することが強く推奨されます。実際、上記「Magentoを本格的に運用する」の記事の中でも「Varnishは不可欠」と明言されています。
Apacheサーバーを選ぶ場合、本番環境では、Varnishを入れることが必須と考えたほうがいいでしょう。

ただし、オープンソースのVarnishは、SSL(HTTPS)接続をサポートしていません。
そのため、SSL terminationとして、別途プロキシを設定する必要があります。海外のMagento2ユーザーでは、そのプロキシに、Nginxを採用するのが一般的となっています。

Apache+Varnish+Nginx(SSL)はアーキテクチャが複雑になり、設定が難しく、しかもメモリ消費が激しくなると言われています。Varnish単独で別サーバーを用意するか、同居の場合は、高スペックのサーバーを利用することになります。

Magento2サーバーApacheかNginxか

一方、はじめからNginxサーバーを選択する方法もあります。
この場合、Nginx+PHP-FMP(FastCGI)の組み合わせになり、設定も比較的容易で、パフォーマンスも良好です。Apache+Varnishと比べると、その半分のメモリで運用しても問題ないという報告があります。

スタートアップの小〜中規模のストア構築で、コマンドラインの作業に抵抗がない方は、VPSにNginxサーバーでMagento2を構築するのが、最もコストパフォーマンスのいい選択になるのではないか、と私は考えています。

また、必要になれば、NginxにもVarnishを入れることができます。Nginxをサーバーとしてもプロキシとしても設定できるので、Apache+Varnishの構成と比べるとアーキテクチャの複雑さが緩和され、メンテナンスの負担も軽くなると言われています。
商品点数が数万以上で、1,000人以上が同時にアクセスするような大規模サイトでは、Varnishを入れて足腰を強くすることが、サイトパフォーマンスの維持に有力な対処方法となります。

ただし、Nginxにも欠点があります。
現在、Magento2をNginxサーバーでホストすると、管理画面のSetup Wizardが利用できない(表示されない)というバグが報告されており、今後いつ修復されるか、はっきりと分からない状況です。SetupWizardを利用する方は、Nginxでの運用はいましばらく様子見をしたほうがいいかもしれません。
ご参考: https://magento.stackexchange.com/questions/222345/magento-2-2-2-web-setup-wizard-not-visible-in-backend

  • Apache+Varnish
  • Nginx+PHP-FMP(FastCGI)

Magento2をこのどちらのサーバー構成で運用するのがいいかは、古くから(笑)いろいろと議論されており、結局は、運用者が使いやすほうを選べばいいのではないか、と言われています。
ご参考:https://magento.stackexchange.com/questions/175438/nginx-or-apache-for-magento-2-x

ちなみに、Magentoサーバーでご紹介しているSiteGroundは、Apacheベースの共用サーバーになります。
SiteGroundでVarnishを設定することはできないのですが、SiteGround特製のNginxプロキシによるキャッシュシステムや、CloudflareのCDNとの連携、また、バックエンドにMemcacheなどを簡単に導入することができます。さらに、Cloudプラン(cPanelつき)では、HHVMを設定することも可能です。
本格運用にどこまで耐えられるかと言われると疑問は残りますが、海外サーバーの場合、コマンド作業の苦手な人でもcPanelからの直感的操作のみでMagento2サイトの外部環境を構成することができます。初心者の方は1〜2年くらい共用サーバーで修行をしてMagento2に慣れ、それからVPSへという流れがステップ的に無理のない選択になるのではないかと思います。

10. Redis、GZIP、HTTP/2、その他

その他、必ず導入したほうがいいものとして、Redisがあります。
Redisとは何か、ときちんと説明するのは難しいのですが、ここでは簡単に、Magento2のセッションデータをディスクに格納し、Magento2のパフォーマンスをバックエンドで改善してくれるツール、データベースのキャッシュシステム、と理解してください。
Redisはオープンソースで、VPS環境で比較的容易に導入することができます。同様のシステムにMemcacheがありますが、RedisとMemcaheの併用は不可で、どちらか一つと言われれば、Redisを選ぶのが一般的です。

また、GZIPという、ファイル圧縮もサーバー側のファイルで設定でき、HTTP/2の設定も、ファイルの読み込みを速くする効果があります。RedisもGZIPもHTTP/2も、Apache、Nginxの両サーバー環境での設定が可能です。

その他、有料サービスになることが多いのですが、CDN(Content Delivery Network)やロードバランサーの導入も、Magento2のスピードアップに貢献します。

今回の記事は、特に後半が駆け足になってしまい、サーバー構成の一つひとつの詳細な設定方法を説明することはできないのですが、冒頭のスピードテストを繰り返しながら、それぞれの環境でベストなパフォーマンスになるよう、様々なツールやサービスを上手に組み合わせて、理想的なMagento2環境を構築してください。