12月17日、Chrome Dev Summit Recap 2020がオンラインで行われました。
このイベントは全世界向けに行われたオンラインイベント、Chrome Dev Summit 2020の日本語版フォローアップイベントです。
行われた４セッションのうちの１つはコアウェブバイタルで、そのほとんどがCLSに関するものでした。
主に開発者向けのイベントでしたのでマーケターにとっては難しい内容も含まれていますが、コアウェブバイタルの改善を行う上で非常に有用な情報も含まれていました。
トピックを箇条書き形式で、適宜解説を交えながら紹介します。
コアウェブバイタルについてあまりご存知でない方はまずはこちらをご覧ください。
Googleランキング要因になるコアウェブバイタル (Core Web Vitals) とは？
イベントのアーカイブ動画もありますが、約１か月のみの限定公開とのことです。(ちょうど１か月であれば2021年1月17日頃まで)
コアウェブバイタル全般について
コアウェブバイタルの指標としきい値
・コアウェブバイタルはフィールドデータ（実際のユーザーデータの統計）として扱われる。
・75パーセンタイルのしきい値を設定している
※補足
フィールドデータとラボデータ（特定の環境で測定されたデータ）との違いは押さえておく必要があります。
75パーセンタイルのしきい値とは、指標がよいほうから75パーセント目のユーザーの指標値が、コアウェブバイタルの基準をどの程度満たしているかを３段階（不良・改善が必要・良好）で判定されることを指します。
指標やしきい値の見直しについて
・コアウェブバイタルの指標やしきい値は毎年見直しの可能性がある
計測ツールの使い分け
・計測ツールの使い分けは、コミュニケーションに使いやすいサーチコンソール、フィールドデータとラボデータ両方が見られるページスピードインサイト、デバッグに便利なDev Tool、といったようにするとよい
モバイルとPCで指標や計測方法は違うのか
・モバイルとPCで指標やしきい値は変わらず同じものを用いている
※補足
ただし、ユーザーの端末や回線といった環境が異なるためにモバイルではPCよりもスコアが悪くなることが一般的です。
CLSの原因や対策方法について
CLS (Cumulative Layout Shift) とはページ閲覧中に観測されるレイアウト変化のことです。
コロナに関するバナーによるCLS
・現在はコロナに関するバナー表示によりレイアウトシフトが起きやすくなっている
※補足
あとから動的に挿入されるケースが多いためだと考えられます。CLSを防ぐためには後述されるようにプレースホルダによる対策を行うか、そもそも静的（HTML）に記載するようにする必要があります。
CLS軽減の鉄則
・CLS軽減の鉄則は「アクティブなビューポートではレイアウトの変化を避ける」こと
プレースホルダの活用
・レイアウト変化が起きないようプレースホルダを設定する
※補足
画像やJavaScriptのように表示されるまでに時間がかかるコンテンツはCLSの原因になります。
プレースホルダはそのようなコンテンツの読み込み前にあらかじめサイズを指定して領域を予約しておくことです
・事前にサイズがわからない広告などについては、プレースホルダのmin-heightを設定しておく（広告が読み込まれた履歴データを確認し、それに応じた適切なmin-heightを設定しておく。min-heightを超えるサイズの広告が読み込まれたとしても、CLSは最小限にとどめることができる）
※補足
広告は事前にサイズを知ることができない場合もあるため、その場合はmin-heightを設定します。min-heightより大きな広告がロードされた場合はCLSが悪化しますが、何も設定しない場合と比べて影響を軽減することが可能です。
・プレースホルダに何も読み込まれなかった場合、プレースホルダをなくしてしまうとやはりCLSが起きてしまうため、何かしらの画像や広告を読み込むようにしておく
無限スクロールにおけるCLS抑止策
・無限スクロール中にフッターが表示されるページでは、読み込みのたびにフッターが移動し、CLSスコアが低下する可能性がある。
対処法としては、以下の3つが考えられる
- プレースホルダを設定する
- フッターを削除する
- スクロール前にコンテンツを表示しておく
※補足
無限スクロール中のフッター問題はセッションの間何度か取り上げられていました。
フッターを表示しないようにする対処が一般的なようです。
ユーザーアクションとCLS
・ユーザーのクリックアクションから500msの間はレイアウト変化が起きてもCLSスコアには影響しない(クリックによって即座に起きるレイアウト変化なら問題ない)
・すぐにコンテンツを読み込めない（500ms以上かかることが予想される）場合にはプレースホルダを表示するとよい
※補足
ユーザーのクリックアクションによって発生するCLSは例外的にカウントされないようになっています。
ただし、500ms以上あとに起こるレイアウト変化はCLSとしてカウントされてしまうため、読み込みに時間がかかるにはプレースホルダを設定しないとCLSが悪化していまいます。
・スクロールもユーザーアクションであるが、CLSの例外イベントとしてスクロールは考慮されない。
CLSの計測対象
・CLSのフィールドデータはユーザーがページに滞在している間ずっと積算される。一方、ラボデータではファーストビューのCLSしか算出されない。そのため、両者の数値はかなり異なる可能性もある。
※補足
つまり、ラボデータにはページ下部やスクロールによって起こるレイアウト変化は考慮されていないことになります。
おまけ：LCPとFIDの対策
イベント中、LCPとFIDについてはあまり触れられなかったのですが、一部以下のようなポイントが紹介されていました。
・サードパーティへのリクエストを遅らせたことでLCPが改善し、直帰率改善・収益増加につながったメディアサイトの事例が紹介されていました。
・Javascriptの読み込み中はボタンをdisabledにしておくことで、ユーザーがクリックする可能性が低くなる（＝FIDの悪化を防ぐ）
※補足
FIDはユーザーのアクションに関係するものなので、早い段階でクリックが行われるとFIDが悪化してしまう可能性があります。
この施策は読み込み中であることがわかるようにしておき、完了するまではクリックされないようにするという、システム面の改善施策というよりはユーザー視点に立った施策であると言えます。
最後に
今回は開発者向けのイベントでしたが、コアウェブバイタルの悪化を防いでUXを改善したいと考えるマーケターにとっても役に立つ内容でした。
今回の補足は、後日行われるGoogle検索オフィスアワーでも行われるとのことです。
本日の #ChromeDevSummit CWV のセッションでページエクスペリエンスに関する質問いくつか来てましたが、来週の #Google検索オフィスアワー の前半部分で少し触れる予定です。 https://t.co/UZszjNL07c
— きらきら☆あんなたん (@piropiroanna) December 17, 2020
