コアWebバイタル：それらは何であり、どのようにそれらをテストできますか？

最終更新日：2020年9月17日

ウェブサイトを運営している人なら誰でも、ウェブサイトをできるだけスムーズに運営することがいかに重要かを知っています。 遅れた、不十分に構築されたサイトは、信頼性と信頼性の感覚を伝えることができません。 平均的なWebユーザーは、サイトを快適に使用できるようになる前に、このように感じる必要があります。 あなたと世界中のウェブ開発者がサイトを改善するのをより良く助けるために、グーグルは最近コアウェブバイタルをリリースしました。 これは、サイトの品質と潜在的なユーザーエクスペリエンスを判断するのに役立つ一連の指標を提供する新しいプログラムです。 この記事では、主要な指標、つまりWebバイタルと、それらをテストしてサイトの状態を判断する方法について説明します。

主なWebバイタルは何ですか？

サイトによって提供されるサービスの品質を決定するとき、明確な全体像を作成するために確認する必要のあるいくつかのメトリックがあります。 グーグルは平均的なウェブ開発者のためにそれを絞り込んだ。 彼らは、3つのメトリックがサイトを評価できる主要なコンポーネントであると判断しました。 これらの3つのメトリックは、最大コンテンツペイント（LCP）、最初の入力遅延（FID）、および累積レイアウトシフト（CLS）です。

最大のコンテンツフルペイントは、Webページの読み込み速度の尺度です。 問題のページのメインコンテンツが測定されたポイントをマークします。 これは、ページ上のテキスト（または画像）の最大ブロックが読み込まれるまでにかかる時間の尺度です。 一般に、サイトで最大のコンテンツの多いペイントの読み込みにかかる時間は2.5秒以内にする必要があります。 確かに、これはWebデザインの際に検討する価値のあるポイントです。

First Input Delayは、ユーザーがページを操作したときのサイトの動作を測定します。 これには、応答性などが含まれます。 ユーザーがページをクリックするたびに、Webサイトがそのクリックに応答するのにかかる時間は、最初の入力遅延によって測定されます。 通常、100ミリ秒より速いものであれば問題ありませんが、その後はいくつかの改善を行う必要があります。

最後に、累積レイアウトシフトは、ページ上のビジュアルの安定性を測定します。 これは、ページの予期しないレイアウトシフトの量の定量化可能な測定値です。 これら3つのメトリックのそれぞれについて、すべてのページ読み込みの75パーセンタイル以上に到達する必要があります。 これらのメトリックが考慮される限り、これは「合格」と見なされます。

コアWebバイタルを測定する方法は？

これらの指標は、適切に実行されたSEOキャンペーンと同じくらい重要である可能性があることを確認しました。それでは、どのように測定されますか？ Googleは、コアWebがユーザーエクスペリエンスの要であると考えているため、それらを測定するためのツールを提供することに取り組んでいます。 以下は、サイトのコアWebバイタルパフォーマンスを測定する3つの方法です。

Googleは、Chromeユーザーエクスペリエンスレポートを通じて、重要なコアWebごとに匿名化された実際のユーザーエクスペリエンスを収集します。 これは、外部アプリケーションを事前に設定する必要がないことを意味するため、便利です。 実際、Googleはすでに事前にそれを処理しています。 さらに、PageSpeed Insightsなどのツールは同じプラットフォームで実行されるため、すぐに使用できます。

この方法はかなり単純で、ユーザーからの入力はほとんど必要ありませんが、この方法で提供される分析はあまり詳細ではありません。 とりわけ、ページビューごとのテレメトリを含めることを無視しています。 これは、誰かがWebページの潜在的な問題を正確に診断するのに役立ちます。

JavaScriptの使用

または、JavaScriptを使用して、コアWebバイタルを処理することもできます。 開始する最も簡単な方法は、Web-vitals用にJavaScriptのエントリをライブラリにプルアップすることです。 これにより、すぐに使用できる正確なWebAPIが提供されます。 さらに、Chromeウェブストアには、 Web Vitals Chrome拡張機能と呼ばれる拡張機能が用意されており、コードを記述しなくても、各Webバイタルについてレポートできます。

最後に、ラボツールを使用して、コアWebバイタルのそれぞれを測定できます。 これは、サイトを立ち上げる前にサイトのパフォーマンスを把握したい場合に特に役立ちます。 ただし、フィールドメトリックを無視できるという意味ではありません。 ユーザーエクスペリエンスは、さまざまな要因の影響を受けます。 例としては、ネットワークの状態や、ユーザー側で実行されている可能性のある追加のプログラムがあります。 したがって、サイトが稼働したら、フィールドツールテストを利用することをお勧めします。 これは、すべてが正常であることを確認する簡単な方法です。

知っておくべきその他の指標

カバーされているコアWebバイタルは考慮すべき最も重要なものですが、考慮すべき他の貴重なWeb品質メトリックがあります。 結局のところ、サイトのパフォーマンスとクライアントのサイトの楽しみを向上させることが望ましいのです。 これらの手段は、多くの場合、Webページの診断を微調整するのに役立ちます。 これらの一部には、サイトでのユーザーの読み込みエクスペリエンスに重要なTime to First Byteや、サイトのインタラクティブ性に問題がある場合に役立つTimetoInteractiveなどの測定値が含まれます。 どちらも重要ですが、現場で測定することはできません。したがって、メインのコアWebバイタルと同じステータスは付与されません。

Lighthouse 6.0はどうしたの？

あなたがあなたのサイトの品質を評価することに興味があるなら、あなたが迅速な診断を探しているならあなたが始めることができるそのようなツールの1つはLighthouseです。 この監査プログラムは自動化されており、Chromeストアから利用できる拡張機能として、またはノードモジュールとCLIとしてChromeDevToolsで利用できます。

Lighthouseの最新バージョンは、FDIやCLSなどのコアWebバイタルに重点を置いたGoogleを組み込んでおり、これらの指標に関してサイトのパフォーマンスを評価します。 これで、サイトに関してLighthouseが提供するパフォーマンススコアが更新され、これらの新しいモデルが含まれるようになりました。つまり、古い加重モデルが次のように調整されました。

これらの新しい変更は、サイトのパフォーマンス評価に具体的な影響を及ぼします。 わずか20％のサイトで評価スコアの改善が見られましたが、すべてのサイトの約50％で、新しく実装された加重スケールでスコアが5ポイント以上低下しました。

Chrome DevTools

LighthouseのようなChromeDevToolsは、Web開発者により良いサービスを提供するためにいくつかの新しい変更を経験しました。 これらの変更の中で最も重要なのは、以前の反復で頻繁な問題と混乱に悩まされていた[問題]タブの修正です。 さらに、パフォーマンスパネルは、ロードパフォーマンスを記録した後、ページの下部に合計ブロッキング時間を記録するようになりました。 このツールは、ページが機能しているように見えるが、JavaScriptがメインスレッドをブロックし、ユーザー入力がページによって操作されないようにするため、現時点では実際には使用できない時間を測定します。 最後に、Chrome UXダッシュボードは、コンテンツのWebバイタルごとにページを分類するようになりました。これにより、ユーザーはサイトのパフォーマンスを競合他社や業界全体のパフォーマンスと比較できます。

コアWebバイタルは、要するに、Webページでのユーザーエクスペリエンスの尺度です。 物事が進化するにつれて、それはマイナーな方法と重要な方法の両方で変化する可能性があります。 あなたがあなたのウェブページを最適化するとき、健康なコアウェブバイタルを維持するようにしてください、そしてあなたはあなたのサイトに立ち寄る人々を満足させ続けるでしょう。