4 min read

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

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 に含まれている各指標は、ユーザー エクスペリエンスに関する特徴的な観点を提供し、フィールド データの測定が可能であり、ユーザーを中心とした重要な結果に基づく実際のユーザー体験を反映します。
Web Vitals
Essential metrics for a healthy site

サービス

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からインストールして使用するのが推奨される使用方法です。

GitHub - GoogleChrome/web-vitals: Essential metrics for a healthy site.
Essential metrics for a healthy site. Contribute to GoogleChrome/web-vitals development by creating an account on GitHub.
<!-- 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秒より高く、改善必要の閾値に該当しています。

Largest Contentful Paint (LCP)
This post introduces the Largest Contentful Paint (LCP) metric and explains how to measure it

参考記事

Official Ghost + Google Analytics Integration
Integrate your Ghost publication directly with Google Analytics using sensible code injection for in-depth site metrics in realtime 👉📈
Web Vitals の測定を開始する
実際の環境とラボ環境の両方でサイトのWebバイタルを測定する方法を学びます。
Best practices for measuring Web Vitals in the field
How to measure Web Vitals with your current analytics tool