パフォーマンスを監査する

Sam Dutton

プログレッシブ ウェブアプリ（PWA）技術がサイトにもたらすメリットについては、すでにご存じかもしれません。サイトのパフォーマンスの基盤を改善せずに、PWA 機能を導入したくなるかもしれません。しかし、JavaScript のブロックや画像の肥大化の問題は、PWA の機能では解決できません。

まず、サイト監査を実施します。これは、うまくいっている点と改善できる点を客観的に評価するものです。

サイトやアプリを監査することで、復元力とパフォーマンスに優れたエクスペリエンスを構築できます。また、承認を最小限に抑えて実装できるクイック ウィンをハイライトします。監査により、データドリブン開発のベースラインが作成されます。変更によって状況は改善されたか？競合他社と比較して、自社サイトはどのような状況ですか？優先的に取り組むべき指標を把握し、改善後に自慢できる具体的な証拠を得ることができます。

5 分で

ホームページで Lighthouse を実行し、レポートデータを保存します。パフォーマンス、ユーザー補助機能、セキュリティ、SEO の改善に関する定量化されたベースラインと ToDo リストを取得できます。

30 分しかありません

Lighthouse はおそらく最適な出発点ですが、時間があれば他のツールの結果も記録できます。

  • Chrome DevTools の [Security] パネル: HTTPS の使用状況。
  • Chrome DevTools の [Network requests] パネル: HTML、CSS、JavaScript、画像、フォントなどのファイルの読み込みタイミング、リソース サイズ、リクエスト数。
  • Chrome タスク マネージャー: サイトが他のアプリよりも多くの CPU やメモリを定期的に使用している場合は、メモリリーク、タスクの実行、リソースの読み込みに関する問題を修正する必要があるかもしれません。
  • WebPagetest: キャッシュ保存、最初のバイトまでの時間、CDN の使用状況。
  • PageSpeed Insights: 読み込みパフォーマンス、データ費用、リソース使用量。実際のパフォーマンス統計情報をハイライト表示する Chrome ユーザー エクスペリエンス レポートのデータも含まれます。

初めてサイトにアクセスするユーザーの視点でウェブサイトをテストしてください。シークレット（プライベート）ウィンドウでサイトを開くか、ブラウザのツールを使用してキャッシュ保存を無効にし、ストレージをクリアします。これにより、すべてのアセットがローカル キャッシュではなくネットワークから取得されるため、初回読み込みのパフォーマンスを正確に把握できます。

実環境でのテストに勝るものはありません。ユーザーを代表するデバイスと接続でサイトをテストし、主観的なエクスペリエンスの記録を保管してください。

ツールに戸惑っている場合

スピード ツールについてをご覧ください。

上記以外の場合は、Lighthouse を使用して以下を確認します。

対象ユーザー、関係者、コンテキスト

リファクタリングの優先度は、対象ユーザー、コンテンツ、機能によって異なります。サイトにアクセスしているユーザーなぜ、どのように使用するのか？パフォーマンス バジェットとは何ですか？

関係者は誰で、優先事項は何ですか？これは、監査データの構造化、提示、共有の方法に影響します。

サイト全体を監査できない場合は、ページ分析を確認して、重点的に取り組むべき箇所を把握します。直帰率が高い、ページ滞在時間が短い、予期しない離脱ページがある場合は、どこから始めるべきかを示す良い指標となります。同様に、ホスティング費用、広告のクリック数、コンバージョン数などのビジネス指標も同様です。関係者から、どのデータが重要なのかについての概要を把握します。

テスト、記録、修正、繰り返し

変更を加える前にサイトの状態を記録して、問題を発見し、改善や回帰の出発点を設定します。これにより、開発の取り組みを正当化し、報いるためのデータが得られます。

サイト内の複数のページタイプをテストします。シングル ページ アプリの場合は、初回読み込み時の動作だけでなく、コンポーネント、ルート、UX フローもテストします。