Web Vitals の概要: サイトの健全性を示す重要指標

本日は、Google が手掛ける新たなプログラム Web Vitals について紹介します。これは、ウェブで優れたユーザー エクスペリエンスを実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組みです。

Core Web Vitals

ユーザー エクスペリエンスの質の測定には、多くの側面があります。そのほとんどはサイトやコンテキストに固有のものですが、すべてのウェブ エクスペリエンスにとって重要な共通シグナル、つまり「Core Web Vitals」が存在します。このようなユーザー エクスペリエンスの核となるニーズには、読み込み時間、インタラクティブ性、ページ コンテンツの視覚的な安定性などが含まれ、これらを組み合わせたものが 2020 Core Web Vitals の土台になります。

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

これらの指標はすべて、ユーザー中心の指標であり、フィールド計測可能で、同等の補助的なラボ診断指標やツールも存在します。たとえば、Largest Contentful Paint はトップラインの読み込み指標ですが、最初のコンテンツの描画を表す First Contentful Paint（FCP）や、最初のバイトを受け取るまでの時間を表す Time to First Byte（TTFB）にも大きく依存します。これらをあわせて監視して改善することも重要です。

Core Web Vitals の測定

私たちは、Core Web Vitals をすべてのサイトオーナーやデベロッパーにとってシンプルで使いやすく、測定しやすいものにすることを目指しています。この点は、Google のインターフェースにも、皆さん独自のダッシュボードやツールにも当てはまります。

サイトオーナーの皆さんは、Chrome UX Report で自分のサイトのそれぞれの Web Vitals のパフォーマンスを簡単に評価できます。すべての Core Web Vitals のヒストグラムは、既に BigQuery データセットとして一般公開されています。また、URL レベルとオリジンの両方のデータに簡単にアクセスするための新しい REST API も準備しているところですので、ご期待ください。

すべてのサイトオーナーの皆さんに、Core Web Vitals の実際のユーザーの測定値を収集してみることを強くお勧めします。これを実現するために、Google Chrome を始めとするいくつかのブラウザで、現在 Core Web Vitals のドラフト仕様である Largest Contentful Paint、Layout Instability、Event Timing が実装されました。また、オープンソース JavaScript ライブラリである web-vitals もリリースします。これは、カスタム指標をサポートする任意のアナリティクス プロバイダで利用することができ、また Core Web Vitals をそれぞれ正確に取得する方法を示すリファレンス実装として使うこともできます。

// web-vitals を使って CLS、FID、LCP を測定、レポートする例

import {getCLS, getFID, getLCP} from 'web-vitals';


function reportToAnalytics(data) {

  const body = JSON.stringify(data);

  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||

      fetch('/analytics', {body, method: 'POST', keepalive: true});

}


getCLS((metric) => reportToAnalytics({cls: metric.value}));

getFID((metric) => reportToAnalytics({fid: metric.value}));

getLCP((metric) => reportToAnalytics({lcp: metric.value}));

私たちはテストや開発の過程で、Core Web Vitals のそれぞれの状態に簡単にアクセスできれば非常に有益であると気づきました。これは、開発作業中にもウェブの閲覧中にも当てはまります。そこで、デベロッパーの皆さんが最適化を行うチャンスを見つけやすくなるように、Core Web Vitals の Chrome 拡張機能のデベロッパー プレビュー版もリリースします。この拡張機能を導入してウェブを閲覧すると、それぞれの Vitals の状態についてのインジケーターが Chrome に表示されます。将来的には、現在の URL とオリジンのそれぞれの Core Vitals の状態について、実際のユーザーからの集計結果（Chrome UX Report が提供するもの）も表示できるようにしたいと考えています。


さらに、今後数か月間で Lighthouse、Chrome DevTools、PageSpeed Insights、Search Console のスピード レポートなどの多くのユーザーに利用されているツールをアップデートし、Core Web Vitals を改善するためのアクションにつながる一貫したガイドを提供できるようにする予定です。

進化する Core Web Vitals

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

2021 年に向けて、ページのスピードを含む重要なユーザー エクスペリエンス特性について理解を深め、それを測定する機能の構築を進めています。たとえば、最初のインタラクションだけでなく、すべてのインタラクションの入力の遅延を測定するように機能を拡張することを考えています。また、スムーズさを定量化する新しい指標の作成や、ウェブ上でプライバシーを保護しつつ瞬間的にコンテンツを配信できるようにする方法なども検討しています。

Core Web Vitals やウェブ全般に関する今後の最新情報にアクセスしたい方は、web.dev の最新情報をフォローし、メーリング リストをサブスクライブしてください。


ウェブ パフォーマンス エンジニア、Ilya Grigorik

Reviewed by Yusuke Utsunomiya - Web Ecosystem Consultant, gTech