コアウェブバイタルとは何か、そしてそれがどのようにユーザーエクスペリエンスを向上させるか？

Core Web Vitalsは、ウェブページに関する「品質シグナルのための統一ガイダンス」を提供することを目的としたGoogleの取り組みです。それらは、ウェブサイト管理者がユーザー体験を最適化するための実践的な洞察を提供することを意図しています。

GoogleはCore Web Vitalsを検索ランキングインデックスのシグナルとして使用する計画です。もともとは2021年5月に予定されていましたが、更新は現在6月に延期されました。あなたのウェブバイタルがまだ整っていない場合、検索の変更が来る前に行動を起こす時です。

三つの指標

より広範なWeb Vitalsプロジェクトは、ウェブ体験のいくつかの側面を対象としています。Core Web Vitalsに関して、Googleは3つの特定の指標に焦点を当てています。これらのバイタルのスコアが低いと、ユーザーにとって不満のある体験を提供するサイトが明らかになる可能性があります。

注意すべき三つの指標は次の通りです：

• 最大コンテンツ塗装（LCP） - この指標はページの読み込みパフォーマンスを測定します。LCPが2.5秒未満は「良好」、4.0秒を超えると「悪い」とされます。
• 初回入力遅延 (FID) - 初回入力遅延は、ページがクリックやスクロールなどのユーザーの操作に応答するまでの時間を測定します。良いサイトは100ms以内にインタラクティブになり、悪いサイトは300ms以上かかります。
• 累積レイアウトシフト (CLS) - CLSは、ページが読み込まれている間に発生する「レイアウトシフト」の量を測定する指標です。レイアウトシフトは、画像や広告バナーなどの非同期で読み込まれるページ要素が、ページの残りの部分の後に表示され、下にあるコンテンツが目に見えて飛び降りるときに発生します。この不快な効果は、ユーザーを困惑させ、苛立たせる可能性があります。

これらの指標を最適化することで、読み込み時間やページ上のレイテンシを減らすことにより、ユーザーエクスペリエンスが向上します。レイアウトシフトを削減することで、ページの視覚的一貫性が高まります。各指標は簡単に測定可能で、あなたのサイトに即座に実世界の改善をもたらすべきです。

Googleの推奨ターゲットは、ページ読み込みの75パーセンタイルで「良好」な閾値に達することです。このレベルの適合性に達することができれば、ページはCore Web Vitalsテストに合格したと見なされます。75パーセンタイルで持続的に閾値を下回るサイトは、Googleのインデックス変更が施行された後、検索結果でランクが下がる可能性があります。

コアウェブバイタルの測定

Web Vitalsのパフォーマンスを向上させるために、いくつかの選択肢があります。開発者にとっての最良の選択肢は、Google ChromeのF12デベロッパーツールで利用できるLighthouseレポートです。

Chromeであなたのウェブサイトにアクセスしてください。開発者ツールを起動し、Lighthouseタブに切り替えます。「レポートを生成」ボタンをクリックしてLighthouse分析を開始します。完了するまでに数秒かかる場合があります。

レポートが読み込まれると、パフォーマンスセクションまでスクロールします。3つのコアウェブバイタルを含む、6つの指標が表示されます。Chromeでは「ファーストコンテンツフルペイント」が「ラージエストコンテンツフルペイント」を表し、「インタラクティブまでの時間」は「ファーストインプットディレイ」と同じです。

これらの指標のいずれかがオレンジまたは赤に色付けされている場合、サイトの位置を改善するために作業が必要な場合があります。Lighthouseは各問題の下に提案を表示します。いくつかの変更は迅速かつ簡単に実行でき、数分の作業で追加のポイントを得ることができます。

Lighthouseは2回実行するべきです。一度はデスクトップモードで、次にモバイルラジオボタンを選択して再実行します。モバイルおよびデスクトップのレポートは、"レポートを生成"ボタンが表示されるLighthouseタブのランディングページで選択されます。メトリクスはデバイスタイプによって異なって評価されます；Google検索もこのセグメンテーションを尊重します。もしあなたのモバイルサイトがデスクトップのエクスペリエンスよりも良好にパフォーマンスを発揮する場合、スマートフォンから閲覧された時にあなたのウェブサイトのランキングが向上することがあるかもしれません（その逆もまた然り）。

いくつかのGoogleウェブ管理システムは、Core Web Vitalsデータも公開しています。Chromeユーザーエクスペリエンスレポート、PageSpeed Insights、Google Search Consoleのダッシュボード内でメトリクスを確認できます。

これらのツールを確認することは重要です。たとえLighthouseを使って良いスコアが得られてもです。Googleのプロパティは、Chromeユーザーエクスペリエンスレポートを通じて、実際の匿名化されたユーザーデータに基づいてWeb Vitalsスコアを計算します。そのため、Googleの統計が実際にあなたのマシンで実行されるLighthouseテストと一致していることを確認することが重要です。

定期的にユーザーベースでテストを行わないと、簡単に不一致が生じる可能性があります。概して、開発者は多くの複雑なウェブサイトでも軽々と処理できる高性能なハードウェアを使用する傾向があります。これにより、実際のユーザー体験を反映しない励みとなるLighthouseスコアが得られることがあります。もしあなたのユーザーの大多数が疲れたミッドレンジのスマートフォンから訪問する場合、Googleはまったく異なる数値を出すかもしれません。

自分の楽器を追加する

コアウェブバイタルを測定できるのはGoogleのツールだけではありません。このプロジェクトは、サイトのJavaScriptに統合できるnpmライブラリも提供しています。これにより、プログラム的にウェブバイタルのパフォーマンスを測定できます。その後、収集したデータを自身の分析サービスに送信できます。

ライブラリはWeb Vitalsごとに測定機能を公開しています（例：

LCP

（Largest Contentful Paintのため）。関数を呼び出すことで、メトリックの値を測定します。関数は、測定完了後に値を受け取るコールバックを受け入れます。

import {getLCP} from "web-vitals";


getLCP(lcp => {

 console.log(lcp);

 callAnalyticsService({lcp}); // use custom analytics

});

指標がデータを報告するまでに時間がかかることがあります。一部の指標は、実際にユーザーがページと対話することに依存しています。もしユーザーが一度もクリックしたりスクロールしたりしなければ、測定は行われません。

1回のセッションで各測定関数を一度以上呼び出さないでください。各呼び出しはパフォーマンスオブザーバーを登録します。連続した呼び出しは即時の測定を促さず、過剰なメモリ使用につながる可能性があります。

コールバックは複数回呼び出される場合があります。測定値が更新されるたびに変更が報告されます。一部のメトリクスはページを継続的に監視し、その寿命の間に自動的に調整されます。新しい値が決定されるたびに、あなたの関数が呼び出されます。

ブラウザAPIを使った測定

それ以外の

web-vitals

npmパッケージですが、パフォーマンステストを手動で行いたい場合は、基盤となるブラウザのAPIを直接使用できます。これにより、測定方法を正確に微調整することができますが、Web Vitalsの仕様から逸脱する可能性があります。

パフォーマンスオブザーバーAPIは、ページ上で発生するパフォーマンスイベントにフックするブラウザメカニズムです。Web Vitalsライブラリは、このAPIを内部で使用しています。ブラウザから直接新しいイベントを受信するために、自分自身のパフォーマンスオブザーバーを追加できます。各オブザーバーには、監視するメトリックが与えられます。

const observer = new PerformanceObserver(entries => {


 for (const entry of entries.getEntries()) {

 console.log(`New LCP entry at ${entry.startTime}`);

 }

});





    

observer.observe({type: "largest-contentful-paint"});

このコードスニペットは、Largest Contentful Paintメトリックのための独自の測定システムを設定する方法を示しています。渡されたコールバックは、

PerformanceObserver

パフォーマンスオブザーバーエントリのリストを受け取ります。これらはブラウザ内で発生するパフォーマンス状態遷移を説明しています。

要約

コアウェブバイタルズで良いスコアを取得することは、あなたのサイトが良好なユーザー体験を作る3つの基本的な側面に最適化されていることを示しています。読み込み時間、インタラクティブになるまでの時間、レイアウトのシフトを減らすことで、UXの摩擦を排除するのに役立ちます。これにより、ユーザーがあなたのサイトに戻ってくる可能性が高まります。

現在のコアウェブバイタルは静的ではありません。時間が経つにつれて追加のメトリックが加えられる可能性があります。これは、開発者コミュニティからのフィードバックや、一般的なパフォーマンス問題の現実の観察に基づいています。現在の3つのメトリックは、「すべてのウェブページに関連している」ため、ユーザーエクスペリエンスに最も大きな影響を与えるメトリックとして選択されました。