累積レイアウトシフト分析

Lighthouse、WebPageTest、Chrome DevToolsと比較した累積レイアウトシフト分析
累積レイアウトシフト分析	灯台	ウェブページテスト	Chrome DevTools
出力：この機能は、ビューポート内でどの要素が動いたかを示すGIFアニメーションを生成し、CLSスコアを返します。垂直方向の動きが多いページでは、どの要素が移動したかを判断するのが難しくなる場合があります。	出力：このレポートでは、ファースト・コンテントフル・ペイント、スピード・インデックス、トータル・ブロッキング・タイム、ラージ・コンテントフル・ペイントの中にCLS（コンテンツ・ライフ・スピード）がリストされます。デフォルトの出力形式はHTMLレポートですが、フラグを指定することでJSON形式も利用可能です。	出力：フィルムストリップには読み込みのキーフレームが表示され、ウォーターフォールにはフィルムストリップに同期した赤い線が表示されます。ドキュメントでは、CLSはページ読み込み中にビューポート内のレイアウトがどれだけ移動するかを示す指標として定義されています。	出力：パフォーマンスパネルのレイアウトシフトトラックには、シフトが紫色のひし形で表示され、クラスターごとにグループ化されます。カーソルを合わせるとビューポート内の要素がハイライト表示され、概要タブにはタイミング、スコア、影響を受ける要素、および潜在的な原因が表示されます。
試験条件：デスクトップのビューポートは1920×1080に固定されています。モバイルではLighthouse Nexus 5Xプロファイルが使用され、良好な3G接続をシミュレートするためにCPUとネットワークが制限されます。	試験条件：ローカルのChrome、DevTools、コマンドライン、Nodeモジュール、またはPageSpeed Insightsから実行できます。コマンドラインを使用する場合は、Node 22以降が必要です。	試験条件：テストは、世界各地の実際のブラウザ上で、カスタマイズ可能なネットワーク条件下で実行されます。Chromeが最も多くの情報を提供します。
CLSの定義：バージョン1.2.0では、最大セッションウィンドウのメトリックを使用します。テスト中はスロットリングが適用されます。	CLSの定義： Lighthouseなどのラボツールはページ読み込み時のみに値を変化させるため、実際のユーザーが体験する値よりも低くなる可能性があります。	CLSの定義：実験室での制約は同様に適用されます。スコアは衝撃率と距離率の積であり、0.1以下が目標値です。	CLSの定義：各シフトは「概要」タブにそれぞれスコアが表示されます。CLSはシフトを最大5秒のセッションウィンドウにグループ化し、ギャップは1秒未満とします。
オープン性と自動化：コマンドライン版はnpm（layout-shift-gif）でインストールできます。URL、デバイス、出力オプション、オプションのCookieファイルを受け付け、自己署名HTTPS証明書をサポートしています。ページには、オプションでKo-fiへの寄付を募る機能があります。	オープン性と自動化： LighthouseはApache-2.0ライセンスで提供されています。Lighthouse CIを介してCI環境で実行できるほか、Nodeモジュールとしても利用可能です。	オープン性と自動化：このリポジトリには、Polyform Shield 1.0.0 用のマスターブランチと、Apache 2.0 用の apache ブランチがあります。独自のインスタンスの実行方法と REST API について説明しています。ほとんどの実験には WebPageTest Pro が必要です。

Lighthouse、WebPageTest、Chrome DevToolsと比較した累積レイアウトシフト分析

累積レイアウトシフト分析

灯台

ウェブページテスト

Chrome DevTools

出力： この機能は、ビューポート内でどの要素が動いたかを示すGIFアニメーションを生成し、CLSスコアを返します。垂直方向の動きが多いページでは、どの要素が移動したかを判断するのが難しくなる場合があります。

出力： このレポートでは、ファースト・コンテントフル・ペイント、スピード・インデックス、トータル・ブロッキング・タイム、ラージ・コンテントフル・ペイントの中にCLS（コンテンツ・ライフ・スピード）がリストされます。デフォルトの出力形式はHTMLレポートですが、フラグを指定することでJSON形式も利用可能です。

出力： フィルムストリップには読み込みのキーフレームが表示され、ウォーターフォールにはフィルムストリップに同期した赤い線が表示されます。ドキュメントでは、CLSはページ読み込み中にビューポート内のレイアウトがどれだけ移動するかを示す指標として定義されています。

出力： パフォーマンスパネルのレイアウトシフトトラックには、シフトが紫色のひし形で表示され、クラスターごとにグループ化されます。カーソルを合わせるとビューポート内の要素がハイライト表示され、概要タブにはタイミング、スコア、影響を受ける要素、および潜在的な原因が表示されます。

試験条件： デスクトップのビューポートは1920×1080に固定されています。モバイルではLighthouse Nexus 5Xプロファイルが使用され、良好な3G接続をシミュレートするためにCPUとネットワークが制限されます。

試験条件： ローカルのChrome、DevTools、コマンドライン、Nodeモジュール、またはPageSpeed Insightsから実行できます。コマンドラインを使用する場合は、Node 22以降が必要です。

試験条件： テストは、世界各地の実際のブラウザ上で、カスタマイズ可能なネットワーク条件下で実行されます。Chromeが最も多くの情報を提供します。

CLSの定義： バージョン1.2.0では、最大セッションウィンドウのメトリックを使用します。テスト中はスロットリングが適用されます。

CLSの定義： Lighthouseなどのラボツールはページ読み込み時のみに値を変化させるため、実際のユーザーが体験する値よりも低くなる可能性があります。

CLSの定義： 実験室での制約は同様に適用されます。スコアは衝撃率と距離率の積であり、0.1以下が目標値です。

CLSの定義： 各シフトは「概要」タブにそれぞれスコアが表示されます。CLSはシフトを最大5秒のセッションウィンドウにグループ化し、ギャップは1秒未満とします。

オープン性と自動化： コマンドライン版はnpm（layout-shift-gif）でインストールできます。URL、デバイス、出力オプション、オプションのCookieファイルを受け付け、自己署名HTTPS証明書をサポートしています。ページには、オプションでKo-fiへの寄付を募る機能があります。

オープン性と自動化： LighthouseはApache-2.0ライセンスで提供されています。Lighthouse CIを介してCI環境で実行できるほか、Nodeモジュールとしても利用可能です。

オープン性と自動化： このリポジトリには、Polyform Shield 1.0.0 用のマスターブランチと、Apache 2.0 用の apache ブランチがあります。独自のインスタンスの実行方法と REST API について説明しています。ほとんどの実験には WebPageTest Pro が必要です。