WooCommerceのパフォーマンス問題を解決できることは、オンラインビジネスの成功の鍵です。ある調査によれば、ユーザーの46%はパフォーマンスの悪いサイトを再び訪問しません。実際、ECサイトではパフォーマンスの問題が原因で潜在的な売上を逃していることがよくあります。

ECサイトを高速化するには多くのテクニックがありますが、緊急のパフォーマンス問題の迅速な解決は困難です。それにはサイト全体の環境を積極的に監視する必要があるからです。そこで、KinstaAPMのようなアプリケーションパフォーマンスモニタリングツールが非常に役に立ちます。

この記事では、ECサイトにおけるさまざまなコンポーネントの説明とECサイトのパフォーマンスの監視にAPMツールが必要な理由、Kinsta APMを使用してWooCommerceサイトのパフォーマンスを把握する方法について学びます。

結局のところ、最終的な目標は、オンラインストアの収益を上げることです。皆さんを応援するために「WooCommerce製品ページのコンバージョン率引き上げのコツ」を電子書籍としてまとめましたので、ぜひともご確認ください。無料でダウンロード可能です。

準備はいいですか?では始めましょう!

ECサイトの様々なコンポーネント

ECサイトを最適なパフォーマンスで運営するにはすべての要素が重要です。ホスティング基盤やECサイト環境から、サービスの統合、決済処理まで、すべてが重要です。

WooCommerceストアスタック
WooCommerceストアスタック

クラフトビールからドローンのトレーニングコースの販売まで、WooCommerc のようなECサイトプラットフォームを利用すれば、オンラインストアを素早く設定して立ち上げられます。

また、様々な拡張機能により、多くの重要なコンポーネントを使用したストア機能の拡張は非常に簡単です。

様々なECサイトコンポーネントのトラッキングは複雑
様々なECサイトコンポーネントのトラッキングは複雑

コンポーネントの数が多ければ多いほど、問題が発生した際にエラーの起きた場所の特定は難しくなります。さらにこの複雑さにより、パフォーマンスと可用性の問題が増加します。迅速にパフォーマンス問題に対応できず修正を提供できなければ、顧客に影響を与えます。

こうした問題はアプリケーションパフォーマンスモニタリングツールを使用することで解決できます。

Kinsta APMは KinstaでホストされているWordPressサイトやWooCommerceストアのパフォーマンスを監視する目的で設計されました。

WooCommerceサイトにKinsta APMを使用するメリット

WooCommerceサイトのパフォーマンス問題は複数の要因となってオンラインビジネスに大きなダメージを与えます。Kinsta APMを使用することでこれらの問題を防止、または解決できます。Kinsta APMには多くの注目ポイントがありますが、その中からいくつかをかいつまんでご紹介します。

売上や収益の増加

ECサイトの収益においてパフォーマンスは非常に重要ですが、パフォーマンスの良いサイトを維持するには多くのメトリクスとDevOpsスキルを理解する必要があります。Kinsta APMを使用することでサイトの運営者はこの作業を簡単に行えます。したがってKinsta APMの最大のメリットは売上と収益へのインパクトになります。

より良いユーザーエクスペリエンス

ユーザー満足度の計測は簡単ではありません。なぜなら速度やパフォーマンスの問題にぶつかったユーザーは購入に至らないかもしれないからです。さらに悪いことには競合他社のサイトに流れるかもしれません。Kinsta APMのような便利なAPMツールはパフォーマンスの内部分析を提供し、顧客があなたのWooCommerceストアに満足しているかどうかを確認できます。

ブランドイメージへのダメージの抑制

デジタル時代には、言葉はかなり速く伝わります。ユーザーはもはやECサイトが完璧に動作するかどうかを気にしていません。それを当然と思っています。そのため、サイトの速度低下や停止によって処理が中断されれば販売機会を失うだけでなく、ブランドの評判や信頼を失うことになります。Kinsta APMを使用することでサイトのパフォーマンスを最高の状態に維持し、損失の可能性を減らせます。

スタッフの生産性と幸福度の向上

サイトのパフォーマンスが向上すれば、社内スタッフの生産性も向上します。例えば、開発チームはパフォーマンスの問題への対処で多くの時間を費やす必要がありませんし、サポートスタッフは、多くのチケットを管理する必要がありません。マーケティングチームは、より短い時間でより多くのキャンペーンを行えます。サイトのパフォーマンスをうまく調整できれば、誰もがより生産的で幸せな気持ちになります。

イノベーションのための時間の解放

ビジネスの成長を促すために革新的な戦略を試すことは、ECマーケティングの基本の1つです。開発者であれマーケティングスタッフであれ、Kinsta APMのシンプルさはコラボレーションを促進し、効果的なビジネス成長戦略を育成します。また、問題の迅速な解決を可能にし、自信を持って新機能を投入できます。

ホスティングとITインフラのコスト削減

Kinsta APMはパフォーマンスの隠れたボトルネックを特定するため、ホスティングインフラストラクチャを最大限活用できます。Kinsta APMの結果からWooCommerceサイトをチューニングすれば、サイトの拡張性を高められます。さらに問題を起こすプラグイン、拡張機能、サードパーティサービスを特定することで無駄なIT資産を削減できます。

Kinsta APMでWooCommerceのパフォーマンス問題を修正する方法

実際の例を確認し、Kinsta APMを使用してWooCommerceのパフォーマンス問題を解決する方法を探ってみましょう。

Kinsta APMの基本を学ぶ

まずはじめが肝心です。Kinsta APMを使用してWooCommerceサイトのトラブルシューティングを始める前に、さまざまな用語とその内部分析の読み方を学ぶ必要があります。はじめにKinstaAPMナレッジベースを参照してください。

Kinsta APMについてさらに質問がある場合は、KinstaAPM FAQセクションを読んでください。

テストWooCommerceサイトとセットアップ

Kinsta APMは、KinstaでホストされているWordPressサイトでのみ動作します。この記事では、オンラインストアの最も一般的なパフォーマンス問題を再現するために、テスト用のWooCommerceサイトを構築しました。またSSL/TSLハンドシェイクが行われるように実際のドメイン名を使用しました。

以下、テストサイトの詳細です。

  • サーバースタック : Nginx 1.19.4、PHP 7.3.24-3、MariaDB 5.5.5.5
  • WordPressのバージョン: WordPress 5.5.5.3
  • テーマ: Astra Theme 2.6.1
  • 主なプラグイン。WooCommerce 4.7.1、WooCommerce Cart Abandonment Recovery、Kinsta Must-use Plugins、Akismet Anti-spam

また、独自の例を説明するために、カスタムプラグインを使用してサイトを少しカスタマイズしました。以下ではさまざまな状況に対してKinsta APMを使用し、WooCommerceのパフォーマンス問題を解決する方法を見ていきます。

1. WooCommerce APMの実例その1: 決済時のサードパーティAPIコールの遅延

ほとんどのECサイトは、支払いや出荷などの重要なプロセスをサードパーティのサービスに依存しています。また、多くのWooCommerceサイトでは、メールマーケティングにMailchimpMailerLiteのようなサードパーティのプラグインも使用しています。

しかし、サードパーティのサービスにはあなたのWooCommerceサイトのパフォーマンスに大きな影響を与える可能性があります。そして、実際に現在、決済処理に影響を与えているのであれば、もっと深刻に問題を受け止めるべきです。

Stripe APIは昨年、大規模な障害に直面しました。
Stripe APIは昨年、大規模な障害に直面しました。

この実例では、ユーザーがカートに商品を追加するたびに待ち時間が発生していました。時にはサイトが応答するまで5秒以上かかることもありました。これではユーザーはショッピングをやめてしまいます。

Kinsta APMを起動して問題を診断してみましょう。

開始するには、サイトのMyKinstaダッシュボードにアクセスして、監視セクションに移動します。

パフォーマンスの監視セクションの「有効にする」ボタンをクリックして、Kinsta APMがサイトのパフォーマンスメトリクスを収集できるようにします。

MyKinstaダッシュボードでKinsta APMを有効にする
MyKinstaダッシュボードでKinsta APMを有効にする

以前にKinsta APMを有効にしていた場合(ここで紹介したように)、その期間の過去のパフォーマンスデータをチャートと表に表示できます。

Kinsta APMを有効にした後、サイトをテストし、Kinsta APMダッシュボードにパフォーマンスメトリクスが表示されるのを待ちました。

理想的には、データを掘り下げる前に少なくとも5分待ちます。これにより、Kinsta APMは、実行可能な結果を提示するのに十分なパフォーマンスデータを収集します。

Kinsta APMメインダッシュボード画面
Kinsta APMメインダッシュボード画面

有効にする/無効にするボタンの左側にあるドロップダウンメニューを使用すると、Kinsta APMがパフォーマンスメトリクスの分析に使用する期間を変更できます。

Kinsta APMで使用する分析時間の変更
Kinsta APMで使用する分析時間の変更

全体的なトランザクション時間(Overall transaction timeのチャートでは、外部呼び出し(Externalがほとんどの時間を占めていることがわかります。これは、サードパーティのサービスが遅延の原因となっている可能性を示唆しています。

次に、「最も遅いトランザクション」テーブルまでスクロールして、実行に最も時間がかかったリクエストやバックグラウンドタスクを確認します。

最も遅いトランザクションの一覧
最も遅いトランザクションの一覧

URL /single-productへのリクエストが最も時間を要していることがわかります。WooCommerceサイトでは、このエンドポイントは任意の製品ページを参照します。

/single-productのトランザクションをクリックすると、最も遅いトランザクションのサンプル一覧が表示されます。

最も遅いトランザクションのサンプル
最も遅いトランザクションのサンプル

ここで最も遅いトランザクションのサンプルを見ると、5,535.14 msと5秒以上で、予想されるレスポンスタイムをはるかに超えています。このサンプルをクリックして、さらに深く掘り下げてみましょう。

トランザクションのサンプルの詳細
トランザクションのサンプルの詳細

このサンプルのトランザクショントレースのタイムラインが表示されます。このトランザクションで発生したすべてのプロセスの詳細がタイムスタンプ付きで表示されます。

タイムラインを下にスクロールして、最も遅いスパンを見つけてください。

トレースのタイムラインで最も遅いスパンを見つける
トレースのタイムラインで最も遅いスパンを見つける

Kinsta APMは、最も注意すべき時間を赤色で強調表示します。

ここでの注意すべきスパンは slow.payment-api.com update_card_payment です。両方のスパンをクリックすると、完全なスタックトレースやその他の関連情報とともに詳細な概要を見ることができます。

「スパンの詳細」と「スタックトレース」
「スパンの詳細」と「スタックトレース」

スパンの詳細セクションを見ると、外部からのHTTPリクエストであることが推察できます。

スタックトレースのセクションを見ると、この HTTP リクエストの作成に関与するすべてのプロセスを特定できます。ここでは、WC_Form_Handler::add_to_cart_action が実行されていることがわかります。さらに上に行くと、コアではない WordPress スクリプトpayment-api.php も関与していることがわかります。

これを証拠として書き留めます。しかし、もう一つ調査しなければならないスパンがあります。

その詳細を見てみましょう。

プラグインによって実行された PHP スクリプトの「スパンの詳細」
プラグインによって実行された PHP スクリプトの「スパンの詳細」

Kinsta APMはここで最も輝きを見せ、このスパンに関連するすべてのプロセスを掘り下げ、関連するコンテキストを提供してくれます。そしてPayment-apiプラグイン内のPHPスクリプトまたは関数 update_card_paymentが問題であることがわかります。

ついにトラブルシューティングのプロセスをどこから始めればよいか適切な判断を下すための十分な証拠を手に入れました。

私なら診断に従いpayment-apiプラグイン、特にupdate_card_paymentと呼ばれるPHPスクリプトまたは関数を調べます。

あなたやあなたのスタッフにこれらの問題を解決する技術的な専門知識がない場合は、WordPressの開発者を雇って調べてもらうことができます。

次に、プラグインの作者に、応答が非常に遅い支払いAPIを調べるよう連絡します。Kinsta APMは、パフォーマンス問題の根本的な原因を迅速に特定し、正しい解決方向に導くことができます。この知識を使って何を行うかは、あなた次第です。

2. WooCommerce APMの実例その2: 低速なWooCommerce管理者ダッシュボード

オンラインストアのバックエンドのパフォーマンスは、フロントエンドのパフォーマンスと同様に重要です。WooCommerce 管理者ダッシュボードが遅ければ生産性に悪い影響を与える可能性があります。バックエンドが速ければ、日々のタスク管理や顧客からの注文への対応効率が向上します。

WooCommerceダッシュボードが効率的になれば、オンラインストアの成功に必要な、より本質的なこと、たとえばデジタルマーケティング等に取り組めます。

WooCommerce 4.0はスリムなダッシュボードを導入しました
WooCommerce 4.0はスリムなダッシュボードを導入しました

理想的には、バックエンドの最適化はフロントエンドの最適化から始めます。ほとんどの場合、フロントエンドを高速化するとバックエンドのパフォーマンス問題も修正されるためです。Kinsta APMを使用すれば、このような推測に頼る必要がありません。サイト全体の正確なパフォーマンスデータを参照できるため、どのようなパフォーマンス問題も修正できます。

この実例では、管理者やストアマネージャーの見る管理者ダッシュボードの表示が遅くなっています。これでは、オンラインストアの日々の運営には不向きです。

Kinsta APMを起動して、何が問題なのかを確認してみましょう。

ここではKinsta APMを有効にした後、パフォーマンスデータを調査する前に15分以上待ちました。待っている間、通常どおりWooCommerceバックエンドを使用しました。

Kinsta APMのメインダッシュボード画面のパフォーマンスメトリクス
Kinsta APMのメインダッシュボード画面のパフォーマンスメトリクス

全体的なトランザクション時間(Overall transaction timeのチャートを見ると、PHPのプロセスが最も時間を消費しており、次いで、外部呼び出しの順となっています。

最も遅いトランザクションテーブルを見ると、どのリクエストが最も多くの時間を占めているのかがよくわかります。

Kinsta APMで一番遅いトランザクションを探す
Kinsta APMで一番遅いトランザクションを探す

上のグラフから、ほとんどの時間を2つのトランザクションが占有していることは明らかです。/wp-admin/admin-ajax.php/wp-adminです

Admin-Ajaxの使用率が高いことは、WordPressサイトの所有者が直面するパフォーマンス問題の中で最も一般的なものの一つです。このトランザクションをさらに調査してみましょう。

admin-ajax.phpリクエストのトランザクションサンプル
admin-ajax.phpリクエストのトランザクションサンプル

admin-ajax.phpのトランザクションサンプルはすべてほぼ同じ時間です。10秒以上のトランザクション時間は異常です。

一番遅いサンプルを見てみましょう。

admin-ajax.php リクエストの最も遅いトランザクションサンプル
admin-ajax.php リクエストの最も遅いトランザクションサンプル

トランザクショントレースのタイムラインを下にスクロールして、注目すべきスパンを探します。ほとんどの場合、Kinsta APMはスパンを強調表示しますが、今回のように、常にではありません。

トランザクショントレースのタイムラインで最も遅いスパンを見つける
トランザクショントレースのタイムラインで最も遅いスパンを見つける

異常に長い時間の2つのスパン、snail_admin_refresh PHPプロセスとsuspicious-link.com GET外部HTTPリクエストを調べます。

Kinsta APMで最も遅いスパンの詳細を調べる
Kinsta APMで最も遅いスパンの詳細を調べる

スパンの詳細をチェックすると、このPHPプロセスを実行しているプラグインを指しています。ここでは、snail-admin-refresh-noticeプラグインです。このプラグインはわたしが自作したものでいくつかの人気のあるWordPressプラグインのように、WordPressのダッシュボードに迷惑な通知を出力します。

別の遅いスパンのスタックトレースを調査する
別の遅いスパンのスタックトレースを調査する

suspicious-link.comGETスパンのスタックトレースを見ると、同じプラグインに関連していることがわかります。

迷惑なWordPress管理者通知
迷惑なWordPress管理者通知

ここでは、不調の原因が文字通り出力されています。しかし、いつもこうとは限りません。複数のユーザーが同時にWooCommerceダッシュボードを使用する場合、サーバーのリソースにさらに負荷をかけることになります。一部のユーザーはダッシュボードにアクセスできないかもしれません。

Kinsta APMを使用することでパフォーマンス問題の根本原因を迅速に特定できるため、WooCommerceダッシュボードのパフォーマンスを常に最高の状態に保つことができます。

3. WooCommerce APMの実例その3: 低速なショップページと商品ページ

ユーザーは読み込みの遅いページを待ちません。それがショップや商品のページであればなおさらです。Googleのユーザビリティ調査によると、ユーザーは応答に2.5秒以上かかるとそのページから離脱します。

WooCommerceテストサイトの商品ページ
WooCommerceテストサイトの商品ページ

低速なWooCommerceのショップや商品ページには多くの原因があります。

  • ショップページで一度に多くの商品を読み込んでいる。
  • 最適化していない画像やスクリプト、サードパーティからのリクエストなどで商品ページのサイズが肥大している。
  • リクエストのたびにショップや商品ページがキャッシュできない大量の動的コンテンツをロードしている。
  • 追加機能(SNSシェアカウンター、関連商品など)のためにプラグインやテーマが各商品ページにカスタムスクリプトを挿入している。

この例では、WooCommerceテストサイトで低速な商品ページを診断します。このページはレスポンスに異常に時間がかかっており、通常はコンバージョン率に悲惨な結果をもたらします。

Kinsta APMを有効にして、いくつかの製品ページを読み込んでみましょう。

サイトのパフォーマンスメトリクスを確認する前に、最低でも5分はテストします。

MySQL関連のトランザクション時間が急激に増加している
MySQL関連のトランザクション時間が急激に増加している

全体的なトランザクション時間(Overall transaction timeのチャートを見ると、MySQL クエリにかかる時間が大幅に増加していることがわかります。タイムスタンプを見ると、すべて最近のものです。

最近のトランザクションにフォーカスするため期間を短くしてみましょう。これで現在の診断から古いパフォーマンスメトリクスをすべて除外できます。

Kinsta APMで短い期間を選択する
Kinsta APMで短い期間を選択する

では、最も遅いトランザクションテーブルを見て、どのリクエストが最も時間を要するかを見てみましょう。

個々の製品ページへのリクエストが最も遅い
個々の製品ページへのリクエストが最も遅い

予想通り、/single-productトランザクションは合計時間の大部分を占めています。WooCommerceは、ユーザーが個々の商品ページにアクセスするとこのリクエストを発行します。

その最大実行時間(136,417.63ms)は異常に高い数値です。

調べてみましょう。

個々の商品ページのリクエストのトランザクションサンプル
個々の商品ページのリクエストのトランザクションサンプル

一番遅いサンプルをクリックして検査します。トランザクショントレースタイムラインをスクロールすると、このパフォーマンス問題の原因がわかります。

問題を起こしているスパンが太字の赤字で強調されている
問題を起こしているスパンが太字の赤字で強調されている

Kinsta APMでは問題のスパンが鮮明な赤で強調されています。アイコンを見るとデータベースクエリと推測できます。

低速なデータベースクエリの「スパンの詳細」と「スタックトレース」
低速なデータベースクエリの「スパンの詳細」と「スタックトレース」

Kinsta APMはこのスパンのスタックトレースを分析して、高負荷なデータベースクエリを生成しているプラグインを特定します。

ここではプラグインwoocommerce-related-productsがそれです。このプラグインは、様々な条件に基づいて商品ページごとに、関連商品のスライダーを動的に生成するWooCommerce拡張機能です。

商品ページの「関連商品」スライダー
商品ページの「関連商品」スライダー

スパンの詳細の中に、このパフォーマンス問題をシミュレートするためにわたしがWooCommerce拡張機能に挿入したデータベースステートメントも見ることができます。

数百(または数千)の商品を販売している大規模なWooCommerceストアでは、新しい機能を導入したり、既存の機能を更新すると、予期しないパフォーマンス問題が発生する場合があります。上で説明したような問題は非常に一般的です。Kinsta APMを使用すると、これらの問題を簡単に診断し、修正することができます。

まとめ

私たちは、24時間365日ほぼ何にでもアクセスできる高速化した世界に住んでいます。小規模なビジネスであれ、大きな企業であれ、WordPressとWooCommerceを使えば、オンラインでの販売を簡単に始められます。そして、両方に対応した高速なテーマ(高速 WordPress themesで高速なWooCommerceテーマ)を見つけることができます。

ユーザーエクスペリエンスはオンラインストアの成功の鍵であり、それは主にパフォーマンスに依存しています。しかし、この記事で見たようにWooCommerceストアのパフォーマンス監視は困難です。

この記事では、Kinsta APMを使用して、時間のかかるAPI呼び出し、低速なダッシュボード、低速なデータベースクエリなど、WooCommerceのパフォーマンスの問題についての解決方法を学びました。Kinsta APMでは、推測による作業を除外してパフォーマンスの問題を追跡し、処理中断を最小限に抑えて、迅速に問題を解決できます。

今すぐビジネスにKinsta APMを活用して、今日の競争の激しい市場で大きな優位性を獲得しましょう。

Salman Ravoof Kinsta

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.