【フロントエンドエンジニア必見】話題のCore Web Vitalsについて

CREATE:

Core Web Vitalsのアイキャッチ画像


はじめに

Core Web Vitals(コア ウェブ バイタル)という単語は聞いたことがあるでしょうか? Core Web Vitalsは、2020年5月頃Googleから打ち出された「より快適なウェブの実現に向けたページエクスペリエンスにおいて、特に重要される3つの指標」です。

このCore Web Vitalsのスコアが、今後ランキング要因(検索順位に影響を与える)になるということで、エンジニア界隈に留まらず、SEO界隈でも話題となり注目されています。

Core Web Vitalsは、 今後のフロント開発シーンにおいてメインストリームとなることが予想されるので、 初めて聞いた方、聞いたことはあるけど良く分かっていないという方は、概要だけでも是非押さえていってください。

それでは、いってみましょう

  1. Core Web Vitalsとは

    CLS, LCP, FIDの3指標から成るるWebページのパフォーマンス指標

  2. Core Web Vitalsがランキング要因になるタイミング

    公式発表によると2021年5月予定
    ※適用される場合、少なくとも6か月前にアナウンスがある Google公式発表

  3. Core Web Vitalsがランキングにどれくらい影響するか

    ランキング要因のなかでとても強い影響力を持つものではない。
    しかし評価が同程度のページ同士のランキングを決定する場合には、大きく関係する。

Core Web Vitalsとは

冒頭と重複しますが、 Core Web Vitalsは、2020年5月頃Googleより打ち出された「より快適なウェブの実現に向けたページエクスペリエンスにおいて、特に重要な3つの指標」です。

3つの指標

Googleは、以下の3指標を「特に重要なWeb Vitals」としてランキング要因の対象とすることを公表しています。

① LCP(Largest Contentful Paint) ② FID(First Input Delay) ③ CLS(Cumulative Layout Shift)

LCP(Largest Contentful Paint)

参考: Google翻訳による公式ページ和訳
ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。 感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。

LCPは、和訳で「最大コンテンツの描画」と訳されています。 もう少し平たく言うと、”ビューポート内で最も容量が大きい要素が表示されるまでの時間”です。


”ページ内の、どの要素が最も大きな要素とされるのか?”

「Core Web Vitalsスコアを簡単に計測することが出来るツール」がいくつかあるので、 以下のようなツールを使用すれば「どの要素がLCPの対象になっているか」知ることが出来ます。

PageSpeed Insights lighthouse( Chrome拡張機能 )

前述した「GOOD, NEEDS IMPROVEMENT, POOR」のしきい値をみて、 GOOD評価圏内ではない場合は、評価圏内に入るよう調査・改善してみましょう。

ちなみにLCPは、主に次の4つの影響を受けると言われています。

  1. サーバーの応答時間
  2. レンダリングをブロックするリソース(JavaScript,CSS)
  3. リソースのロード時間
  4. クライアント側のレンダリング

LCPは「ページの表示速度の指標」といわれ、その改善が 良いユーザー体験の提供(ページ訪問時の表示速度が高速)へと繋がります。


FID(First Input Delay)

参考: Google翻訳による公式ページ和訳
最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。

FIDは、和訳で「初回入力遅延」と訳されています。 もう少し平たく言うと、”ユーザーが最初にページを操作(リンクをクリックしたり、ボタンをタップしたり)した時に、それに対してブラウザが反応するまでにかかった時間”です。

FIDは、実際にユーザーがページを操作する必要があるため、フィールドデータでのみスコア化される指標になります。 ※「フィールドデータ = 実際のユーザーから取得したデータ」 ※フィールドデータの対義語は、「ラボデータ = 特定の環境(自分のPC等)で測定したデータ」

そのため、

ちなみにFIDは、主に次の4つの影響を受けると言われています。

  1. サードパーティのコード
  2. JavaScriptの実行時間
  3. メインスレッドの使用量
  4. リクエスト数、転送サイズ

FIDは「ユーザーの応答性を測る指標」といわれ、その改善が 良いユーザー体験の提供(ユーザー操作に応える速度が高速)へと繋がります。


CLS(Cumulative Layout Shift)

参考: Google翻訳による公式ページ和訳
ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。

CLSは、和訳で「累積レイアウトシフト」と訳されています。 平たく言うと、”ユーザーが意図しないレイアウトのズレがどの程度発生したか”です。

どこかで似たような経験をしたことがある方は、なんとなくイメージ出来るかもしれませんが、分かりやすいムービーがあったため、紹介します。

web.devより引用

ユーザーは「No, go backボタンを押そうとした」のに、「後から出現した要素に全体が押し下げられ、意図せずYes, place my orderボタンを押下」してしまっていますね。

これがCLS(累積レイアウトシフト)として、扱われます。


また、CLSはLCPと同様に、どの要素がCLSと みなされたかをツールで確認することができます。

ページコンテンツの予期しない移動は、リソースが非同期で読み込まれるか、DOM要素が既存のコンテンツの上のページに動的に追加されるために発生します

ちなみにCLSは、次ような要因からスコアに影響を及ぼすとされています。

  1. 画像や動画などにサイズ属性が含まれていない
  2. 既存コンテンツの上にコンテンツを挿入(ユーザー操作により発生する場合除く)

CLSは「視覚の安定性を測る指標」といわれ、その改善が 良いユーザー体験の提供(ユーザーに不便、不快感を与えない)へと繋がります。

まとめ

少し長くなってしまいましたが… 大枠をざっくりと理解できるように伝えられたらなと思い、節々の詳細は紹介しないようにしました。

「Core Web Vitals の ランキング要因化」 この発表は、現役フロントエンドエンジニアである筆者は、大変嬉しく思っています。

というのも、 これまでエンジニア以外の職種の方で、Webパフォーマンスについて気にかけたり、 追求したりしている方は、はあまり多くない印象がありました。

パフォーマンスの追求は、エンジニアの独りよがり感さえ否めなかったですが、 ランキング要因とされたことによって、SEO担当者筆頭に、エンジニア以外の職種の方々がパフォーマンスを気にかけ、より優れたWebを追求するような風潮を感じられているからです。


Core Web Vitalsスコアの中には、CLSの「画像や動画などにサイズ属性が含まれていない」等、簡単に今すぐにでも改善できるものもあったりするので、ぜひ自分の関わるプロダクトのWebサイトを計測にかけてみて、課題を洗い出してみては如何でしょうか?

それぞれの詳細は、また機会改め紹介できればと思っています。


Copyright © 2020 Frontendev. All rights reserved.