目次

Web Vitalsとは

Web Vitalsとは、Web UXを向上させることを目的としたGoogleの取り組みで、主に次の3つの指標で数値化されます。

とりあえずWeb Vitalsを試してみたい方は、web-vitals-extensionというChromeのExtensionがあるので、気になるサイトで計測してみることをお勧めします。各指標の改善方法は、それぞれ次のページを参照してください。

Nuxt.jsでWeb Vitalsを計測する

Nuxt.js製のサイトで、試しにWeb Vitalsを継続的に計測してみることにしました。計測結果を可視化したいので、公式のコードサンプルにもあるように、測定結果をGoogle Analyticsに送るようにしてます。Nuxt.jsでの導入方法を調べたところ、大きく次の2つのようでした。

  • web-vitalsと@nuxtjs/google-analyticsを使う。
    • @nuxtjs/google-analyticsは使わずに、analytics.jsやgtag.jsを使うのも可能です。
    • このブログではこちらを採用しています。
  • nuxt-vitalsを使う。

nuxt-vitalsはリリースされたばかりで拡張性がまだあまり高くないように感じ、Nuxt.jsモジュールを使わなくても簡単に実装できそうだったので、自前で組んでみることにしました。

web-vitalsと@nuxtjs/google-analyticsを使う

web-vitalsというnpmを使うと簡単にWeb Vitalsを計測できます。web-vitalsは計測する機能しか持っていないので、Google Analyticsやその他トラッキングシステムにデータを送信するのは自分で実装する必要があります。今回は、Nuxt.jsでGoogle Analyticsを使用する際に多く使われているであろう@nuxtjs/google-analyticsを使います。やることはカスタムイベントを送信するだけなので、analytics.jsやgtag.jsをそのまま使う場合はそれぞれ置き換えてください。

次のコマンドで必要なモジュールをインストールします。

npm install --save @nuxtjs/google-analytics web-vitals

今回は、Google Analytics関連のプラグインファイルが既にあったので、次のように/plugins/ga.jsにWeb Vitalsを計測する処理を書きました。eventCategoryの値は自分がわかりやすい物を指定してください。また、先述したLCP、FID、CLSの他にも、FCPとTTFBという指標も計測可能だったので計測しています。

// /plugins/ga.js
import { getLCP, getFID, getCLS, getFCP, getTTFB } from 'web-vitals'

export default ({ app }) => {
  const sendVitalsMetricToGA = ({ name, delta, id }) => {
    app.$ga.event({
      eventCategory: 'Web Vitals',
      eventAction: name,
      eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
      eventLabel: id,
      nonInteraction: true
    })
  }

  const sendVitalsToGA = () => {
    getLCP((metric) => { sendVitalsMetricToGA(metric) })
    getFID((metric) => { sendVitalsMetricToGA(metric) })
    getCLS((metric) => { sendVitalsMetricToGA(metric) })
    getFCP((metric) => { sendVitalsMetricToGA(metric) })
    getTTFB((metric) => { sendVitalsMetricToGA(metric) })
  }

  app.router.onReady(() => {
    sendVitalsToGA()
    app.router.afterEach(() => {
      sendVitalsToGA()
    })
  })
}

作成したプラグインをnuxt.config.jsのpluginsに指定していなければ追加します。

// nuxt.config.js
export default {
  ...
  plugins: [
    ...
    '~/plugins/ga'
  ]
  ...
}

作業は以上です。各ページ遷移時にバックグラウンドでWeb Vitalsを計測し、Google Analyticsに「Web Vitals」というカスタムイベントを送信します。上記の例では、LCPやFID、CLSをアクション名にして送信しています。

nuxt-vitalsを使う

今回は結果的に採用しませんでしたが、Nuxt.jsでWeb Vitalsを計測し、GAにカスタムイベントを送信するまでをやってくれるnuxt-vitalsというモジュールもあったのでこれを使うのも手です。

次のコマンドでnuxt-vitalsをインストールします。

npm install --save nuxt-vitals

インストールしたら、次のようにnuxt.config.jsのmodulesに追加するだけです。

// nuxt.config.js
export default {
  ...
  modules: [
    [ 'nuxt-vitals', { trackingID: 'UA-XXXXXXXX-X' }]
  ]
  ...
}

まとめ

  • web-vitalsというnpmで簡単にWeb Vitalsを計測できる。
  • Nuxt.jsでWeb Vitalsを計測する時は、プラグインなどで共通処理するのがよい。
  • 今後データを具体的にどう活用するかは、まだ考えてないけど改善できるところはして行く所存。