パフォーマンスの監査

Sam Dutton

なぜ、何を

プログレッシブ ウェブアプリのテクニックがサイトに与えるメリットは、すでにご存じでしょう。すぐに PWA 機能を追加したくなるかもしれませんが、可能ですが、まずは「PWA 対応」にすることをおすすめします。

どんなに PWA を活用しても、JavaScript のブロックや画像の肥大化などの問題は解決しません。PWA には堅固な基盤が必要です。

では、ウェブサイトの健全性を確認するにはどうすればよいでしょうか？最初のステップは、サイト監査を行うことです。これは、うまく機能している点と、改善できる点（および方法）を客観的に確認するものです。

サイトやアプリを監査すると、復元力とパフォーマンスに優れたエクスペリエンスを構築できます。また、最小限の承認で実装できる簡単な改善点も明らかになります。監査は、データドリブン開発のベースラインにもなります。変更によって状況は改善されましたか？自社のサイトは競合他社と比べてどうですか？優先すべき取り組みに指標を適用し、改善を達成した際に誇れる具体的な証拠を取得できます。

5 分でわかる概要

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

30 分しか時間がない場合は

Lighthouse は引き続き最適なツールですが、少し時間をかければ、他のツールの結果も記録できます。

  • Chrome DevTools のセキュリティ パネル: HTTPS の使用状況。
  • Chrome DevTools ネットワーク パネル: 読み込み時間、リソースサイズ、HTML、CSS、JavaScript、画像、フォントなどのファイルのリクエスト数。
  • Chrome タスク マネージャー: サイトが他のアプリよりも多くの CPU またはメモリを常に使用している場合は、メモリリーク、タスクの実行、リソースの読み込みの問題を修正する必要があります。ユーザーに代表されるデバイスでサイトをテストしてください。
  • WebPagetest: さまざまなロケーションと接続タイプのパフォーマンス、キャッシュ、最初のバイトまでの時間、CDN の使用状況。
  • Pagespeed Insights: 読み込みパフォーマンス、データ費用、リソース使用量。実際のパフォーマンス統計情報を示す Chrome ユーザー エクスペリエンス レポートのデータなど。
  • 速度スコアカードと影響計算ツール: サイトの速度を他社と比較し、サイトの速度を改善することで得られる収益の可能性を推定します。

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

実際のテストに勝るものはありません。ユーザーと同じデバイスと接続でサイトを試し、主観的なエクスペリエンスを記録します。

ツールの種類が多すぎて混乱している場合

速度ツールについて考える方法のガイドをご覧ください。

他に方法がない場合は、Lighthouse を使用して以下を確認します。

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

リファクタリングの優先度は、対象ユーザー、コンテンツ、機能によって異なります。サイトにアクセスするユーザーはどのような人ですか？なぜ、どのように使用しているのか。パフォーマンス予算はどのくらいか。これらの質問の答えがわからない場合は、PWA トレーニング リソースのユーザーとコンテンツとすべてのユーザー向けの設計にある要件収集演習をお試しください。

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

サイト全体を監査できない場合は、ページ アナリティクスを確認して、重点を置くべき箇所を把握します。直帰率が高い、ページ滞在時間が短い、離脱ページが想定外である場合は、改善の優先順位を決めるうえで参考になります。同様に、ホスティング費用、広告のクリック数、コンバージョン数などのビジネス指標も確認できます。関係者から、関係者にとって重要なデータの概要を把握します。

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

変更を加える前にサイトの状態を記録して、問題を特定し、改善や回帰の開始点を確立します。これにより、開発作業を正当化し、報酬を支払うためのデータが得られます。

ホームページだけでなく、サイト内の複数のページタイプをテストしてください。シングルページ アプリの場合は、最初の読み込みエクスペリエンスだけでなく、さまざまなコンポーネント、ルート、UX フローをテストします。

フィードバック