データコストを抑えながら、パフォーマンスと復元性に優れたサイトを構築するには、いくつかの重要な目標があります。
目標ごとに監査が必要です。
| 目的 | なぜでしょうか？ | テスト対象 |
|---|---|---|
| プライバシー、セキュリティ、データの完全性を確保し、強力な API の使用を可能にする | HTTPS が重要な理由 | すべてのサイトページ / ルートとアセットに HTTPS が実装されている。 |
| 読み込みパフォーマンスを改善する | 読み込みに 3 秒以上かかるサイトを離脱するユーザーは 53% | 非同期で読み込むか、遅延させることができる JavaScript と CSS。Time to Interactive とペイロード サイズの目標を設定します（例: 3G での TTI）。パフォーマンス バジェットを設定する。 |
| ページの重さを軽減する | • データプランに上限があるユーザーのデータコストを削減する • ウェブアプリのストレージ要件を削減する（特に低スペックのデバイスを使用しているユーザーにとって重要） • ホスティングと配信のコストを削減する • 配信のパフォーマンス、信頼性、復元力を向上させる | ページの重さの予算を設定します。たとえば、最初の読み込みを 400 kB 未満に設定します。JavaScript の負荷を確認します。 ファイルサイズをチェックして、肥大化した画像、メディア、HTML、CSS、JavaScript を見つけます。遅延読み込みが可能な画像を見つけ、カバレッジ ツールを使用して未使用のコードを確認します。 |
| リソース リクエストを減らす | • レイテンシの問題を軽減する • サービング費用を削減する • サービングのパフォーマンス、信頼性、復元力を向上させる | あらゆる種類のリソースに対する過剰なリクエストや不要なリクエストを探します。たとえば、繰り返し読み込まれるファイル、複数のバージョンで読み込まれる JavaScript、使用されない CSS、表示されない（または遅延読み込みが可能な）画像などです。 |
| メモリ使用量を最適化する | 特にモバイル デバイスでは、メモリが新たなボトルネックになる可能性があります。 | Chrome タスク マネージャーを使用して、ホームページの読み込み時や他のサイト機能の使用時に、サイトのメモリ使用量を他のサイトと比較します。 |
| CPU 負荷を軽減する | モバイル デバイス、特に低スペックのデバイスでは、CPU が制限されています | JavaScript の負荷を確認します。カバレッジ ツールを使用して、使用されていない JavaScript と CSS を見つけます。DOM サイズが過大になっていないか、最初の読み込み時に不要なスクリプトが実行されていないかを確認します。複数のバージョンで読み込まれている JavaScript や、マイナーなリファクタリングで回避できるライブラリを探します。 |
ウェブサイトの監査には、さまざまなツールや手法があります。
- システム ツール
- 組み込みのブラウザツール
- ブラウザの拡張機能
- オンライン テスト アプリケーション
- エミュレーション ツール
- アナリティクス
- サーバーとビジネス システムから提供される指標
- 画面録画と動画録画
- 手動テスト
以下では、各タイプの監査に関連するアプローチについて説明します。
リソース リクエストを記録する: 数、サイズ、タイプ、タイミング
サイトを監査する際は、まずブラウザのネットワーク ツールでページを確認することをおすすめします。方法がわからない場合は、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 では、静的コンテンツのキャッシュ、Time to First Byte、サイトで CDN が効果的に使用されているかどうかも確認できます。
結果を保存する
- WebPagetest: テスト結果ごとに独自の URL があります。
- Pagespeed Insights: オンラインの Pagespeed Insights ツールに、実際のパフォーマンス統計を示す Chrome ユーザー エクスペリエンス レポートのデータが含まれるようになりました。
- Lighthouse: Chrome DevTools の [Audit] パネルでダウンロード ボタンをクリックして、レポートを保存します。
プログレッシブ ウェブアプリのコア要件をテストする
Lighthouse を使用すると、セキュリティ、機能、ユーザー補助、パフォーマンス、検索エンジンのパフォーマンスをテストできます。特に、Lighthouse は、サイトがサービス ワーカーやウェブアプリ マニフェストなどの PWA 機能を正常に実装しているかどうかを確認します。
Lighthouse は、サイトが許容可能なオフライン エクスペリエンスを提供できるかどうかもテストします。
Lighthouse レポートは JSON 形式でダウンロードできます。Lighthouse Chrome 拡張機能を使用している場合は、レポートを GitHub Gist として共有できます。共有ボタンをクリックし、[Open in Viewer] を選択します。新しいウィンドウで共有ボタンを再度クリックし、[Save as Gist] を選択します。
分析、イベント トラッキング、ビジネス指標を使用して、実際のパフォーマンスを追跡する
可能であれば、変更を実装する前に、直帰率、ページ滞在時間、離脱ページなど、ビジネス要件に関連する分析データの記録を保持します。
可能であれば、影響を受ける可能性のあるビジネス指標と技術指標を記録して、変更後に結果を比較できるようにします。たとえば、e コマースサイトでは、1 分あたりの注文数を追跡したり、ストレス テストや耐久テストの統計情報を記録したりできます。ページの重さとリソース リクエストを削減すると、バックエンド ストレージの費用、CPU 要件、配信費用、復元力が改善される可能性があります。
アナリティクスをまだ導入していない場合は、今すぐ導入しましょう。サイトが機能しているかどうかを最終的に判断するのは、ビジネス指標と分析です。必要に応じて、ボタンのクリックや動画の再生などのユーザー アクションのイベント トラッキングを組み込みます。また、ゴールフロー分析（ユーザーが「コンバージョン」に至るまでの経路）を実装することもできます。
Google アナリティクスのサイトの速度をモニタリングして、パフォーマンス指標とビジネス指標の相関関係を確認できます。たとえば、「ホームページの読み込み速度はどれくらいか？」と「ホームページからのアクセスが販売につながったか？」を比較します。
Google アナリティクスでは、Navigation Timing API のデータが使用されます。
JavaScript Performance 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 をご覧ください。