web-vitals + Google Analytics4 RUMデータを使用してWeb Vitalsを測定し、Web Vitals レポートを作成する

概要
運用しているサイトのパフォーマンスを測定するために、PageSpeed InsightsやLighthouseを使用することがあります。個人の端末で測定したデータのみでパフォーマンス改善をするには十分です。より多くのユーザーの端末からのパフォーマンスをもとに改善したいという要求があるとき、web-vitals JavaScriptライブラリを使用して、アナリティクスサービスに送信することで各指標をレポートすることができます。このドキュメントを読むことで、実際のユーザー環境からCore Web Vitalsの指標を測定・収集し、可視化することができます。
前提
ユーザー環境のCore Web Vitalsの指標を測定するのは、web-vitals JavaScriptライブラリが行います。測定したデータはGoogle Analyticsに送信します。Web Vitals ReportのサービスでGoogle Analyticsと連携することで、各指標を可視化することができます。
Core Web Vitalsとは
Core Web Vitals とは、すべての Web ページに適用可能な Web Vitals のサブセットのことを指します。すべてのサイト所有者にとって測定する価値のあるもので、Google が提供するあらゆるツールで採用されています。Core Web Vitals に含まれている各指標は、ユーザー エクスペリエンスに関する特徴的な観点を提供し、フィールド データの測定が可能であり、ユーザーを中心とした重要な結果に基づく実際のユーザー体験を反映します。

サービス
- Google Analytics4 (GA4)
- web-vitals https://github.com/GoogleChrome/web-vitals
- Web Vitals Report https://web-vitals-report.web.app/
1.Google Analyticsからグローバルサイトタグを取得する
Google Analyticsからグローバルサイトタグを取得します。ヘッダーに追加します。GA_MEASUREMENT_IDはデータの送信先にするGoogle Analytics プロパティのIDです。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
2.RUMデータをGoogle Analyticsへ送信する
web-vitals JavaScriptをインポートしメトリクスを取得、Google Analyticsへ送信します。今回はGhostやWordPressのようなCMSを想定しているため、CDNから直接JavaScriptファイルを読み込みます。npmからインストールして使用するのが推奨される使用方法です。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script type="module">
import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
function sendToGoogleAnalytics({name, delta, value, id}) {
gtag('event', name, {
// Built-in params:
value: delta, // Use `delta` so the value can be summed.
// Custom params:
metric_id: id, // Needed to aggregate events.
metric_value: value, // Optional.
metric_delta: delta, // Optional.
});
}
getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);
</script>
3.Web Vitals ReportにGoogle Analyticsのアカウントを連携する
Google Analyticsに収集されたWev Vitalsのデータからレポートを出力するサービスがあります。Web Vitals Report にアクセスし、Google Analyticsと連携します。十分にデータが集まっているとセグメントごとにCore Web Vitalsの指標のスコアを表示します。

上のレポートではLCP(Largest Contentful Paint - 最大視覚コンテンツの表示時間)がGood Scoreである2.5秒より高く、改善必要の閾値に該当しています。

参考記事


