パフォーマンスを向上させるには何を測定すればよいですか。

購入の目標到達プロセスの各段階におけるパフォーマンスを測定するための戦略。

Martin Schierle

Twitter GitHub

購入の目標到達プロセスの各ステップは、それぞれに異なる方法でパフォーマンスの問題を引き起こすため、異なる測定と最適化が必要です。

コンバージョン プロセス。

このガイドでは、各ステップの測定方法について説明します。そのためには、ラボとフィールド データを確認することをおすすめします。

ラボデータ: Lighthouse などのツールを使用し、ローカルでテストを実行して収集されます。これにより、管理された安定した環境を介して、ウェブサイトのパフォーマンスの推移や競合他社との比較が可能になりますが、実際のユーザー エクスペリエンスとは一致しない場合があります。

フィールド データは、実際のユーザーから分析によって収集されるため、ユーザーの経験を表します。しかし、長期的な比較や競合他社との比較は容易ではありません。ネットワーク接続やスマートフォンのハードウェアは時間の経過とともに進化し、ユーザー層が異なればデバイスも異なるため、フィールド データとの比較は困難です。現場でのパフォーマンスの測定もご覧ください。

全体像を把握するには、両方のデータソースが必要です。以下のセクションでは、ファネル全体で関連するさまざまなパフォーマンス マークに関するラボとフィールドのデータを収集する方法について説明します。

発見

見つけやすさを重視した最適化とは、新規ユーザーが獲得する最初の読み込みを重視するだけでなく、検索やソーシャル クローラーも最適化することを意味します。最初の読み込みのラボデータは Lighthouse で簡単に取得できます。また、フィールド データ（少なくとも Chrome の場合）は Chrome UX レポートからすぐに取得できます。この 2 つの便利な組み合わせは、PageSpeed Insights で確認できます。また、フィールドから関連する指標を追跡する必要があります。実際のユーザーのデバイスでこれらの指標を測定するで概要を確認してください。

ユーザーの視点から見て、最も重要な指標は次のとおりです。

• First Contentful Paint（FCP）: ユーザーが空白の画面を凝視した時間。この段階では、進捗を確認できないため、ほとんどのユーザーが直帰します。
• First Meaningful Paint（FMP）: ユーザーが求めるメイン コンテンツが表示され始めたとき。多くの場合これがヒーロー画像になりますが、ランディング ページでは [購入] ボタンなどの行動を促すフレーズになっている場合もあります。これは、ユーザーが明確な意図を持って（ターゲットを絞った広告キャンペーンなどを通じて）到着している可能性があるためです。
• First Input Delay（FID）: ウェブサイトがユーザーの初回入力に反応するために必要な時間。過度の JavaScript などのアセット読み込みの問題により、これがブロックされ、タップやクリックの失敗、誤った入力、ページの放棄につながる可能性があります。

他にも確認できる指標がありますが、これらは基本的な基準となります。また、直帰率、コンバージョン、ユーザー エンゲージメントを捕捉して、それらを適切に設定できるようにします。

エンゲージメントとコンバージョン

ユーザーはランディング ページを初めて読み込んだ後、サイト内を移動してコンバージョンにつなげます。

このフェーズでは、ナビゲーションとインタラクションを高速でレスポンシブにすることが重要です。残念ながら、ユーザーはページ内を移動するさまざまな経路をユーザーが辿るので、フィールド内のナビゲーション イベントやインタラクション イベントの完全なフローを測定することは容易ではありません。そのため、ラボテストのフローをスクリプト化して測定し、コンバージョンまたはコンバージョンのサブ目標に到達するまでに要する時間（「Time-to-Action」）を測定し、パフォーマンスの推移や競合他社との比較を行うことをおすすめします。

これには、次の 2 つの方法があります。

WebPageTest

WebPageTest には、非常に柔軟なスクリプト ソリューションが用意されています。基本的な考え方は次のとおりです。

• navigate コマンドを使用して、フローのページ間を移動するように WebPageTest に指示します。
• 必要に応じて、clickAndWait コマンドでボタンのクリックをスクリプトで記述し、setValue でテキスト フィールドに入力します。シングルページ アプリケーションのテストでは、最初の以降のすべてのステップで、navigate コマンドではなく clickAndWait を使用します。これは、navigate が軽量の仮想ページ読み込みではなく、完全読み込みを実行するためです。
• combineSteps で、分析のフローのさまざまなステップを組み合わせて、フロー全体の単一の結果レポートを生成するようにしてください。

このようなスクリプトは次のようになります。

combineSteps
navigate    https://www.store.google.com/landingpage
navigate    https://www.store.google.com/productpage
clickAndWait    innerText=Buy Now
navigate    https://www.store.google.com/basket
navigate    https://www.store.google.com/checkout

このようなスクリプトを設定すると、パフォーマンスの推移を簡単に測定して比較できます。これは、WebPageTest API で自動化することもできます。

操り人形師

スクリプト テストのもう 1 つの優れたオプションは、ヘッドレス Chrome を使用することです。これは、Node API の Puppeteer で制御できます。一般的には、Puppeteer を使用してブラウザを起動し、goto 関数を使用してランディング ページに移動し、JavaScript を挿入してフィールドまたはクリックボタンを埋め、必要に応じてさらに goto 呼び出しを経てファネルを進めます。

指標として、フローの継続時間を直接測定できますが、フローの個々の負荷の FCP、FMP、TTI の値を合計することもできます。Puppeteer を使用してウェブサイトのパフォーマンスをテストするでは、Puppeteer を介してパフォーマンス指標を取得する方法の概要を説明しています。Node スクリプトを簡略化すると、次のようになります。

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const start = performance.now();
  await page.goto('https://www.store.google.com/landingpage');
  await page.goto('https://www.store.google.com/productpage');
  // click the buy button, which triggers overlay basket
  await page.click('#buy_btn');
  // wait until basket overlay is shown
  await page.waitFor('#close_btn');
  await page.goto('https://www.store.google.com/basket');
  await page.goto('https://www.store.google.com/checkout');
  console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds');
  await browser.close();
})();

このスクリプトは簡単に自動化できます。また、ビルドプロセスやパフォーマンス バジェットの一部にし、定期的にモニタリングすることもできます。

リエンゲージメント

ユーザーはさまざまな時間間隔でサイトを再訪します。経過時間によっては、ブラウザでキャッシュされているウェブサイトのリソースが少なくなり、より多くのネットワーク リクエストが必要になる可能性があります。そのため、臨床試験で再訪問によるパフォーマンスの差異を推定するのは困難です。ただし、この点には注意する必要があります。再訪問のための優れたラボテストツールは、WebPageTest です。WebPageTest には、直接訪問するための専用のオプションが用意されています。

Webpagetest には、最初の読み込みと繰り返し読み込みをテストするオプションが用意されています

実際の訪問でのパフォーマンスを的確に把握するには、任意の分析パッケージを使用して、ユーザータイプごとにパフォーマンス指標をセグメント化します。以下に、Google アナリティクスのレポートの例を示します。

Google アナリティクスのカスタム レポートを使用すると、新規ユーザーとリピーターの速度指標に関するレポートを作成できます。

このようなレポートでは、新規ユーザーとリピーターのページ読み込み時間も確認できます。

まとめ

このガイドでは、フィールド テストとラボテストによって、初回読み込み、フロー、繰り返し読み込みを測定する方法について説明しました。目標到達プロセスのさまざまなステップを適宜最適化して、発見（初回読み込み）、エンゲージメント（ナビゲーションとフロー）、再エンゲージメント（リピート読み込み）を最大化します。