GoogleはGoogle検索セントラルブログで2021年5月からCore Web Vitalsを検索ランキングに反映することを発表しました。もうまもなく適用されるということもあり簡単にまとめてみようと思います。

本日、ページ エクスペリエンス シグナルを導入したランキングを 2021 年 5 月にリリースすることを発表いたします。新しいページ エクスペリエンス シグナルは、ウェブに関する主な指標と既存の検索シグナル（モバイル フレンドリー、セーフ ブラウジング、HTTPS セキュリティ、煩わしいインタースティシャルに関するガイドラインなど）を組み合わせたものです。

すべてのツールは、web.dev/vital-toolsにまとめられています。

優れたページ エクスペリエンスを実現するための簡単かつ費用対効果の高い方法に AMP があります。

https://developers.google.com/search/blog/2020/11/timing-for-page-experience

Core Web Vitalsとは

それではCore Web Vitalsとは一体なんでしょう？
Googleの開発者向けサイトでは以下のように説明されています。

読み込み時間、インタラクティブ性、ページ コンテンツの視覚的な安定性などが含まれ、これらを組み合わせたものが 2020 Core Web Vitals の土台になります。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

• Largest Contentful Paint は、ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
• First Input Delay は、最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。
• Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。

それぞれLargest Contentful PaintがLCP、First Input DelayがFID、Cumulative Layout ShiftがCLSと呼ばれるスコアになります。これらのスコアは様々なツールで計測可能です。また

現在の Core Web Vitals で利用している 3 つの指標は、ウェブのユーザー エクスペリエンスを測る重要な要素ではありますが、ユーザー エクスペリエンスはそれ以外の側面も多く関係してきます。従って Core Web Vitals は今後も毎年アップデートする予定です。また、今後の指標の候補、目的、実装状況についても、定期的なアップデート行います。

とあるとおり将来的にCore Web Vitalsはアップデートされることが予告されており、その場合には測定する対象が変わるかもしれません。

現時点での仕様についてはそれぞれ以下のとおりです。

• LCPの仕様
  • https://wicg.github.io/largest-contentful-paint/
  • Largest Contentful Paintそのもの
• Layout Instability API
  • https://wicg.github.io/layout-instability/
  • Cumulative Layout Shiftに関するAPI
• Event Timing API
  • https://wicg.github.io/event-timing/
  • First Input Delayに関するAPI

またこれらの値を計測するためのライブラリやツールは以下のとおりです。

• web-vitals（OSSライブラリ）
  • https://github.com/GoogleChrome/web-vitals/
• web-vigtalsのChrome拡張（執筆時点ではα版）
  • https://github.com/GoogleChrome/web-vitals-extension/
• Chrome User Experience Report
  • https://developers.google.com/web/tools/chrome-user-experience-report
  • BigQueryで提供される
  • Getting Started
• WebPageTest
  • https://webpagetest.org/
  • 計測結果を細かくレポートしてくれる
  • e.g. https://webpagetest.org/result/210421_AiDc15_96a0f6f81ca38061af048dde4def203a/

リンク先にそれぞれ詳しくまとまっているのでここでの紹介は割愛させていただきます。それぞれのスコアがどのように評価されているのか、そしてそれはどのツールでどのように採点されるかは開発者であれば一通り理解しておくと良いでしょう。

まとめ

これまでもGoogleは一貫して「ユーザーにとって有益なコンテンツを評価する」という姿勢を取っており、その意味ではCore Web Vitalsにより「新たな要素が追加された」というよりも「今まで評価できていなかったサイトの健全性が評価できるようになった」という解釈の方が正しいのではないでしょうか。

Core Web Vitalsにより「機能があれば良い」という世界から一歩進んで「どのように作るべきか」に焦点が当たることでこれまでないがしろにされがちだった非機能要件が見直され今よりもっと開発がしやすくなるのではないかと期待しています。