WebサイトやWebアプリケーションの使い勝手の良さはどう指標化できるでしょうか。Googleが提唱している基準がCore Web Vitalsになります。Google I/O 2023では、そんなCore Web Vitalsに対して新しい指標であるINPが示されました。

本記事ではCore Web Vitalsと、この新しいINPについて解説します。

UX（ユーザーエクスペリエンス）を指標化するCore Web Vitals

Webアプリケーションを使っていて、ストレスを感じるのはどのような時でしょうか。たとえばローディングが長くて使える状態にならない、画像が読み込まれる度にレンダリングがガタつくなどが挙げられます。

こうしたユーザー体験（ユーザーエクスペリエンス。UX）に関する指標を数値化したのがCore Web Vitalsになります。これは元々Googleが2020年に発表したものであり、SEOなどにも効果があるとされています。

Core Web Vitalsの3つの指標

Core Web Vitalsでは3つの指標が重視されます。

LCD: Largest Contentful Paint

ユーザーがページ内で最も有意義であると感じるコンテンツをいかに速く表示できるかを示した指標です。多くの場合、画面中央に表示されるコンテンツになります。

優れたLCDはページ読み込みから2.5秒以内とのことです。

FID: First Input Delay

ページの読み込みが開始してから、最初の入力が可能になるまでの時間を示した指標です。ローディング状態が長く続いて入力になかなかはじめられない場合、得点が低くなります。

優れたFIDは、100ms以下とのことです。

CLS: Cumulative Layout Shift

ページの安定性をはかる指標です。画像やコンテンツの遅延読み込みによって、画面のガタつきが発生すると悪化します。画像の高さや幅をあらかじめ定義したり、DOMの幅や高さを定義することで押さえられます。

優れたCLSは0.1以下に維持することが求められます。

新しい指標のINP

Google I/O 2023で新しく発表された指標がINP（Interaction to Next Paint）です。このINPはFIDの発展版という位置づけです。最初の入力だけでなく、連続的な入力遅延を監視し続ける仕組みになります。

常に200ms以下の影響であれば良いとされており、500ms以上に場合は悪いとしています。

現状について

Core Web Vitalsは多くのWebサイトで取り組まれている仕組みであり、FIDについて93%以上で良好な数値が得られているとのことです。それに対してINPは65%程度にまで低下しているとのことです。

Googleでは2024年からINPを推進するとしています。

Core Web Vitalsを測定する

自社サイト、WebアプリケーションのCore Web Vitalsを測る仕組みは幾つかあります。

• Pagespeed
• Chrome UX Report – Chrome Developers
• Core Web Vitals report – Search Console Help

JavaScriptで測定する

上記ツールやサービスを使わずとも、JavaScriptで測定も可能です。JavaScriptは下記サイトで配布されています。

GoogleChrome/web-vitals: Essential metrics for a healthy site.

使い方は以下のようになります（Web Vitalsより）。

import {onCLS, onFID, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // 利用が可能な場合には `navigator.sendBeacon()` を使用し、`fetch()` にフォールバックします。
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

この方法が便利なのは、ユーザーの実環境を利用できるということです。PagespeedやChrome機能拡張の場合、自分の環境での測定結果になります。ユーザーはそれぞれ異なるブラウザ、ネットワーク速度、OSで実行されますので、自ずと結果も異なるものになるでしょう。

なお、Google Analyticsを使っている場合はCore Web Vitalsの測定機能を組み込むことができます。

まとめ

Webアプリケーションが増えていく中、利用中のストレスは利用選定にも大きく関わるようになっています。これはEコマースやコミュニティサイトのようなC向けに限らないでしょう。B向けのシステムであっても、十分なUXが求められます。

UXは目には見えないと思われがちですが、Core Web Vitalsを使うことで数値化できます。まずは測定し、改善していきましょう。

Core Web Vitals