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

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 の [Audit] パネルで、ダウンロード ボタン（

  

  ）をクリックしてレポートを保存します。

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

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

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

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

アナリティクス、イベント トラッキング、ビジネス指標を使用して、実際のパフォーマンスをトラッキングする

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

可能であれば、影響を受ける可能性のあるビジネス指標と技術指標を記録し、変更後の結果と比較できるようにします。たとえば、e コマース サイトでは、1 分あたりの注文数を追跡したり、ストレス テストや耐久性テストの統計情報を記録したりできます。ページの重量とリソース リクエストを削減すると、バックエンド ストレージ コスト、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 のスクリーンショットのキャプチャとよく似ています。ページ コンポーネントの読み込み速度（速いコンポーネントと遅いコンポーネント）の実際の記録が得られます。動画の録画とスクリーンキャストを保存して、後で改善した内容と比較できます。

改善を示すには、ビフォー＆アフターを並べて比較するのが効果的です。

他には？

必要に応じて、Web Bloat Score を取得します。これは楽しいテストですが、コードの肥大化を示す、または改善したことを示す説得力のある方法にもなります。

下記の What Does My Site Cost? では、さまざまな地域でサイトを読み込む際の費用の概算を確認できます。

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