ページロードパフォーマンスの測定は進化し続けています。全体的なパフォーマンスとユーザーエクスペリエンスを向上させるためには、さまざまな測定基準を理解し、それらが互いにどのように関連しているかを知ることが役立ちます。
以下のガイダンスに従う前に、改善しようとしている特定のページに範囲を絞ってください。最大限の効果を得るためには、頻繁にアクセスされているにもかかわらず、75パーセンタイルのユーザーのスコアが受け入れられているよりも低いページに焦点を当てます。
ページ読み込みKPI
TTFB（Time to First Byte）をいかに改善するか。
最初のバイトまでの時間は、ナビゲーションの開始（ユーザーがリンクをクリック）から、ブラウザがサーバーからレスポンスの最初のバイトを受信するまでの時間を測定します。75パーセンタイルのユーザーが1つ以上のページで0.5秒以上のTTFBを経験している場合、 PageView で以下の属性を照会することで、タイミングをさらに細かく分類することができます。
backendDurationconnectionSetupDurationdnsLookupDurationnetworkDuration
多くの場合、レンダリング前の速度低下は、サードパーティのAPIまたはバックエンドアプリケーションのいずれかによるバックエンドの速度低下が原因で発生します。
サードパーティAPIの合成モニタリングは、運用チームと開発チームが根本原因が制御できない場合を理解するのに役立ちます。コードを制御できない場合でも、合成結果をサードパーティと共有して、顧客が何を経験しているかをサードパーティが理解できるようにすることで、結果に影響を与えることができます。
バックエンド アプリケーションがあなたまたはあなたのチームによって所有されている場合は、 エージェント、Pixie、または OpenTelemetry を使用して、パフォーマンスを理解し、管理します。 チーム間のコミュニケーションを容易にするために、サービス レベル管理の境界を実装することをお勧めします。
累積レイアウトシフト（CLS）
Cumulative layout shiftは、一度読み込んだコンテンツがどれだけ移動するかを示すスコアです。CLSを改善するための一般的なヒントやコツです。
- スタイルシートのサイズを指定し、ブラウザのデフォルトのCSSでアスペクト比を制御します。
- 広告枠のスペースを静的に確保します。
- ビューポートの最上部付近には広告を表示しないでください。
- 既存のコンテンツの上に新しいコンテンツを挿入することは避けましょう。
- 埋め込みのための十分なスペースを事前に計算しておきます。
その他のリソース
- CLS最適化に対するGoogleのアプローチ。
- Lighthouse は、Googleが提供するツールで、特定のページに対して合成テストを行い、CLSを最適化する方法を含む推奨事項のリストを提供します。
最大のコンテンツフル・ペイント（LCP）
最大のコンテンツフルペイントは、ページレンダリングの開始から最大のコンテンツ要素をペイントするまでの差を測定します。 web.devによると、LCPが遅い一般的な原因：
- サーバーの応答時間が遅い
- レンダーブロッキングのJavaScriptとCSS
- リソースのロード時間が遅い
- クライアントサイドレンダリング
ブラウザのセッショントレース情報 を使用して、最適化しようとしている特定のページに上記の一般的な原因のどれが影響しているかを理解します。
LCP改善のためのアプローチ
- CDNを利用し、キャッシュとエッジサーバーのパフォーマンスに注意してください。
- サードパーティの接続を早期に確立します。
- クリティカルではないJavascriptやCSSを遅延させる。
その他のリソース
- LCP最適化に対するGoogleのアプローチ。
- Lighthouse は、Googleが提供するツールで、特定のページに対して合成テストを行い、CLSを最適化する方法を含む推奨事項のリストを提供します。
初回入力遅延（FID）
最初の入力遅延（FID）は、ユーザーが最初にページを操作してからブラウザーが応答できるようになるまでの時間です。これは、実際のユーザーの行動に基づいて変化するフィールドメトリックです（結果はユーザーの焦りとアクションのタイミングに基づいて変化します）が、合計ブロッキング時間（TBT）を減らすことで最適化できます。
そのためには、以下のことが必要です。
- ブロック化された長いタスクを分割する。
- 肥大化したJavaScriptを最適化する。
- ロジックをサーバーサイドに移動したり、ウェブワーカーを使ってバックグラウンドでスレッドを実行することを検討します。
ブラウザのセッショントレース情報 を使用して、ブロッキングの間隔がどこで発生しているのか、どのくらいの時間続いているのかを把握します。
その他のリソース
- FID最適化に対するGoogleのアプローチ。
- Lighthouse は、Googleが提供するツールで、特定のページに対して合成テストを行い、CLSを最適化する方法を含む推奨事項のリストを提供します。