ウェブサイトの成功を左右する鍵、それは「優れたユーザー体験」です。しかし、開発者、マーケター、ビジネスオーナーといった多様なステークホルダーが共通の目標に向かって足並みを揃えるのは決して簡単ではありません。そこで役立つのが、Googleが主導する取り組みのWeb Vitalsです。質の高いUXシグナルを提供するWeb Vitalsを活用すれば、ウェブサイトの体験を定量化し、改善すべきポイントをすべての関係者に明確に共有することができます。

本記事では、Core Web Vitalsの中からLCPに焦点を当て、その基本を簡単に復習します。また、後半では、エンジニアであるあなたがビジネスオーナーを含む関係者と協力しながら、ユーザー体験向上を実現するための具体的なアプローチを解説します。

Core Web Vitals

Core Web Vitalsとは

Core Web VitalsはWeb Vitalsのサブセットです:

Largest Contentful Paint (LCP)
Interaction to Next Paint (INP)
Cumulative Layout Shift (CLS)

この3つはそれぞれ実環境 (フィールド) で測定可能であり、かつ、ユーザー中心の指標です。

注: フィールド (実環境) データとラボラトリー (実験環境) データでは得られるインサイトが違います。使い分けには注意が必要です。

実装方法

公式ライブラリを使うと、以下の様にJavaScriptに簡単に埋め込むだけで利用開始できます。

index.js

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

LCP

LCPはローディングパフォーマンスを測定します。この指標は、ページが読み込まれるまでの時間を、画面上で最も大きな要素が描画されるまでの時間と定義しています。

ローディングパフォーマンスの捉え方

Googleはこれまでにも、ローディングパフォーマンスを測定するためのさまざまな指標を提案してきました。現在採用されているLCPは、Googleが膨大で緻密な研究を重ねた末に選んだ、非常に優れた指標です。ただし、これは現時点で最も現実的に多くのサイトで再現しやすいと判断された指標であることも理解しておく必要があります。

カスタム指標

では、LCPが適切な指標ではない場合について考えてみましょう。例えば、ウェブサイトの初期画面の一番大きな要素に重要な情報が含まれていない場合、LCPはローディングパフォーマンスを再現しません。その場合、カスタム指標が効果的です。The Web Performance Working Groupが低レベルAPIを標準化しています。LCPでローディングパフォーマンスを計測できない場合は、User Timing APIを使って、独自の指標を作ることをおすすめします。

ステークホルダーへの発表と提案

パフォーマンス最適化の重要性をエンジニア以外の関係者に伝えることで、リソースを確保することができます。また、ビジネスへの貢献を適切に評価してもらうことができます。そのために、まずはCore Web VitalsでUXを定量化します。

課題の共有

仮に、あなたの組織のプロダクトのウェブサイトのLCPが50パーセンタイル (中央値) で2.5秒、75パーセンタイルで3.5秒だったとします。GoogleがGoodと定義するLCPは75パーセンタイルで2.5秒以下です。

ローディングパフォーマンス向上を組織として取り組む問題と認知してもらうために、以下の様に報告します。

あなた「私たちのウェブサイトのユーザーの2人に1人はページが読み込まれて読めるまでに2.5秒以上かかってしまっています。これは、業界標準では改善の余地がある数値です。このユーザー体験を改善すると、離脱者が減り、信頼が増し、売上やCTRなどのKPIが向上する可能性あります。そのために、私たち開発チームは改善施策を行います。」

多様な関係者に伝えるため、専門用語を避けます。例: ローディングパフォーマンス→ページ読み込み速度。

実績報告

報告の仕方

施策でポジティブな結果が出たときは、必ず報告しましょう。すでに前の段階で、課題の共有をしているため、関係者は結果に関心を持ってくれているはずです。

あなた「半年前からページ読み込み速度が大幅に改善しました。現在、私たちのユーザーの4人に3人が2.5秒以下でページ読み込みできています。これは、Googleの定める基準でも優良とされる数値です。」

理想的な実績と報告

パフォーマンス改善だけでなくビジネス貢献まで定量化するためには、戦略的なA/Bテストが必要です。パフォーマンス施策の前後で比較しても、様々な影響因子を排除しきれません。そのため、パフォーマンス施策の反映したソースコードと反映していないソースコードをランダムに選んだ2つのユーザーグループにそれぞれ露出させ、ビジネスKPIを比較するA/Bテストまで行えると理想です。そこまでできると、上の提案内容に一言ビジネス貢献の情報を追加できます。

「ページ読み込み速度が大幅に改善しました。現在、私たちのユーザーの4人に3人が2.5秒以下でページ読み込みできています。これは、Googleの定める基準でも優良とされる数値です。開発チームの改善施策は3ヶ月で1.2億円の売上向上に貢献しました。」

無機的な数字を想像しやすくする工夫はとても効果的です。例えば、パーセンタイルという統計用語を別の言い方にしてみます。つまり、「75パーセンタイルで2.5秒以下」を「4人に3人が2.5秒以下」と言い換えると直感的に想像しやすくなります。また、ユーザーの存在を想起させ、感情にも訴えられます。

Fast campusでオンラインコースが始まります

ReactとWeb Vitalsを活用したウェブパフォーマンス最適化戦略