Libx Awesomeリスト

    このページの内容

    Awesome Page Speed Metrics

    Page Speed Metricsを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    概念

    ラボデータ（合成計測）

    ツールからページへリクエストを送り、性能を評価します。ネットワークやCPUをスロットリングして現実的な条件にし、複数回実行してノイズを減らしてください。

    • Lighthouse - Google Chromeに構築されたウェブページの診断ツール。Chrome DevTools、Chrome拡張機能、またはコマンドラインから実行可能（ヘッドレスChromeでも）。
    • Google PageSpeed Insights - Googleが提供する無料かつホスティングされたLighthouseレポート（その他も）。
    • WebpageTest - 無料かつホスティングされたウェブパフォーマンステスト（オープンソースプロジェクトも含む）。
    • Sitespeed.io - オープンソースのパフォーマンスモニタリングツールのセット。
    • Calibre - ウェブパフォーマンスモニタリングSaaS。
    • treo.sh - ウェブパフォーマンスモニタリングSaaS。
    • SpeedCurve - ウェブパフォーマンスモニタリングSaaS。
    • AwesomeTechStack - ウェブサイトの素晴らしさをモニタリングするツール。

    フィールドデータ（Real User Monitoring - RUM）

    ページを訪れた実ユーザーから性能データを収集します。ユーザーのブラウザー上で動作するため実行時の負荷に注意し、新しい指標を対象ユーザーのブラウザーが対応しているか確認してください。

    クリティカルレンダリングパス

    クリティカルレンダリングパスとは、ネットワークからバイト列を受信してから画面に何かを描画するまでに起きるすべての処理です。First Contentful Paint (FCP)やSpeed Indexなどのレンダリング指標を最適化するには、その仕組みを理解する必要があります。

    Long Task

    ユーザー入力を処理するブラウザーのメインスレッドは、JavaScriptなどの処理も実行します。メインスレッドを長時間占有すると、ページが応答しなくなる可能性があります。

    ユーザーは100ms以内の視覚的変化を瞬時と感じます。メインスレッドを50msより長く占有する処理はLong Taskとみなされ、ユーザー入力に応答できなくなる可能性があります。

    Total Blocking Time (TBT)やFirst Input Delay (FID)などのインタラクティビティ指標を最適化するには、Long Taskとその回避方法を理解する必要があります。

    ユーザー中心の指標

    ユーザーとその体験に関係する指標を追跡することが重要です。体感性能を測る指標は、いくつかの重要な問いを軸に選べます。

    • Docs - User-centric Performance Metrics - web.dev
    • 動作しているか？ - ナビゲーションは正常に始まり、サーバーは応答したか？（例：FCP)
    • 有用／意味のある状態か？ - ユーザーが利用できるだけのコンテンツが描画されたか？（例：LCP)
    • 操作可能か？ - ページを操作できるか、それともまだ読み込み処理中か？（例：TBT)
    • 快適／滑らかか？ - 遅延やカクつきがなく、操作が滑らかで自然か？

    レンダリング指標

    First Contentful Paint (FCP)

    First Contentful Paint（FCP）は、ページの読み込み開始から、コンテンツの一部が画面へ描画されるまでの時間を測ります。ここでいう「コンテンツ」は、テキスト、画像（背景画像を含む）、<svg>要素、白以外の<canvas>要素です。

    Largest Contentful Paint (LCP)

    Largest Contentful Paint（LCP）は、ビューポート内で見える最大のコンテンツ要素が描画された時刻を示します。

    Cumulative Layout Shift (CLS)

    レイアウトシフトは、見えている要素の位置が前後のフレーム間で変わると発生します。CLSは、ページの存続期間中に発生した予期しない各レイアウトシフトのスコアを合計します。

    Visually Complete

    Visually Completeは、最初のナビゲーション開始から、ページの表示領域（Above the Fold）が変化しなくなるまでの時間です（WPTでは録画した映像／スクリーンショットからページの色ヒストグラムを使って計測します）。

    Speed Index

    Speed Indexは、ページの内容が視覚的にどれだけ速く表示されるかを示します（小さいほど良い値です）。読み込み中の視覚的な完成度を繰り返し計測し、より早く完成状態へ近づくほど値が小さくなります。

    (Hero) Element Timing

    Element Timingは、ブラウザーが特定の要素を描画した時刻を記録します。Hero要素は最大のh1、img、背景画像、またはElement Timing APIで指定した独自要素として定義できます。

    インタラクティビティ指標

    Time to Interactive (TTI)

    Time to Interactiveは、ページが完全に操作可能になるまでの時間です（メインスレッドが5秒間アイドルになる状態）。Consistently Interactiveとも呼ばれますが、First InteractiveやFirst CPU Idleとは異なります（特に混同されやすい指標です）。

    Total Blocking Time (TBT)

    Total Blocking Time（TBT）は、First Contentful Paint（FCP）からTime to Interactive（TTI）までの間に、入力応答を妨げるほど長くメインスレッドがブロックされた時間の合計です。

    First Input Delay (FID)

    First Input Delay（FID）は、ユーザーが初めてサイトを操作してから、ブラウザーが実際に応答できるまでの時間を測ります。操作には、リンクのクリック、ボタンのタップ、JavaScript製の独自コントロールの利用などがあります。

    • ラボ: 該当なし（ユーザーによるページ操作が必要なため）
    • フィールド: IE9+、Safari、Chrome、Firefox（0.4KBのpolyfillを使用）
    • Docs - FID - web.dev
    • Polyfill - FID

    Max Potential First Input Delay

    ユーザーが経験し得る最大のFirst Input Delayです。基本的にはブラウザーのメインスレッド上で最長のLong Taskの所要時間に相当します。

    ネットワーク指標

    ネットワークタイミングのフィールドデータから、最適化されていないTLS設定、遅いDNSルックアップやサーバー側処理、CDN設定の問題を発見できます。転送バイト数の計測については別節も参照してください。

    DNSレイテンシ

    • ラボ: DNS性能テストツール
    • フィールド: IE9+、Safari 9+
    // Measuring DNS lookup time
var pageNav = performance.getEntriesByType("navigation")[0];
var dnsTime = pageNav.domainLookupEnd - pageNav.domainLookupStart;

    TCPおよびSSL/TLSレイテンシ

    • ラボ: 監査にはQualys SSL Labs审计用
    • フィールド: IE9+、Safari 9+
    // Quantifying total connection time
var pageNav = performance.getEntriesByType("navigation")[0];
var connectionTime = pageNav.connectEnd - pageNav.connectStart;
var tlsTime = 0; // <-- Assume 0 by default

// Did any TLS stuff happen?
if (pageNav.secureConnectionStart > 0) {
  // Awesome! Calculate it!
  tlsTime = pageNav.connectEnd - pageNav.secureConnectionStart;
}

    Time to First Byte (TTFB)

    • ラボ: 多くのサーバー負荷テストツールが計測
    • フィールド: IE9+、Safari 9+
    var ttfb = pageNav.responseStart - pageNav.requestStart;

    転送バイト数

    各種ツールでアセットのバイト数を計測できます。通常はフィールドでも値が同じためラボだけで追跡しますが、端末種別や地域に固有のページには注意してください。

    自サイトとサードパーティーのJavaScriptバイト数を測ることは重要です。JavaScriptはTTIやFIDが高くなる主因だからです。

    その他の指標

    Google PageSpeed Insightsスコア

    User Timing

    User Timing APIを使うと、ブラウザーのPerformance Timelineへアプリケーション固有のタイムスタンプを作成できます。たとえば、ページ上の特定コンポーネントでJavaScriptの読み込みが完了した時刻を測るUser Timingマークを作れます。

    • ラボ: Lighthouse、WPT
    • フィールド: IE 10+、Safari 11+、Chrome、Firefox
    • Spec - User Timing

    Server Timing

    バックエンドサーバーのタイミング指標（データベースのレイテンシなど）を、ユーザーのブラウザーの開発者ツールまたはPerformanceServerTimingインターフェースへ公開します。

    フレームレート

    フレームレートは、ブラウザーがフレームを表示できる頻度です。1フレームは、DOMイベント処理、サイズ変更、スクロール、描画、CSSアニメーションなど、イベントループ1回分の処理を表します。応答性の高い体験では一般に60fpsを目標とし、ブラウザーは約16.7msで1フレームを処理する必要があります。

    DOMContentLoaded

    window.load

    ライセンス

    CC0

    法律で認められる範囲で、Csaba Palfiは本作品に関するすべての著作権および関連する権利を放棄しています。