ツールを使用してパフォーマンスを測定する

Sam Dutton

パフォーマンスと復元性に優れたサイトを低データ費用で構築するには、いくつかの重要な目標があります。

目標ごとに監査が必要です。

ウェブサイトを監査するためのさまざまなツールや手法があります。

• システム ツール
• 組み込みのブラウザツール
• ブラウザの拡張機能
• オンライン テスト アプリケーション
• エミュレーション ツール
• 分析
• サーバーとビジネス システムから提供される指標
• 画面と動画の録画
• 手動テスト

ここでは、監査のタイプごとに適切なアプローチについて説明します。

リソース リクエストの記録: 数、サイズ、タイプ、タイミング

サイトを監査する際は、まずブラウザのネットワーク ツールでページをチェックすることをおすすめします。 設定方法がわからない場合は、Chrome DevTools のネットワーク パネルのスタートガイドをご覧ください。 Firefox、Safari、Internet Explorer、Edge でも同様のツールを利用できます。

変更を加える前に、必ず結果を記録しておいてください。ネットワーク リクエストの場合は、スクリーンショットを確認するだけで簡単に行えます。また、JSON ファイルとしてプロファイル データを保存することもできます。詳しくは、テスト結果を保存して共有する方法をご覧ください。

ネットワーク使用状況の監査を開始する前に、ブラウザ キャッシュを無効にして、初回読み込みのパフォーマンスに関する正確な統計情報を取得してください。すでに Service Worker を介してキャッシュ保存を行っている場合は、Cache API ストレージを消去します。ブラウザのキャッシュの無効化や、以前にキャッシュに保存されたエントリの削除について心配する必要がない場合は、シークレット（非公開）ウィンドウを使用することをおすすめします。

ブラウザ ツールで確認する必要がある主な機能と指標は次のとおりです。

• 負荷のパフォーマンス: Lighthouse で負荷の指標の概要を確認できます。Addy Osmani は、ページの読み込みに関する主なユーザー モーメントの優れたサマリーを書いています。
• リソース、メモリ使用量の読み込みと解析用のタイムライン イベント。さらに分析したい場合は、メモリと JavaScript のプロファイリングを実行してください。
• ページの合計重量とファイル数。
• JavaScript ファイルの数と重み。
• 特にサイズの大きい個々の JavaScript ファイル（100 KB 以上）。
• 使用されていない JavaScript。これは、Chrome のカバレッジ ツールを使用して確認できます。
• 画像ファイルの合計数と重量。
• 特にサイズの大きい個々の画像ファイル。
• 画像形式: JPEG または SVG を使用できる PNG はありますか。WebP はフォールバックで使用されますか？
• レスポンシブ画像手法（srcset など）を使用するかどうか。
• HTML ファイルサイズ。
• CSS ファイルの合計数と重量です。
• 使用されていない CSS。（Chrome の場合はカバレッジ パネルを使用します）。
• ウェブフォント（アイコン フォントを含む）など、他のアセットに問題がないか確認します。
• DevTools のタイムラインで、ページ読み込みをブロックしているものがないか確認します。

高速 Wi-Fi または高速のモバイル接続で作業している場合は、低帯域幅、高レイテンシのエミュレーションでテストします。必ずモバイルとパソコンの両方でテストしてください。一部のサイトでは、UA スニッフィングを使用して、デバイスごとに異なるアセットやレイアウトを配信しています。デバイスのシミュレーションだけでなく、リモート デバッグを使用して実際のハードウェアでのテストが必要になる場合があります。

メモリと CPU の負荷を確認する

変更を行う前に、メモリと CPU の使用量を記録しておいてください。

Chrome では、[ウィンドウ] メニューからタスク マネージャーにアクセスできます。これにより、ウェブページの要件を簡単に確認できます。

最初と後続の読み込みのパフォーマンスをテストする

Lighthouse、WebPagetest、Pagespeed Insights は、速度、データ費用、リソース使用量の分析に役立ちます。WebPagetest は、静的コンテンツのキャッシュ保存、最初のバイトまでの時間、サイトで CDN が効果的に使用されているかどうかもチェックします。

結果を保存する

• WebPagetest: テスト結果にはそれぞれ独自の URL があります。
• Pagespeed Insights: オンラインの Pagespeed Insights ツールに、実際のパフォーマンス データをハイライト表示する Chrome ユーザー エクスペリエンス レポートデータが追加されました。
• Lighthouse: 次のダウンロード ボタンをクリックして、Chrome DevTools の監査パネルからレポートを保存します。

  

プログレッシブ ウェブアプリの主な要件をテストする

Lighthouse を使用すると、セキュリティ、機能、ユーザー補助機能、パフォーマンス、検索エンジンのパフォーマンスをテストできます。特に Lighthouse では、サイトで Service Worker やウェブアプリ マニフェストなどの PWA 機能が正常に実装されているかどうかを確認します。

また、サイトが許容可能なオフライン エクスペリエンスを提供できるかどうかもテストします。

Lighthouse レポートは JSON 形式でダウンロードできます。また、Lighthouse Chrome 拡張機能を使用している場合は、GitHub Gist としてレポートを共有できます。共有ボタンをクリックして [ビューアで開く] を選択し、新しいウィンドウで共有ボタンをクリックし、Gist として保存します。

分析、イベント トラッキング、ビジネス指標を使用して、実際のパフォーマンスを追跡

可能であれば、変更を適用する前に、直帰率、ページ滞在時間、離脱ページなど、ビジネス要件に関連するすべてのアナリティクス データを記録しておいてください。

可能であれば、変更後に結果を比較できるように、影響を受ける可能性のあるビジネス指標と技術指標を記録します。たとえば、e コマースサイトでは分単位の注文数をトラッキングしたり、ストレステストと持久力テストの統計情報を記録したりできます。ページの重みとリソース リクエストを減らすと、バックエンドのストレージ費用、CPU 要件、サービス提供費用、復元力が向上する可能性があります。

アナリティクスが実装されていない場合は、今こそ導入すべきです。サイトが機能しているかどうかを最終的に判断するのは、ビジネス指標と分析です。必要に応じて、ボタンのクリックや動画の再生などのユーザー アクションのイベント トラッキングを組み込みます。また、ユーザーが「コンバージョン」に到達するまでの経路を示す目標フロー分析を実装することもできます。

Google アナリティクスのサイトの速度を注視すると、パフォーマンス指標とビジネス指標の相関関係を確認できます。たとえば「ホームページの読み込み速度」は「ホームページ経由でアクセスした場合の販売につながった」などなどです。

Google アナリティクスは Navigation Timing API のデータを使用します。

JavaScript パフォーマンス API のいずれかまたは独自の指標を使用してデータを記録できます。次に例を示します。

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

また、ReportingObserver を使用して、ブラウザのサポート終了と介入の警告を確認できます。 これは、実際のユーザーから実際のライブ測定値を取得するための多くの API の 1 つです。

実体験: 画面と動画の録画

モバイルとパソコンでページ読み込みの動画を作成します。これは、高フレームレートやタイマー ディスプレイを追加するとさらに効果的です。

スクリーンキャストを保存することもできます。Android、iOS、パソコンのプラットフォーム用のスクリーンキャスト録画アプリが多数あります（同じことを行うスクリプトもあります）。

動画録画ページの読み込みは、WebPagetest のフィルムストリップ ビューや Chrome DevTools のスクリーンショットのキャプチャと同様に機能します。ページ コンポーネントの読み込み速度の実世界の記録（速い部分と遅い部分）を確認できます。録画やスクリーンキャストを保存して、後で改善されたものと比較できます。

導入前と導入後の比較は、改善点を示すのに効果的な方法です。

他には？

関連する場合は、ウェブ肥大化スコアを取得します。これは楽しいテストですが、コードの肥大化を実証したり、改善点を示したりするのに説得力のある方法でもあります。

以下に示すサイトのコストは？では、さまざまな地域でサイトを読み込む際の金銭的なコストについて、おおまかに説明しています。

他にも多くのスタンドアロンおよびオンライン ツールを利用できます。perf.rocks/tools をご覧ください。