Core Web Vitals対応のGoogle Chrome機能拡張の紹介
はじめに
Core Web Vitalsの各メトリクスは、各種ツールをだけでなくGoogle Chrome機能拡張をインストールするだけで簡単に計測・検証が可能になります。
簡単に使用できる無料・登録不要なものについて紹介いたします。
1. Web Vitals
特徴：
サイトがCore Web Vitalsの基準を満たしているのかを簡単に確認するのに役立ちます。
表示されているページのCore Web Vitalsのメトリクスについて計測し、しきい値を超えていないかをバッチの色で教えてくれます。
（無効：灰色、緑：合格、赤：1つ以上のメトリックが失敗している）
さらに1つ以上のメトリクスが失敗している場合は失敗しているメトリクスの値を表示します。
計測される指標は以下になります。
- 最大のコンテンツの描画時間 – Largest Contentful Paint (LCP)
- 累積レイアウトシフト – Cumulative Layout Shift (CLS)
- 最初の入力遅延 – First Input Delay (FID)
- 次のペイントまでのインタラクション – Interaction To Next Paint (INP)
- 最初のコンテンツの描画時間 – First Contentful Paint (FCP)
- 最初の1バイト受信までの時間 – Time To First Byte (TTFB)
さらにバッチをクリックすることで詳細な値を表示してれます。
オプションで角メトリクスの値をページ上にオーバーレイ表示することも可能です。
| chromeウエブストアおすすめ | 4.0 (35) |
| 機能拡張の日本語対応 | × |
| バージョン（記事執筆時） | 1.4.0 |
| 更新日（記事執筆時） | 2023年8月9日 |
2. Web Vitals Tester
特徴：
1のWeb Vitalsと同様にサイトがCore Web Vitalsの基準を満たしているのかを簡単に確認可能です。
表示されているページのCore Web Vitalsのメトリクスについて計測し、合格の場合は緑、閾値を超えているメトリクスがある場合はそのメトリクスの値を表示します。
計測されるメトリクスは以下になります。
- 最大のコンテンツの描画時間 – Largest Contentful Paint (LCP)
- 最初の入力遅延 – First Input Delay (FID) / 合計ブロッキング時間 – Total Blocking Time (TBT)
- 累積レイアウトシフト – Cumulative Layout Shift (CLS)
さらにバッチをクリックすることで詳細な値を表示してれます。
| chromeウエブストアおすすめ | 5.0 (1) |
| 機能拡張の日本語対応 | × |
| バージョン（記事執筆時） | 0.2.0 |
| 更新日（記事執筆時） | 2022年1月18日 |
3. Core Web Vitals Annotations
特徴：
Core Web Vitals メトリクスの値をページ上にオーバーレイ表示を行うことができます。
対象箇所を視覚的に確認することができます。
対象のメトリクスは以下になります。
- 最初の入力遅延 – First Input Delay (FID)
- 最大のコンテンツの描画時間 – Largest Contentful Paint (LCP)
- 累積レイアウトシフト – Cumulative Layout Shift (CLS)
| chromeウエブストアおすすめ | 5.0 (1) |
| 機能拡張の日本語対応 | × |
| バージョン（記事執筆時） | 0.0.2 |
| 更新日（記事執筆時） | 2021年2月24日 |
4. Core Web Vitals Visualizer
特徴：
Core Web Vitals メトリクスの値をページ上にオーバーレイ表示を行うことができます。
対象箇所についてしきい値によって色分けされ、視覚的に確認することができます。
さらにポップアップ画面で各メトリクスの詳細情報が確認できます。
対象のメトリクスは以下になります。
- 最大のコンテンツの描画時間 – Largest Contentful Paint (LCP)
- 最初の入力遅延 – First Input Delay (FID)
- 累積レイアウトシフト – Cumulative Layout Shift (CLS)
- 最初のコンテンツの描画時間 – First Contentful Paint (FCP)
- 次のペイントまでのインタラクション – Interaction To Next Paint (INP)
- 最初の1バイト受信までの時間 – Time To First Byte (TTFB)
| chromeウエブストアおすすめ | 5.0 (6) |
| 機能拡張の日本語対応 | × |
| バージョン（記事執筆時） | 1.8 |
| 更新日（記事執筆時） | 2023年12月6日 |
5. Core Web Vitals
特徴：
Core Web Vitals メトリクスの値をページ上に表示を行います。 Chrome デベロッパーツールには詳細な情報が出力されます。 対象のメトリクスは以下になります。
- 累積レイアウトシフト – Cumulative Layout Shift (CLS)
- 最大のコンテンツの描画時間 – Largest Contentful Paint (LCP)
- 最初の入力遅延 – First Input Delay (FID)
| chromeウエブストアおすすめ | 5.0 (5) |
| 機能拡張の日本語対応 | × |
| バージョン（記事執筆時） | 0.1 |
| 更新日（記事執筆時） | 2020年11月2日 |
6. Core Web Vitals Inspector
特徴：
Core Web Vitals スコアを下げるスクリプトを見つけることができます。
ページ上のスクリプトを無効にして計測を行い、影響を及ぼしているスクリプトを特定します。
最大3サイトまで無料で使用できます。
検証対象のメトリクスは以下になります。
- 累積レイアウトシフト – Cumulative Layout Shift (CLS)
- 最初の入力遅延 – First Input Delay (FID)
- 最大のコンテンツの描画時間 – Largest Contentful Paint (LCP)
| chromeウエブストアおすすめ | 0.0 (0) |
| 機能拡張の日本語対応 | × |
| バージョン（記事執筆時） | 1.0 |
| 更新日（記事執筆時） | 2021年7月20日 |
7. SpeedVitals
特徴：
複数の場所とデバイスで Web Vitals と TTFB テストを実行します。
テストは https://speedvitals.com/ のサイト上で実行されます。
検証対象のメトリクスは以下になります。
- 最初のコンテンツの描画時間 – First Contentful Paint (FCP)
- 速度指数 – Speed Index (SI)
- インタラクティブ化の時間 – Time to Interactive (TTI)
- 合計ブロッキング時間 – Total Blocking Time (TBT)
- 最大のコンテンツの描画時間 – Largest Contentful Paint (LCP)
- 累積レイアウトシフト – Cumulative Layout Shift (CLS)
- 最初の1バイト受信までの時間 – Time To First Byte (TTFB)
| chromeウエブストアおすすめ | 5.0 (9) |
| 機能拡張の日本語対応 | × |
| バージョン（記事執筆時） | 2.4.1 |
| 更新日（記事執筆時） | 2023年8月15日 |
まとめ
Core Web Vitalsの検証で使用できるGoogle Chromeの機能拡張の紹介をさせていただきました。
Core Web Vitalsの改善の際の参考にしていただければ幸いです。
