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

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

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

目的 それはなぜでしょうか? テスト対象
プライバシー、セキュリティ、データの整合性を確保し、API を強力に利用できます HTTPS を使用する理由 サイトのすべてのページ、ルート、アセットに HTTPS が実装されています。
読み込みパフォーマンスを改善する 読み込みに 3 秒以上かかるサイトからは、53% のユーザーが離脱します。 非同期または遅延可能な JavaScript と CSS。インタラクティブになるまでの時間とペイロード サイズの目標を設定します(3G での TTI など)。パフォーマンス予算を設定する
ページを軽量化 • データプランに上限があるユーザーのデータ費用を削減 • ウェブアプリのストレージ要件を減らす(特に低スペックのデバイスのユーザーには重要) • ホスティングと配信のコストを削減する • 配信パフォーマンス、信頼性、復元力を高める ページの重量の予算を設定します(最初の読み込みは 400 KB 未満など)。負荷の高い JavaScript がないか確認します。ファイルサイズを確認して、肥大化した画像、メディア、HTML、CSS、JavaScript がないか確認します。遅延読み込み可能な画像を見つけ、カバレッジ ツールを使用して未使用のコードを確認します。
リソース リクエストを削減する • レイテンシの問題を軽減 • サービング コストを削減 • サービングのパフォーマンス、信頼性、復元力を向上させる あらゆる種類のリソースに対する過剰なリクエストや不要なリクエストを探します。たとえば、繰り返し読み込まれるファイル、複数のバージョンで読み込まれる JavaScript、使用されない CSS、まったく表示されない(または遅延読み込みされる可能性がある)画像などが該当します。
メモリ使用量を最適化する 特にモバイル デバイスでは、メモリが新たなボトルネックになる可能性がある Chrome タスク マネージャを使用して、ホームページの読み込み時やサイトの他の機能の使用時に、サイトのメモリ使用量を他のサイトと比較します。
CPU 負荷を軽減する モバイル デバイスの CPU は限られている(特に低スペックのデバイス) 負荷の高い JavaScript がないか確認します。使用していない JavaScript や CSS を見つけるには、カバレッジ ツールを使用します。 DOM サイズの過剰や、初回読み込み時に不要に実行されるスクリプトを確認します。複数のバージョンで読み込まれている JavaScript や、軽微なリファクタリングで回避できるライブラリを探します。

ウェブサイトの監査には、さまざまなツールと手法が用意されています。

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

以下では、各タイプの監査に適したアプローチについて説明します。

リソース リクエスト(数、サイズ、タイプ、タイミング)を記録する

サイトの監査は、ブラウザのネットワーク ツールでページを確認することをおすすめします。 方法がわからない場合は、Chrome DevTools のネットワーク ペインのスタートガイドをご覧ください。同様のツールは、FirefoxSafariInternet ExplorerEdge でも利用できます。

変更を加える前に、必ず結果を記録してください。ネットワーク リクエストの場合は、スクリーンショットのように簡単な方法で記録できます。プロファイル データを 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 では、[ウィンドウ] メニューからタスク マネージャーにアクセスできます。これにより ウェブページの要件を 簡単に確認できます

開いている 4 つのブラウザタブのメモリと CPU の使用率を表示している Chrome タスク マネージャー
Chrome のタスク マネージャー - メモリと CPU の大量消費に注意

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

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

結果を保存する

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

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

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

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

Chrome の Lighthouse レポートを gist としてエクスポートする方法を示すスクリーンショット
Lighthouse Chrome 拡張機能から gist にレポートをエクスポートする - [共有] ボタンをクリックします。

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

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

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

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

Google アナリティクスのサイト速度をチェックして、パフォーマンス指標とビジネス指標の相関を確認できます。たとえば、「ホームページの読み込みにかかる時間はどれくらいですか?」と「ホームページからアクセスしたユーザーは購入に至りましたか?」などです。

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 を取得します。これは楽しいテストですが、コードの肥大化を実証したり、改良を行ったことを示すために有効な手段にもなります。

サイトのコストはいくらですか?(下記を参照)は、サイトを読み込む際のコストを地域ごとに大まかに把握したものです。

whatdoesmysitecost.com のスクリーンショット

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