ECサイトはスピードが命。サイトの表示が高速であればあるほど、ショッピングは快適になります。より良いユーザー体験の提供はSEOの向上、ROIの改善、顧客満足度の向上につながります。突き詰めていくと、スピードが収入と利益の増加をもたらすのです。
現代のショッピングとなると、お客さんは高解像度の画像や動画、ライブチャット、ユーザーレビュー、リアルタイム・インベントリ、パーソナライゼーション、その他の動的なツールなどなど、様々な機能がサイトに用意されている状態を期待しています。
オンラインで買い物をするユーザーの注意をひいていられるのは、ほんの短い間だけです。先ほど挙げたショッピング体験をスムーズにしてくれる機能は、適切に実装しなければECサイトの読み込みを遅くしてしまう可能性もあるのです。
世界一人気なECサイト構築ソリューションであるWooCommerceは無料で利用でき、個別のニーズに応じて自由に調整することができます。
WooCommerceはこれまで8,800万回以上ダウンロードされており、500万件を超えるサイトで利用されています。
他の人気ショッピングプラットフォームとは異なり、WooCommerceでは売上の一部を手数料として支払う必要がありません。（とは言え、WooCommerceでストアを運営する上で他の側面から経費は発生しますが）
WooCommerceは無料ですがサポートは限られているため、ユーザー側が責任を持って最高のコンディションを保っておかなければならないのです。幸い、知識さえあれば、保守はそう難しくはありません！
WooCommerceを安心してスピードアップできる方法を学びたいとは思いませんか？
そんな方は是非この記事をお読みください！
オンラインストアの読み込み速度が重要な理由
サイトの第一印象は非常に重要ですが、中でも読み込みスピードはユーザーがサイトを開いた瞬間に感じる要素です。Googleの行った調査では、読み込みに3秒以上かかると53%のモバイル端末利用者がサイトを離れてしまうことが分かりました。
「ECサイトの読み込み速度の基準は2秒でしょう。Googleでは0.5秒以下を目指しています」
– GoogleテックリードMaile Ohye氏
別のグローバルな調査では、80%のユーザーが一時的にダウンしているサイトよりも読み込みの遅いサイトの方がイライラすると回答しています。また、同調査では、 73%のユーザーが、読み込みが遅すぎる場合は競合のサイトの利用に切り替えると回答しています。
100ミリ秒の読み込みの遅れであってもユーザー体験、しいてはオンラインの収益に悪影響を及ぼす可能性があります。Akamaiによると、100ミリ秒の読み込みの遅れはコンバージョン率を7%下げ、2秒の遅れはなんと103%もコンバージョン率を下げるということです。
例えば、1日$1000の売上を生み出すサイトの場合、100ミリ秒のページ読み込みの遅れが年間$25,550の売上減少に繋がるのです。
事業規模が大きいほどその減少の幅は大きくなります。例えば、Amazonではたったの1秒ページの読み込みの遅れが年間16億ドルの収益の減少につながっています。
上記のデータは、ページの読み込みに6秒以上かかった場合、3秒以下で読み込んだ場合の2倍顧客を失うことになることを示しています。
ユーザー体験の他、サイトの読み込みスピードはSEOにも影響を与えます。WebサイトのスピードとパフォーマンスはGoogleの検索順位に大きな影響を及ぼします。
Googleでは表示される検索結果の50%についてモバイルファーストインデックスにシフトすることを発表しました。にも関わらず、HTTPArchive.orgのデータをみる限り、昨年のWordPressを使用しているモバイルサイトの平均読み込み時間は遅くなっているようです。
サイバーマンデーやブラックフライデーなどトラフィックのピークの時期はサイトの読み込みスピードがより一層重要です。周りに競合がたくさんいる中で、買い物客がサイトから離れて行ってしまわないようにすることが肝になります。
これらの統計から、WooCommerceストアのスピードを向上することが競合に差をつけるための鍵を握ると言えるでしょう。
WooCommerceストアのスピードを計測する
まずはサイトの現在のスピードを計測しないことには改善することもできません。
WooCommerceストアの読み込みスピードが重要である理由がわかったところで、今度は計測する方法をご紹介しましょう。WordPressサイトをスピードアップさせる時、どれほど改善したかを正確に測定する必要があります。
ウェブサイトの速度テストはWooCommerceストアの反応の速さを測るには最適なツールです。ただし、適切な方法で実施しないと、変更を加えた後に、実際には速くなっているにも関わらず、むしろ遅くなっているように見えてしまうことがあります。
まずはWebPagetest、Pingdom、Google PageSpeed Insights、GTMetrixのいずれかのサイトの速度テストツールを試してみることをお勧めします。
また、パフォーマンスの低いテーマ、プラグイン、機能を特定できる無料のWordPressプラグインQuery Monitorを利用してみても良いでしょう。ウェブサイトによって読み込まれているすべてのスクリプト、スタイル、HTTPからのAPI呼び出しが、そのサイズと読み込み時間とともに表示されます。リクエスト数が最も多く、読み込み時間が最も遅いものを探してください。
完璧な速度テストは存在しないので、まずは一貫して一つのツールを使って一通りテストを行うようにしましょう。他のツールは後から検討すれば良いでしょう。
実際のパフォーマンスと体感するパフォーマンスの間には差異があります。サイトにどれほど優れた技術を使用しているかよりも実際のユーザー体験の方が重要です。
そのため、ただ最高の数値を達成することだけに固執するのではなく、全体的なユーザー体験を向上できるよう、これからご紹介するテクニックを取り入れてみましょう。
WooCommerceをスピードアップするには
速度テストの結果から、読み込みの遅いWooCommerceサイトを最適化するための計画を立てることができます。それでは実際に見ていきましょう！
1. WooCommerceの設定を最適化しパフォーマンスを改善する
まずは基本的な方法としてWooCommerceの設定を最適化します。
まず、 ログインページのURLを変更します。デフォルトではWordPressサイトのログインURLはdomain.com/wp-admin/となっています。覚えやすいという利点もありますが、大きな問題点もあります。誰もがこの構造を知っているため、ボットやハッカーの標的になりやすいのです。
ログインURLをより複雑なものに変更することで、悪意のある不正な攻撃からサイトを守ることができます。またエラーコード429 Too Many Requestsなどのレート制限のHTTPエラーを防止することもできます。
WPS Hide LoginやRename wp-login.php などの無料のプラグインを利用すると簡単に変更ができます。
ECサイトでブログも運営している場合、ブログフィードに表示する投稿の数に上限を設けるのも有効です。WordPressのデフォルト設定では10個となっていますが、上限を下げることができます。
些細なことのように思えるかもしれませんが、トラフィックの多いブログの場合（ ウェブサイトへのトラフィック流入を増加する方法はこちら）、この積み重ねがパフォーマンスの改善に繋がります。「ダッシュボード」>「設定」>「表示設定」から変更ができます。
次にサイト上のピンバックを無効にします。これはスパムが生成される原因となります。サイトで生成されるクエリが少なければ少ないほどパフォーマンスが改善されます。
投稿やページにたくさんのユーザーコメントがついている場合、複数ページに分割して表示する設定もできます。同様に、商品ページのレビューも分割表示ができます。
商品ページの読み込み時間を最適化するにはこれらの表示件数の上限を10から20の間に設定しましょう。
商品レビューをストアに表示させたくない場合は、「WooCommerce」>「設定」 から非表示にすることができます。これによって、スクリプトやウィジェットをいくらか読み込まなくて済むため、サイトの読み込み速度向上に繋がります。
最後に、不必要、もしくは古いテーマやプラグインを全て削除しましょう。インストールされているテーマやプラグインの数が少なければ少ないほど管理しやすく、パフォーマンスに関する問題のトラブルシューティングが省けます。
2. 読み込みの速いWooCommerceテーマを利用する
適切なWooCommerceのテーマを利用するのはとても重要です。市場にはたくさんのテーマが存在するため、自分のサイトにぴったりなものを選ぶのはとても骨の折れる作業です。
便利な機能が備わった美しいテーマは一見とても魅力的に見えるかもしれませんが、実際に使用してみると大失敗ということもあります。ECサイトの場合、WooCommerceとの互換性があるかどうか確認することも必須です。
WP Rocketでは人気なWooCommerceテーマの速度のテストを実施し、次のような結果を公開しています。
WordPressのスピードアップに関する記事でもご紹介しているとおり、Astra、OceanWP、GeneratePressはKinstaでもお勧めしているテーマです。読み込みがとても速く、軽量なWordPressテーマです。
ElementorやBeaver Builderなどのページビルダーと組み合わせれば、ほとんどどんなサイトでも作れてしまいます。
StorefrontはWooCommerceから提供されている無料のテーマです。一方、Shoptimizer、Divi、WoondrShopは有料のテーマです。これらのテーマはECサイトを作るために設計されているため、必要な機能を利用するために外部のプラグインをインストールする必要がありません。
予算が少ない場合、まずは無料のテーマを使用して、後から有料のソリューションにアップグレードしても良いでしょう。
肥大化を防ぐためにページビルダーは使わないことをお勧めします。代わりに、WordPressのGutenbergブロックエディターに対応しているテーマを選ぶと良いでしょう。
テーマを決定する際は、オンラインストアで必要な機能をリストアップすると良いでしょう。それから、それらの機能をなるべくカバーするプラグインを選びましょう。こうすることで、無駄な機能の多い多目的なテーマや外部のプラグインに頼るのを避けられます。
これは次の提案にも繋がります。
3. プラグインやWooCommerce拡張機能の利用はほどほどに
WordPressのレポジトリには54,000個以上の無料のプラグインがあります。さらに、インターネット上にはもっとたくさんの有料プラグインも存在します。そのため、つい夢中になって、たくさんインストールしてしまいがちです。
多くの人気なプラグイン、特にパフォーマンスやセキュリティ関連のものは、特定のホスティング環境では正常に作動しないことも。
どのプラグインをインストールすべきかなかなか決められないという方はKinstaの様々な用途別のおすすめのWordPressプラグインのリストをご参照ください。SEOから画像圧縮まで、役立つプラグインが見つかること間違いなしです。
またWooCommerceの機能は豊富な種類の無料、または有料のWooCommerce拡張機能により拡張することができます。これらもプラグインと同じような働きをします。
勘違いされがちですが、プラグインをたくさんインストールしたからといってパフォーマンスの問題が発生するとは限りません。しかし、それはプラグインが適切にコーディングされている場合に限ります。
あまりにインストールしたプラグインの数が多いと、その全ての品質を入念に吟味するのは難しくなります。そもそも、ユーザーがそれらを注意深く調べられるだけのスキルや専門性があるとは限りません。
プラグインを複数個使うだけでも互換性の問題が発生することがあります。それが何十個もあれば、そのような問題が発生する確率は飛躍的に高くなるのです。
このような理由から、インストールするプラグインやWooCommerce拡張機能は慎重に選ぶべきでしょう。
4. WordPressのメモリー制限を上げる
WordPressではデフォルトでPHPに32 MBのメモリーを割り当てています。足りなくなりそうになると、自動で上限を40 MB（シングルサイトの場合）または64 MB （マルチサイトの場合）まで引き上げようとします。
WooCommerceサイトでは多くの場合、このメモリー制限では足りないことがあります。次のようなエラーメッセージが表示されることもあります。
“Allowed memory size of xxxxxx bytes exhausted”
この上限を256 MBまで引き上げることをお勧めします。編集する前に必ずそのファイルのバックアップを取るようにしましょう。そうすれば問題が発生したとしても、編集したファイルを元のファイルに差し替えることができます。
5. 画像の圧縮と配信の最適化
どんなウェブサイトでも、画像はページ容量の大きな割合を占めるものですが、ECサイトの場合はなおさらです。WooCommerceサイトは商品画像やバナーにより容量がかさんでしまいがちです。
画像のサイズと配信を最適化しなければウェブサイトの読み込みが非常に遅くなってしまうかもしれません?
HTTP Archiveでは人気のウェブサイトのサイズや容量を追跡しています。次の図は2020年のWordPressサイトの状況を視覚化したものです。
動画は画像よりも重たいリソースですが、多くの場合オンデマンドで読み込まれます。そのため、ページの読み込み時間には画像ほど大きく影響しません。
HTTP Archiveによる画像の状況に関する レポートによると遅延読み込み画像やスクロール後に表示される画像を利用することで1ページあたり545 KBを削減できるということです。
JPEG圧縮レベルを85以下にすることで、さらに1ページあたり40.3 KB削減できます。この計測値はモバイルウェブサイト用のGoogleの速度テストツール、Lighthouseを利用して得られた値です。
WooCommerceストア（また、ウェブサイト一般）で画像を最適化する際は次の5つのルールを守りましょう。
- 最適な画像形式を選択する（JPEG、PNG、SVG、WebP）
- 適切なツールで効率的に画像を圧縮する
- 様々な端末での表示を念頭に置き、レスポンシブな画像を利用する
- オフスクリーン画像（スクロール後に表示される画像）を遅延読み込みする
- 高速CDNに画像の配信を任せる
WooCommerce 3.3ではサムネイルのリサイズ、不鮮明な画像の修正、背景サムネイルのリサイズなど画像サイズに関する改善が導入されました。これらの機能によりRegenerate Thumbnailsなどのプラグインを使う必要がなくなりました。
まだサイトの構築を始めたばかりであれば、サイトに画像をアップロードする前に圧縮すると良いでしょう。おすすめの画像圧縮ツールは次の通りです。
既にサイトにたくさんの画像がアップロードされているという方は、画像を自動で最適化するWordPressのプラグインを利用すると良いでしょう。経験上、安定した品質が保たれるプラグインは次の通りです。
これらのプラグインの大半は画像の遅延読み込みもこなします。WordPressのコアチームは画像の遅延読み込みをデフォルトの機能に含める予定です。<img>タグ用にloading属性が新たに使われます。
最後に、画像圧縮プラグインの利用はなるべく避けましょう。特に画像を圧縮するのにサーバーのリソースを利用するものは利用しないほうが良いでしょう。
代わりに、画像圧縮の作業を外部のサーバーに委託するサービスを利用しましょう。もしくは、さらに良いのは、画像をウェブサイトにアップロードする前にリサイズ、圧縮することです。
さらに詳しく知りたいという方はKinstaのパフォーマンス向上のための画像の最適化という記事をご覧ください。
6. 静的リソースをCDN経由で配信
コンテンツデリバリネットワーク（CDN）とは、世界各地に配置されるサーバーです。そのサーバーの設置場所はポイントオブプレゼンス（PoP）と呼ばれます。
CDNの主な役割は、画像やJavaScript、CSSなどの静的なリソースをキャッシュし配信することです。より強力なCDNはオーディオや動画などの動的なコンテンツをホストすることも可能です。
どんなに高速なサーバーを利用しているサイトであっても、地理的な制限を受けます。WordPressのCDNは個人のユーザーとサイトのリソースの間の距離を縮め、レイテンシとTTFB（Time To First Bite/最初の1バイトを受信するまでの時間）を削減することができます。
リクエストが送信される場所に応じて、自動で最も近いCDNのPoPを割り当て、キャッシュしたリソースを配信します。こうすることで、ウェブサイトの読み込みが高速になり、より快適なユーザー体験が実現できるのです。
例えば、アメリカのサーバーを利用しているWooCommerceストアをインドのユーザーが開こうとすると、CDNは最も近いPoPからサイトのアセットを配信します。この場合、インドのバンガロールになります。
一般的には、PoPの数が多く、世界中に幅広く配置されているほど、ウェブサイトは速く読み込まれます。
KinstaではCDNのテストを実施しその結果は明白でした。ホスティングサーバーからかなり遠いところに位置するユーザーの場合、CDNを利用することで読み込み時間を50%以上削減できました。
CDNにはキャッシュ以外にも優れた画像圧縮やHTTP/2のサポート、 ホットリンクからの保護、追加のセキュリティなどパフォーマンス向上のための機能が含まれていることがよくあります。
高速なWooCommerceストアを構築するには、高速なCDNを利用することをおすすめします。人気のCDNには次のようなものがあります。
7. 不必要なJavaScriptやCSSを削除する
大半のWordPressテーマやプラグインはサイト上の全てのページでJavaScriptとCSSを読み込みます。それらが使用されていないページでも読み込まれてしまうことになります。
例えば、Contact Form 7 は全てのページにJavaScriptとCSSを読み込みます。フォームはお問い合わせページにしか使われないものですが、そのアセットは全てのページで読み込まれるのです。無駄ですね！
これらの使用されていないアセットをページから除去することにより無駄を省き、ページの読み込み時間を短縮することができます。WooCommerceやその拡張機能（例えば、Smart CouponsやFollow-Upsなど）ではこのような問題が起きやすいものです。
例えば、ストアのホーム画面やショップのページに支払い代行システムに関連するJavaScriptを読み込む必要はありません。これらのJavaScriptがチェックアウトや注文確認の画面にのみ読み込まれるように制限しましょう。同じように、チェックアウトのページからはスライダーやカルーセルのJavaScriptやCSSを除去しましょう。
どのアセットを除去すべきか確認したいときは、サイトの速度テスト結果の滝グラフを見てみましょう。読み込まれてしまっている無駄なアセットの検討がつくでしょう。
またChromeのデベロッパーツールのNetwork タブも参考になります。ページにどのように何が読み込まれているかが分かりやすく確認できます。
ページの機能上必要のないJavaScriptやCSSを削除しましょう。まずは多くのユーザーが最初に訪れるホーム画面とランディングページの最適化からはじめましょう。
wp_dequeue_scriptやwp_dequeue_style の機能を利用して、不要なJavaScriptやCSSを削除しても良いでしょう。また、Asset CleanUp: Page Speed Boosterというプラグインを利用すると簡単に整理することができます。
Asset CleanUpはページ上で読み込まれる全てのJavaScriptとCSSをスキャンします。それらのうち必要のないものを無効にすることができます。変更を加えた後はデザインや機能が損なわれていないかどうか確認しましょう。
プラグインのプロ版ではアセットにaync または defer 属性を指定できます。この設定を適用するとページのクリティカルレンダリングパスからJavaScriptが削除されます。サイトのページの体感読み込み時間を改善するのに役立つでしょう。
これらの不要なCSSやJSを削除することのもう一つのメリットはウェブサイトの生成するHTTPリクエストの数を削減できるという点です。
無料の代替案としては、AutoptimizeとAsync JavaScriptプラグインを組み合わせることで同じ結果が得られます。
8. HTTP/2は非常に重要
この記事を数年前に執筆していたとしたら、この項目のタイトルは「HTTPリクエストの数を削減する」としていたでしょう。ブラウザとウェブサイト間のコミュニケーションが大幅に改善したため、その改善は今では必要なくなりました。
HTTP 1.1はHTTPプロトコルの最初の主要なアップデートで、1997年に完了しました。これはソーシャルメディアやストリーミングサービス、スマートフォンのアプリ、そしてWordPressさえまだ登場していない頃です。ウェブはそれから急激に成長してきました。
HTTP 1.1プロトコルから改良されたHTTP/2はインターネット上の急速に成長するニーズに応えるべく2015年に登場し、そのスピード、効率、セキュリティが大幅に改善しました。
HTTP/2でのパフォーマンスの向上にはいくつかの理由があります。
- 一つのTCPコネクションによる多重化と並列性の改善
- ハフマン符号アルゴリズムを使用したHPACKヘッダ圧縮
- ALPNを利用したより高速な暗号化
- リクエストを待つだけでない積極的なサーバープッシュ
これらの改善点は全て、様々な種類のリソースをホストしている場合であってもウェブサイトの読み込みを速くすることにつながります。
通常、WooCommerceストアには画像やCSS、JavaScriptなど重いアセットが含まれています。このようなサイトはHTTP/2へ切り替えることにより大きなメリットがあります。
KeyCDNのHTTP/2テストツールを使うとサイトがHTTP/2で動作するかどうかを確認することができます。今では、全ての主要なブラウザはHTTP/2に対応しています。その圧倒的なパフォーマンス上のメリットを利用しない手はないでしょう。
もしご利用中のプロバイダーがHTTP/2にまだ対応していないのであれば、別のプロバイダーを探したほうが良いでしょう。Kinstaは全てのサーバーとCDNでHTTP/2とTLS 1.3に対応しています。
HTTP/3も間も無く登場する予定で、ウェブサイトの読み込みはさらに速くなるでしょう。
9. 高速化のためにWooCommerceをキャッシュする
キャッシュとは、次のリクエストを素早く実行できるよう、一つのリクエストからリソース（キャッシュ）を一時的に保存することを言います。キャッシュはサーバーもしくはユーザーの端末のいずれかに保存されます。
キャッシュはWooCommerceストアをもっとも手っ取り早くスピードアップできる方法の一つです。また、最も重要な戦略の一つでもあります。
- ユーザーはブラウザ経由で特定のウェブサイトをリクエストします。例えば、ブラウザにkinsta.comと入力します。
- ブラウザはウェブページ（HTMLドキュメント）をユーザーに表示するようリクエストします。DNSサーバーがこのリクエストを処理し、ホスティングサーバーのIPが明らかになります。
- ウェブページを返す処理はウェブサーバーにホストされるアプリケーション（WordPressやJoomlaなど）によって行われます。静的サイトの場合、アプリケーションすら必要ないこともあります。
- アプリケーションがスクリプト（例：PHP、JavaScriptなど）を実行し、（5）データベース（例：MySQL、MongoDBなど）にクエリを実行してウェブページを構築します。次に、ウェブページをブラウザに返し、ブラウザはそれをレンダリングしてユーザーに表示します。
全てがスムーズに進めば、これらのステップは最大でも数秒で完了します。
しかし、これは一つのリクエストが一人のユーザーから送信された場合です。もしも複数のリクエストが何千人ものユーザーから同時に送信されたらどうなるでしょうか？サーバーにとてつもない負荷がかかり、ウェブサイトの読み込みが遅くなってしまいます。
ここで登場するのがキャッシュです。ページビューを生成するのに必要な動作を削減し、WordPressのPHPとデータベースへの依存を軽減します。キャッシュにより、WordPressを（静的サイトと全く同じとまでは言いませんが）、同じくらいのスピードまでパフォーマンスを引き上げることが可能です。
ウェブキャッシュは主に2種類に分類できます。
サーバーサイドキャッシュ
クライアントサイドキャッシュ
キャッシュはウェブサイトの読み込みを速くするだけではなく、サーバーの負荷も軽減します。詳しい説明を知りたいという方はKinstaのWordPressのキャッシュに関する詳細の記事を是非ご覧ください。
WooCommerceストアのホスティングにKinstaをご利用いただいているお客様の場合、キャッシュはサーバーレベルで行われています。そのため、キャッシュのためのプラグインを利用する必要はありません。
Kinstaは、WooCommerceとシームレスに連動するようにキャッシュルールを構成しています。そのため、チェックアウトのプロセスで中断することなくユーザーはスムーズに買い物できます。
ご利用中のプロバイダーがサーバーレベルでのキャッシュを提供していない場合、外部のキャッシングプラグインを利用する必要があります。理想的な手段とは言えませんが、何もないよりはマシでしょう。
おすすめのWordPressのキャッシュ系プラグインは次の通りです。
- WP Rocket（有料）
- W3 Total Cache（無料）
- Cache Enabler（無料）
他の選択肢も見てみたいという方は当社のWordPressのキャッシュ系プラグインに関する記事をご覧ください。
10. WooCommerceのデータベースを綺麗にする
データベースとは整頓されたウェブサイトデータの集積です。WooCommerceストアの場合次のようなものを含みます。
- サイトコンテンツ：商品ページ、カテゴリー、タグ、ユーザーデータ、ユーザーレビュー、サイトを横断する設定、テーマ、プラグインなど
- トランザクションデータ：注文情報、支払い、在庫など
ユーザーがストアを訪問する度に、サイトコンテンツのリクエストが送信されますが、その大半は静的なもので、あまり大きく変わりません。しかし、注文がされる時は、動的なリクエストが送信されます。
ストアのデータベースを最適化しないと、これらのリクエストを処理するのに時間がかかりすぎる可能性があります。サーバーの応答が遅いと、ウェブサイトの読み込みも遅くなります。そのため、不要な要素を取り除くことでデータベースを綺麗にし、最適化する必要があるのです。
WooCommerceデータベースを調整しスピードアップする6つの方法をご紹介します。
古いリビジョンを削除する
WooCommerceストアを開設してからしばらく経っている場合、ページや投稿、商品には古いリビジョンがたくさん含まれているでしょう。これを機に、これを一掃しましょう。
一番簡単な方法はWP-SweepやWP Rocketなどのプラグインを使用する方法です。
WP-CLIを使い慣れている方であれば、SSH経由でサーバーに接続し単純なコマンドをいくつか実行することで同じことができます。具体的な方法はこちらをご覧ください。
保存されるリビジョンの数の上限を設定する
投稿やページのリビジョンの数に上限を設けることで、古いリビジョンが複数ある状況を避けることができます。サイトコンテンツを頻繁にアップデートする傾向がある場合、手に負えないような状況を避けられるでしょう。
上限の設定を簡単に行うには次のコードスニペットをwp-config.phpファイルの下に追加しましょう。必ずABSPATH が定義されている行の前に追加するようにしましょう。
define('WP_POST_REVISIONS', 15);
上記の例では上限を15に設定しました。リビジョンの上限はお好きな数に変更することが可能ですが、15以下にするようにしましょう。
もしくは、WP Revisions Controlなどの無料のプラグインを使用しても同じことができます。
全てのリビジョンを無効にする（全く必要ない場合）
サイト上の全てのリビジョンを無効にすることも可能です。wp-config.phpファイルに次のコードを追加するだけでOKです。先ほどと同様に、必ずABSPATHが定義されている行の上に追加するようにしましょう。
define('WP_POST_REVISIONS', false);
もしくはDisable Post Revisionのような無料のプラグインを使えば、ワンクリックで同じことができます。
リビジョンを無効にする前に、既存の古いリビジョンを削除することをお勧めします。そうすれば、サイトのデータベースから過去のリビジョンが一切なくなります。
期限切れのtransientを削除する
transientとはカスタム名と有効期限をつけて保存されるキャッシュデータです。これらは通常WordPressデータベースの wp_optionsテーブルの下位に保存されています。
transientはOptionsとよく似ていますが、有効期限が存在するという点だけ異なります。リモートAPIや大規模なクエリからの応答などのデータを一時的に保存するのに便利です。
WordPressのTransients APIはtransientの取り扱いや自動で期限切れのtransientを削除する方法を定義しています。しかし、必ずしもうまくいくとは限りません。
時に破損したtransientキャッシュが途方もない100万個近い意味のないエントリーを生成することがあります。顧客のセッションは次第に蓄積され、データベースのテーブルに何千個もの不必要な列が生成されます。そうなると、肥大化したデータベースによりサイトが読み込めなくなってしまうことがあります。
無料のDelete Expired Transientsを利用すると簡単に全ての有効期限切れのtransientを削除できます。
データベースのテーブルを綺麗にする
WooCommerceデータベースにはECストアの運営に必要な全ての要素が保存されます。データが追加されたり削除されたり、データベース内のテーブル間を移動するにつれ、徐々に非効率になり、ストアの動作に不必要な要素がどんどん保存されていきます。
これらの不必要なデータを削除してデータベースのテーブルを綺麗にしましょう。wp_optionsテーブルは特に肥大化し、データベースのパフォーマンスを損なう可能性があります。
データベースを綺麗にしておくことはWordPressサイトを可能な限り高速にする上で非常に重要です。
データベースを手動で最適化するのは非常に時間のかかる作業です。無料のWP-Optimizeプラグインを利用して、どのデータベーステーブルに不必要なデータがあるかを確認して、それらの無駄なスペースを削除すると良いでしょう。データの断片化によって失ってしまっていたストレージのスペースを取り戻すこともできます。
定期的にデータベースを最適化するようWP-Optimizeをスケジュールすることも可能です。
データベースに負担をかける重要でない機能を無効化する
WooCommerceのテーマやプラグインの中には、たくさんの便利な機能が付いていて最初は便利に感じるけれど、後々データベースに大きな負荷をかけてしまうようなものもあります。
例えば「人気の商品」「関連商品」を表示できるプラグインです。これらの機能は特にたくさんの商品を取り扱っている場合、サイトを横断し大量のクエリを生成します。これらの機能が必要な場合、ページに手動で挿入するようにしましょう。そんな時にAdvanced Custom Fieldsなどのプラグインは非常に役立ちます。
もう一つの例は、外部のサーバーではなくサイトがホストされているサーバー上で画像を圧縮する画像最適化プラグインです。これは大量にサーバーのリソースを使用してしまうことにつながります。
また、サイトにカウンターを表示するようなプラグインにも要注意です。例えば、ユーザー名のそばに閲覧/投稿/コメントなどの数を表示するようなものです。複数のユーザーとの長いやりとりはデータベースに大きな負担をかけます。
これはソーシャルカウンターの使用においても同じことが言えます。データベースのパフォーマンスを最大化するためには自動生成されるカウンターの使用を最小限に抑えましょう。
家の掃除と同じように、WordPressデータベースは継続的に綺麗にしておく必要があります。
それを考慮し、Kinstaではデータベースのパフォーマンスの問題を解決するための自動化されたシステムを構築しました。サイトのニーズに応じて、自動化システムはデータベースのパフォーマンスを最大化できるよう、MySQLデータベースを週に1度調整します。システムが自動で修正できないような異常を検知した場合、即座にアクションを取るようシステム管理チームに通知します。
他のホスティングサービスをご利用の方は次のようなデータベース最適化のプラグインを利用すると作業が楽になるでしょう。
注意：データベースやWordPressのコアファイルを編集する前には必ずバックアップをとりましょう。
11. ストアをモバイルファーストに最適化する
2020年1月時点で、世界には40億人以上のインターネットユーザーが存在します。そしてモバイル端末を利用するインターネットユーザーもそれと同じくらいの人数存在するのです。2024年までには50億人以上まで成長すると予想されています。
世界のウェブサイトのトラフィックにおけるモバイル端末の利用者は2019年にデスクトップの利用者を上回り、その割合は全体のページビューの52.6%を占めています。 インドやナイジェリアなど一部の国々の中にはモバイル端末がウェブページビューの70%以上を占める
37カ国にいる5億人以上のオンラインの買い物客を対象とした調査では、サイト訪問者全体の65%、ECでの注文全体の46%をスマートフォン利用者が占めました。
驚くべきことに、モバイル端末利用者のコンバージョン率はデスクトップ利用者の半分以下です。そこにはとてつもない成長のポテンシャルがあるのです。
まずはWooCommerceストアをモバイルフレンドリーにしてみるところから始めてみるといいでしょう。Googleのモバイルフレンドリーテストを使用すると自分のサイトが最低限のモバイルユーザビリティの基準をクリアしているかどうかが分かります。
テストを行うと、サイトがモバイル端末でどのように表示されるかがわかります。また、モバイル端末で閲覧した際の問題点もリストアップしてくれます。
WordPressサイトをモバイルフレンドリーにする一番手っ取り早い方法はレスポンシブなテーマを利用することです。この記事の中でこれまでご紹介してきた全てのテーマはもともとレスポンシブで、モバイル端末でも美しく表示されます。
モバイル端末利用者は普通エンドレスにスクロールするのを好みません。そのため、ページはなるべく無駄のない作りにしましょう。コンテンツを詰め込みすぎないよう注意しましょう。
ストア内に多くの商品がある場合、利用者が見つけやすいような検索機能をつけましょう。WooCommerce Product Searchというプラグインをインストールして、商品を素早く検索できるリアルタイム商品フィルター機能をつけてみてもいいでしょう。
最後に、買い物客が分かりやすいよう、チェックアウトのプロセスを合理化しましょう。注文するまでのステップが少なければ少ないほどショッピングは楽になります。この作業を行う際に便利なWooCommerce拡張機能をいくつかご紹介します。
- WooCommerce Social Login— 時間のかかるアカウント作成、ログインのプロセスをカットできます。Facebook、Twitter、Googleなどのソーシャルアカウントを利用したログイン機能を実装します。
- Variation Swatches and Photos— 商品のバリエーションを選ぶ際の面倒なドロップダウンメニューを無くし、全ての商品のオプションを簡単にタップで選択できるボタンを表示できます。
- One Page Checkout— 顧客がすぐにページを離脱してしまわないように、無駄なステップなしに欲しいものを購入できるようにします。ゲストとしてのチェックアウトができるサイトを検討している場合は、その機能を有効にしてもいいでしょう。
- Checkout Field Editor— チェックアウトページの欄を追加したり削除したり編集したりできます。例えば、デジタル商品のみ販売している場合、配送先情報の欄は必要ありません。
- Bolt/ Stripe / Amazon Pay / PayPal — 支払いはモバイル端末でのショッピングの悩みの種になり得ます。より簡単に支払いができるよう、様々なWooCommerce支払い代行システムの拡張機能を利用しましょう。
モバイル端末でのショッピングは単純に商品を購入するという行為にとどまりません。多くのユーザーは主に商品情報を調べ、価格を比べるためにストアを利用します。モバイル端末で利用しやすいオンラインストアを心がけましょう。
12. get_refreshed_fragments リクエストを無効にする
ユーザーがショッピングカートに変更を加えた際に、WooCommerceではショッピングカートのコンテンツを動的にアップデートするのにget_refreshed_fragmentsリクエストを利用します。カートのページを再度読み込むことなく更新できるのはユーザーエクスペリエンスという観点で素晴らしいことのように思えるかもしれません。
しかし、特に共有サーバーを利用しているサイトなど、多くのケースで、ウェブサイトが遅くなってしまいます。しかも、この機能を結局利用しなくなるサイトも多くあります。
確認のために、最新のWooCommerceストアをPingdomのツールでテストしたところ次のような結果となりました。
サイズはたったの1.1 KBであるにもかかわらずwc-ajax=get_refreshed_fragments リクエストは実行までに0.76秒も要しています。ページの読み込みまでにかかる時間が3秒以下のサイトであれば、読み込み時間の25%をも占めます。このテストサイトはクラウドVPSでホストされていますが、より安価なホスティングプランの場合の読み込み時間は想像に難くありません。
WebNotsによるこの記事は、より詳細にこの問題について触れています。Disable Cart FragmentsやDisable Cart Fragments by Optimochaなどの無料プラグインを利用するとこの負荷の大きなリクエストを無効にすることができます。
このリクエストを無効化するならば、「WooCommerce」>「商品」の設定画面で「正常に追加された後、カートのページにリダイレクトします。」というオプションを有効にすることをお勧めします。
このオプションを有効にすることで、ユーザーは商品をカートに追加するとカートのページに移動するようになります。
WooCommerceの管理パネルを最適化する
スピードが重要なのはストアのフロントエンドだけではありません。ストアを効率的に管理し、必要な時に素早く変更を加える上でバックエンドのスピードもまた重要になります。
WooCommerceの管理パネルを効率的にできるかどうかが生産性に大きく関わってきます。無駄な時間を省くことによって、オンラインマーケティングなど、WooCommerceストアの成功に欠かせないことにより時間をかけられるようになります。
WooCommerceのダッシュボードを高速化するための方法をいくつかご紹介します。
まずはフロントエンドの最適化、次にバックエンドの最適化
スピードの問題はWordPressの管理用ダッシュボードのみで起きている事象でしょうか？それともウェブサイト全体で起きている事象でしょうか？後者である場合、これまでご紹介してきた最適化をまず適用してみましょう。
なぜなら、多くの場合WooCommerceストアのフロントエンドの読み込みスピードを改善することはバックエンドのスピード改善にもつながるからです。そうすることで、サーバー上のリソースに空きができます。
フロントエンドを最適化しても管理ダッシュボードの動作が遅い場合は、次にご紹介する方法を試してみてください。
13. 無駄を取り除きあらゆるアップデートを定期的に行う
WordPressやWooCommerce、プラグイン、拡張機能、テーマを頻繁にアップデートするようにしましょう。開発者によるサポートが終了しているテーマやプラグインを使っている場合、別のものに変更するべきでしょう。
同様に、テーマやプラグインがダッシュボードに不必要な肥大化を起こしている場合も別のものを探してみましょう。例えば、ダッシュボードに積極的に広告を表示するようなプラグインを利用している場合、変えた方が良いでしょう。
このような問題があまりに多いため、人気のWordPressプラグインから肥大化につながる要素を取り除くことだけを目的としたプラグインすら存在するほどです。
14. オブジェクトキャッシュ、データベースキャッシュを無効化する
キャッシュ系プラグインはWordPressサイトのスピードアップに非常に便利です。しかし、適切に設定されていないと思いもよらぬ結果につながることがあります。例えば、バックエンドの動作が遅くなることがあるのです。
例えば、W3 Total Cache は最も人気なWordPress用のキャッシュプラグインの一つです。無料で、様々なキャッシュのオプションが利用でき、JSとCSSの削減もでき、CDNと連携でき、100万以上のウェブサイトで利用されています。
W3 Total Cacheには次のキャッシュオプションがあります。
- ページキャッシュ
- オペコードキャッシュ
- データベースキャッシュ
- オブジェクトキャッシュ
- ブラウザキャッシュ
- フラグメントキャッシュ
たくさんの選択肢があると、特にそれぞれのキャッシュの働きを知らない初心者の方は混乱してしまうかもしれません。
オブジェクトキャッシュとデータベースキャッシュはデータベースクエリの数を減らすことによりウェブサイトをスピードアップしますが、サーバーのメモリを犠牲にしてこの処理を行います。
利用中のホスティングサーバーの性能が十分良く、強力であれば特に問題にはならないでしょう。例えば、Kinstaをご利用のお客様はキャッシュがすでにサーバーレベルで備わっているためキャッシュの心配をする必要がありません。
しかし残念ながら、全てのホスティングプロバイダーで対応しているわけではありません。
お使いのプロバイダーで対応していない場合は、W3 Total Cacheなどの外部のキャッシュプラグインを利用する必要があります。シンプルな設定で、全ての種類のキャッシュをワンクリックで有効にすることができます。
「W3 Total Cache」>「General Settings」 のパネルからオブジェクトキャッシュまたはデータベースキャッシュ、もしくはその両方を無効化します。その後、管理パネルの動作に改善が見られたかどうか確認してみましょう。
キャッシュのテストは単にプラグインの設定にあるオプションをちょっといじるだけでは完結しません。変更を加え古いキャッシュを削除した後に、サイトが正常に動作するかどうかもチェックしなければなりません。
15. リソースを多く使うプラグインを削除する
WordPressプラグインの中にはウェブサーバーのリソースを大量に使うものもあります。結果的にサーバーのCPUとRAMの大半を使い果たしてしまうことになります。
Query Monitor pluginという無料プラグインを利用するとそんな厄介なプラグインを特定することができます。ウェブサイトに読み込まれている全てのJavaScript、CSS、HTTPによるAPI呼び出しとそのサイズ、読み込み時間を表示してくれます。リクエスト数が多く、読み込み時間も長いものを特定しましょう。
次のテストサイトでは、Classic Editorプラグインが管理画面での読み込みが一番遅くなっています。Loginizer、All-in-One WP Migration、WP Bakery （旧Visual Composer）も肥大化の要因となり得ます。
MigrationとClassic Editorの2つのプラグインを判断し、削除したところ、管理画面のスピードは飛躍的に改善しました。
世界各国からの閲覧者のいるWooCommerceストアはダイナミックに複数の言語で表示できるようWPMLのような翻訳プラグインを使用しているかもしれません。多くの機能の使用できる素晴らしいプラグインですが、このプラグインもバックエンドの管理画面のスピードをかなり遅くしている要因の一つとなります。
Polylangなど、より無駄のないプラグインに変更することによりパフォーマンスが改善するかもしれません。WPMLほど機能は充実していませんが、多くのケースで十分です。
継続的に進行するプロセス、スキャンが多いプラグインはWordPressのバックエンドの読み込みを遅くしてしまいます。例えば、サイトマップジェネレーター、分析グラフ/チャート、ページビルダー、チャットプラグインなどがそれに当たります。
16. WordPress用の適切なCDNの設定を利用する
CDNを利用するとWooCommerceストアを全世界で高速表示できます。サイトのリソースのスナップショットを保存し、ユーザーに一番近いサーバーから配信することによってそれが可能となります。
多くのCDNはデフォルトでWordPressのバックエンドのキャッシュを無効にしています。しかし、中には無効化されていないCDNもあり、それがストアの管理パネルを大幅に遅くすることがあります。その場合、管理ダッシュボードをCDNキャッシュの対象から除外することでパフォーマンスを改善できます。
Cloudflareを利用している方はWordPressの管理画面でCloudfareの機能を無効にするためのページルールを設定することができます。やり方は以下の通りです。
- CloudflareのダッシュボードからPage Rulesの項目へ移動します。
- URLの欄に*example.com/wp-admin/*と入力します。
- 設定の欄ではCache Level（キャッシュレベル）とBypass（バイパス）のオプションを選択します。
- Disable Performance（パフォーマンスを無効化）Disable Security （セキュリティを無効化（非推奨））などの追加の設定も選べます。こちらは任意です。
- その後Save and Deploy（保存して展開）をクリックします。
設定が反映されるまでにはおよそ3分かかります。
KeyCDNをご利用の場合、WordPress Cache Enablerプラグインを利用すると同じ作業ができます。その他のCDNをご利用の場合はそれぞれのサポートからやり方をお探しください。
17. WordPressのHeartbeat APIを合理化する
WordPressのHeartbeat APIはブラウザとサーバー間の定期的な接続を保持することにより、ほぼリアルタイムのアップデートを実現します。APIが15-60秒毎にサーバーへリクエストを送信し、データを受信するとイベント（もしくはコールバック）をトリガーします。
これにより投稿の自動保存やロック、ログインの期限切れの警告など非常に便利な機能が利用できます。しかし、管理者としてログインしている時には、複数のリクエストを常にサーバーに送り続けることで管理パネルの動作が遅くなることがあります。
WP RocketのHeartbeat Controlという無料プラグインを利用すると、ダッシュボード、フロントエンド、投稿エディターでのAPIリクエストの頻度を管理することができます。また全てのAPIを無効化することも可能です。
まずは要求頻度の時間の値を大きくしてみましょう。それでもWooCommerceのバックエンドのスピードが改善されない場合はheartbeat APIを無効化してしまうことも検討してください。
これら全ての最適化を試みてもWooCommerceストアのスピードが改善されない場合、次の項目をご確認ください。
WooCommerceのスピードアップにはまず高品質なホスティング環境を
パンクした車で走るのと同じように、どんなにスピードの最適化を行っても利用しているホスティングサーバーの質が悪ければサイトを高速化することはできません。サイトのパフォーマンスの大部分はホスティングサービスの質で決まります。
WordPressサイトのホスティングサービスの種類は様々ですが、大きく2つのカテゴリーに分けられます。マネージドホスティングであるか否かです。マネージドホスティングではプロバイダーがWordPress用の最適化を全て請け負ってくれるため、全てのユーザーが使いやすいサービスです。一方後者は、技術的な知識が豊富で自分自身でサーバーの調整や管理ができるユーザーに合っています。
WooCommerceサイトの場合、マネージドWordPressホスティングを利用することをお勧めします。ただし、マネージドホスティングはそうでないホスティングサービスよりも料金が高額になる傾向があることは覚えておきましょう。
マネージドWordPressホスティングには主に4つの種類があります。それぞれメリットとデメリットがありますので、ご自身の予算や目的に合ったものを選びましょう。それぞれの機能をインフォグラフィックにまとめました。
ホスティングサービスには、それぞれ料金の異なる複数のプランがある場合があります。そのため、予算内のホスティングサービスを探す際は提供されている機能をよく見て、ご自身の必要な要件を満たしているかを確認してください。
WooCommerceサイトはその特性上、非常に動的です。キャッシュできないデータやリクエストをたくさん生成します。
例えば、チェックアウトページはユーザー個別のものなので、キャッシュから配信することができません。そのため、トラフィックの少ないサイトであってもスムーズに表示されるにはサーバーが十分に強力でなくてはなりません。
WooCommerceのホスティングプランを比較する際は次のような機能の有無を確認してみましょう。
- WooCommerce専用のキャッシュルールが備わったサーバーレベルでのキャッシュ
- タイムアウトせずにWooCommerceのキャッシュされないリクエストを扱えるよう2〜4個以上PHPワーカーがある
- WordPressのメモリ上限が128 MB以上
- トラフィックや負荷の急増に対応できる自動スケーリングインフラストラクチャ
- ECのデータの安全性を確保するための自動のデイリーバックアップ（1時間おきであれば尚よし）
- 定期的なマルウェアスキャン、GeoIPと不正なIPのブロック、無償のSSL、SFTP、SSH、HTTP/2、TLS 1.3など、高度に安全性の高いホスティングプラットフォーム
- ウェブサーバーソフトウェアはNginxもしくはLiteSpeedを使用
- 開発者に便利な機能への対応（PHP 7.4、LDXコンテナ、WP-CLI、GitHub、MariaDB、ステージング環境など）
- ダウンタイムが少なく、世界中にデータセンターが分散している（ターゲットのオーディエンスの所在地の近くにサーバーが位置するものを選びましょう）
- CloudflareやAmazon Cloudなど外部CDNへの対応
- あらゆる問題を素早く解決してくれる24時間365日体制のサポート
- 素晴らしいユーザーレビューと実績
これらの要件を考慮すると、必然的に共有型ホスティングは避けることになるかもしれません。
バーチャル・プライベート・サーバー (VPS) は共有型ホスティングとよく似ていますが、共有サーバーの中にユーザー個別の専用の仮想空間があるという点が異なります。予算が厳しい方は中間に位置するVPSプランでもいいでしょう。ただし、トラフィックが増えた時にはアップグレードをしなければならないという難点があります。
そうなると、残るはクラウドホスティングか専用サーバーのどちらかになります。必要な要件を満たしているのであればどちらもWooCommerceサイトにぴったりです。
専用サーバーのプランはクラウドホスティングのプランと比べやや高額な傾向があり、月額$50〜数千ドルのものまであります。
Kinstaのビジネスクラウドホスティングプランは上記で挙げたWooCommerceのお勧めの要件を全て満たしています。コンテナベースのホスティングによりトラフィックや負荷の急増にも自動でスケーリングし対応するため、WooCommerceサイトに最適です。
さらに機能を拡張したい場合、Kinstaでは、Elasticsearch、Redis、さらなるバックアップ、Nginxによるリバースプロキシなどを追加することも可能です。
次の例はKinstaがECサイトをGoogle Cloud Platformの新しいコンピューティング最適化仮想マシン （C2）へ移行した後のパフォーマンスを示しています。
~665 msから~500 msと、なんと最大25%もパフォーマンスが向上しています！
マーケティングに高額な費用をつぎ込んでいたとしても、サイトが遅ければそれだけで全ての潜在顧客を獲得し損ねているでしょう。
端的に言えば、何時間も頭を抱えてサイトの直帰率がなぜ高いのかと悩むよりも、毎月少しばかり費用を多めに払ってでも優れたホスティングプランに乗り換えた方が良いかもしれません。
まとめ
ECサイトにとってスピードは命。WooCommerceストアのスピードアップはユーザー体験、SEO、収入、ROIを飛躍的に向上させます。
今回の記事でご紹介したスピード最適化のヒントを全て取り入れる必要はありませんが、一通り検討してみることをお勧めします。サイトのボトルネックを特定するのに役立つでしょう。サイトの読み込み時間が速いに越したことはありません。これを機にWooCommerceをスピードアップしましょう！
Salman Ravoof is a Technical Editor at Kinsta. He's a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.
