実例で見るKinsta APM活用法─WooCommerceサイト表示速度の改善

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

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

この記事では、ECサイトにおけるさまざまなコンポーネントの説明をしながら、ECサイトのパフォーマンスの監視にAPMが有用である理由、そして、Kinsta APMを使用してWooCommerceサイトのパフォーマンスを診断する方法をご紹介します。

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

それでは本題に進みましょう。

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

ECサイトのパフォーマンスを引き上げるには、構成要素のすべてに気を配る必要があります。ホスティング基盤やECサイト環境からサービスの統合、決済処理まで、すべてが重要です。

クラフトビールからドローンのトレーニングコースの販売まで、WooCommercのようなECサイトプラットフォームを利用すれば、オンラインストアを素早く構築することができます。

また、様々な拡張機能を使うことで、多くの機能や性能をシンプルに管理可能です。

構成要素が多ければ多いほど、問題が発生した際にエラーの起きた場所を特定するのが難しくなります。さらにこの複雑さにより、パフォーマンスと可用性の問題が増加する傾向にあります。迅速にパフォーマンス面での問題に対応できないと、最終的には、顧客に皺寄せが出ることになるでしょう。

こうした問題はアプリケーションパフォーマンス監視ツールを使用することで対処できます。

Kinstaでは、Kinsta APMをご用意しています。KinstaでホストするWordPressサイトやWooCommerceストアのパフォーマンスを監視するのに便利です。

ユーザーの46%はパフォーマンスに劣るサイトを再訪しない。ECサイトの評判と収益💰の向上に重要なステップがパフォーマンスの監視。便利なAPMツールをご紹介⬇️ クリックでつぶやく

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サイトのトラブルシューティングを始める前に、さまざまな用語とその意味を知っておく必要があります。Kinsta APMについてのページもご参照ください。

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 MU（必須）プラグイン、Akismet Anti-spam

また、個別の例を説明するために、カスタムプラグインを使用して適宜サイトに変更を加えています。それでは、さまざまな状況に対してKinsta APMを使用し、WooCommerceのパフォーマンス面での問題を特定（解決につなげる）方法を見ていきます。

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

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

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

上の例では、ユーザーがカートに商品を追加するたびに待ち時間が発生していました。時にはサイトが応答するまで5秒以上かかること。これではユーザーは買い物をやめてしまいます。

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

MyKinstaで該当するサイトを選択して、「監視」セクションに移動します。

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

以前にKinsta APMを有効にしていれば（この記事の説明にあるように）、その期間の過去のパフォーマンスデータを確認することができます。

Kinsta APMを有効にし、サイトをテストし、Kinsta APMの画面にデータが表示されるのを待ちましょう。

理想的には、少なくとも5分ほど待つことをおすすめします。これにより、Kinsta APMでのデータ収集が分析に十分な量になります。

画面右上にある「監視時間の変更」ボタンから、Kinsta APMによる監視の期間を変更することができます。

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

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

「/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」も関与していることがわかります。

この情報を書き留めておきましょう。さらに、もう一つ調査しておきたいスパンがあります。

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

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の操作性を高めることは必須の施策です。これにより、オンラインストアの成功に必要な、デジタルマーケティングといった戦略に本腰を入れることができます。

理想的には、バックエンドの最適化はフロントエンドの最適化から始めることをおすすめします。ほとんどの場合、フロントエンドを高速化するとバックエンドのパフォーマンスの問題も解消するものです。Kinsta APMを使用すれば、勘に頼る必要はありません。サイト全体の正確なパフォーマンスデータを確認し、それに基づいて、具体的な解決策を考案することができます。

この例では、管理者やストアマネージャーが利用する管理画面の表示が遅くなっています。日々のサイトの運営が捗るとは決して言えません。

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

Kinsta APMを有効にし、15分以上待ってからパフォーマンスデータの確認を行いました。待つ間には、通常どおりWooCommerceのバックエンドを使用しています。

「合計トランザクション時間」を見ると、PHPプロセスが最も時間を消費していることがわかり、次いで、外部呼び出しの順となっています。

「最も遅いトランザクション」では、どのリクエストに多くの時間がかかっているのかがよくわかります。

上のデータから、2つのトランザクションがネックになっていることがすぐにわかります。「/wp-admin/admin-ajax.php」と「/wp-admin」です。

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

「admin-ajax.php」のトランザクションのすべてに、ほぼ同じだけの時間がかかっています。10秒以上のトランザクションは異常なまでの遅延です。

中でも一番遅いものを見てみましょう。

「トランザクショントレースのタイムライン」を下にスクロールして、気になるスパンを探します。ほとんどの場合、Kinsta APMでは突出スパンが強調表示されますが（今回のように）そうでないこともあります。

異常に時間のかかっている2つのスパンが目に留まります。「snail_admin_refresh」というPHPプロセスと「suspicious-link.com GET」という外部HTTPリクエストを調べてみましょう。

スパンの詳細をチェックすると、このPHPプロセスを実行しているプラグインがわかります。ここでは「snail-admin-refresh-notice」というものです。このプラグインは実は私が、今回のテストのために自作したもので、人気のWordPressプラグインでも決して無縁とは言えない、迷惑な通知を出力する仕様になっています。

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

ここでは文字通り「迷惑」な通知が表示されています。しかし、これだけ正直であるとは限らず、さらに、複数のユーザーが同時にWooCommerceを使用すると、サーバーのリソースにより大きな負荷をかけることになります。一部のユーザーは管理画面にアクセスすることすらできなくなるかもしれません。

Kinsta APMを使用することでパフォーマンス面での問題の根本にある原因を素早く特定し、そのデータをWooCommerce管理画面のスピードアップに役立てることが可能です。

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

買い物客は、ページの読み込み遅延をいちいち待ってはくれません。一般的なサイトでなくECや商品ページであればなおさらです。Googleのユーザビリティ調査によると、応答に2.5秒以上かかると、利用者の多くはそのページから離脱するとのこと。

WooCommerceのショップや商品ページで遅延が発生する原因は様々です。

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

この例では、WooCommerceテストサイトで表示に時間のかかっている商品ページを診断します。レスポンスの遅れは、通常コンバージョン率に大きな悪影響をもたらします。

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

サイトのパフォーマンスデータを確認する前に、最低でも5分は待つことをおすすめします。

「合計トランザクション時間」を見ると、MySQL クエリにかかる時間が大幅に増加していることがわかります。タイムスタンプを見ると、すべて最近のものです。

最近のトランザクションに焦点を当てるために、対象の期間を短くしてみましょう。これで前のデータを取り除いて表示することができます。

では、「最も遅いトランザクション」を見て、どのリクエストに最も時間がかかっているか確認します。

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

その最大実行時間（136,417.63ms）は異常に高い数値になっています。

もう少し詳しく調べてみましょう。

一番遅い例をクリックして中身を確認します。「トランザクショントレースのタイムライン」をスクロールしていくと、パフォーマンスの問題の原因がわかります。

Kinsta APMの便利な機能として（先に触れたように）問題となっているスパンが赤で表示されます。アイコンを見るとデータベースクエリと推測できます。

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

ここで問題となっているのは「woocommerce-related-products」というプラグインであることがわかります。このプラグインは、様々な条件に基づいて商品ページごとに、関連商品のスライダーを動的に生成するWooCommerce拡張機能です。

「スパンの詳細」では、このパフォーマンスの問題を再現するために私自身がWooCommerce拡張機能に挿入したデータベースステートメントも確認できます。

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

ECサイトのパフォーマンスに問題があると、すぐに顧客は離れていく😬 そこでAPMをフル活用しサイトの監視をするのがおすすめ✅ クリックでつぶやく

まとめ

ネットを使ってあらゆる事業を素早く開始できる世の中です。物品の販売も例外ではありません。規模に関わらず、WordPressとWooCommerceを使って、すぐにECサイトを立ち上げることができます。高速なテーマ（高速 WordPressテーマ、WooCommerceテーマ）も利用可能です。

ユーザーエクスペリエンスはオンラインストア成功の鍵。そしてこれは、スピードの重要性を意味します。WooCommerceストアでパフォーマンスの問題が発生することは、決して珍しくありません。

今回の記事では、Kinsta APMを使用して、API呼び出し、管理画面、データベースクエリに関係した遅延など、WooCommerceのパフォーマンスの問題への対処決方法をご紹介しました。Kinsta APMを使うだけで、あれこれ予想することなく、データに基づいたトラブルシューティングが行えます。

今すぐKinsta APMを活用して、競争の激しい市場で勝ち残りましょう。