Core Web Vitals事例

2021年5月からページエクスペリエンスのひとつに組み込まれるCore Web Vitalsの検証デモサイトを作りました。 Core Web Vitalsとは何か、どういうページが悪く改善が必要であり、逆にどのようなページが良いのかを視覚的に理解いただけるようなページにしました。

Core Web Vitals(コアウェブバイタル)とは何か?

Core Web Vitalsとは、対象となるWebページのユーザーの体験(ユーザーエクスペリエンス:UX)を指定した尺度で評価する指標です。

今や誰にとっても定着化、一般化したWebは、多くの人に日常的に利用されるメディアです。 PCがアクセスの主流の時代は「良いコンテンツが載っているサイト」が良いサイトとしてみなされてきましたが、 スマートフォンの普及に伴って、誰もが日常的にアクセスできる現在、コンテンツだけではなく、そのページの使い勝手や操作性もページの良さ悪さを決める大きな要素になってきました。

たとえ独自性が高く面白いコンテンツを掲載していても、ページの表示速度が遅かったり、リンククリックなどの操作に対して反応が遅い場合、ユーザーはイラッと来て帰ってしまいます(直帰する)。 つまり、ページのコンテンツだけではなく、その体験も良くないとユーザーはコンテンツを見てくれない、そんな状況に変化したと言えます。

この状況変化もあり、ページやWebサイトの体験を一定基準で測る指標として「Core Web Vitals」が起案されました。

2021年5月からはこのCore Web VitalsがGoogleの検索アルゴリズムにも導入され、検索順位の決定要素としてページ体験も評価対象となります。 以上からもSEOにおいて、ページ体験(UX)の向上・改善は今や必須であり、ユーザー体験を阻害する要素の排除から体験向上の為の技術的改善が求められます。

Core Web Vitalsで評価対象となる3つの指標について説明します。YouTubeでもコアウェブバイタルに関して解説していますので、こちらも合わせて御覧ください。

LCP(Largest Contentful Paint)

日本語では「最大のコンテンツ箇所の描画」を意味します。 ページ内で最も大きいコンテンツ範囲箇所が表示されるまでの時間を計測する指標であり、描画までの時間が短ければ短いほど良いとされます。表示までの速度は2.5秒未満「良い(Good)」、4秒以上が「悪い(Poor)」とされています。


画像出典:https://web.dev/lcp/

この「最大コンテンツ」は、各ブロック要素もしくは画像等の最もサイズが大きいものを指します。ChromeのDevToolsを利用することで「最大コンテンツ」として指定された箇所を確認できます。

→LCPのデモサイトを見る

CLS(Cumulative Layout Shift)

CLSとはページレイアウトのズレを測る指標です。ページが表示されている最中や、ユーザーがページ内で何かの操作を行っている最中に意図しないレイアウトのズレが発生していないかを計測する指標です。

レイアウトのズレは主にローディングに時間がかかる画像の表示や、ダイナミックコンテンツの表示によって発生するケースが多く、表示するコンテンツの面積を予め確保していない事がその要因として挙げられます。

この「ズレ」を測る指標は、「レイアウト移動で影響を受ける箇所の面積%」×「実際にズレてしまった箇所の面積%」で算出されます。

CLSのズレは0.1未満が「良い(Good)」、0.25以上が「悪い(Poor)」と評価されます。


画像出典:https://web.dev/cls/

→CLSのデモサイトを見る

FID(First Input Delay)

FIDとは、ユーザーが最初に入力する際の反応速度を計測した指標です。 この「入力」とは、リンクのクリックやボタンのタップ、キー操作など様々な入力が対象となります。

FIDは主にJavaScriptの処理遅延によって発生し、初めのユーザーの操作に対して処理に多くの時間がかかる場合、FIDのスコアも悪化します。 この実行完了までにかかる時間が0.1秒未満(100ミリ秒)以下であれば「良い(Good)」、0.3秒(300ミリ秒)以上が「悪い(Poor)」とされています。


画像出典:https://web.dev/fid/

→FIDのデモサイトを見る