SEO研究所サクラサクラボ

SEO・コンテンツマーケティングを成功に導くパートナー

Chrome Dev Summit Recap 2020 でのコアウェブバイタルに関するセッションまとめ

12月17日、Chrome Dev Summit Recap 2020がオンラインで行われました。

このイベントは全世界向けに行われたオンラインイベント、Chrome Dev Summit 2020の日本語版フォローアップイベントです。

行われた4セッションのうちの1つはコアウェブバイタルで、そのほとんどがCLSに関するものでした。

主に開発者向けのイベントでしたのでマーケターにとっては難しい内容も含まれていますが、コアウェブバイタルの改善を行う上で非常に有用な情報も含まれていました。

トピックを箇条書き形式で、適宜解説を交えながら紹介します。

コアウェブバイタルについてあまりご存知でない方はまずはこちらをご覧ください。
Googleランキング要因になるコアウェブバイタル (Core Web Vitals) とは?

イベントのアーカイブ動画もありますが、約1か月のみの限定公開とのことです。(ちょうど1か月であれば2021年1月17日頃まで)

コアウェブバイタル全般について

コアウェブバイタルの指標としきい値

・コアウェブバイタルはフィールドデータ(実際のユーザーデータの統計)として扱われる。
・75パーセンタイルのしきい値を設定している

※補足
フィールドデータとラボデータ(特定の環境で測定されたデータ)との違いは押さえておく必要があります。
75パーセンタイルのしきい値とは、指標がよいほうから75パーセント目のユーザーの指標値が、コアウェブバイタルの基準をどの程度満たしているかを3段階(不良・改善が必要・良好)で判定されることを指します。

指標やしきい値の見直しについて

・コアウェブバイタルの指標やしきい値は毎年見直しの可能性がある

計測ツールの使い分け

・計測ツールの使い分けは、コミュニケーションに使いやすいサーチコンソール、フィールドデータとラボデータ両方が見られるページスピードインサイト、デバッグに便利な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検索オフィスアワーでも行われるとのことです。

執筆者 / 監修者

サクラサクマーケティング株式会社 取締役社長 COO

1980年生まれ 東京都稲城市出身、都立三鷹高等学校、専修大学文学人文科学を卒業後、2003年に学校関連の広告・出版を扱う株式会社JS コーポレーションに入社。

3年勤務した後に、学生時代より、ベンチャー企業への興味関心が高かったこと、より企業の課題解決に向き合っていきたいという想いから、WEB マーケティング業界へ転身。
2006年にSEM コンサルタントとして、インターネット総合代理店、株式会社オプトに入社。リスティング、ディスプレイ広告の運用から、SEOの施策提案など主にキーワードマーケティング領域に特化した業務に従事。

同年10月に、当時4名のベンチャー企業であった当社の役員と共鳴し、転職。入社後は、営業をはじめ、SEOコンサルティング、新規事業開発、自社マーケ、人事、財務と幅広い領域を経験し、営業部長、執行役員、取締役と経て、2015 年に社名変更とともに取締役社長に就任。

SEOコンサルタントとして大規模サイトから新規サイトまで、売上向上に繋がるコンサルティングを武器に200サイト以上の実績。9年連続でラスベガスで開催されるPUBCONに参加するなど海外の最新のSEO情報の収集にも尽力。
現在は、サクラサクラボの編集長、サクラサクラボチャンネルでの情報発信などの自社マーケティングを通じてBtoBマーケティングにも精通し、ここで培ったノウハウをもとにコンサルティングを展開。

3歳から現在に至るまで、サッカーを続けており、組織マネジメントにおいて、この経験値を大いに活用している。

◇ 情報発信
ねぎお社長のWEBマーケティングチャンネル
ねぎお社長Twitter
ねぎお社長Facebook
ねぎお社長Instagram
ねぎお社長linkedin
ねぎお社長note

◇ 掲載メディア
リスティングプラス様 - 【最新版】SEOコンサルティングのプロが語る、今後中小企業が取り組むべきSEO対策
シンフィールド様 - サクラサクマーケティング株式会社 取締役社長COO根岸 雅之氏に聞いた!SEO対策で最も重要なことを教えてください!

◇ 共催セミナー歴
オウンドメディアの成功事例とSEOを支える運用型広告の活用
今日から始められるWebマーケティング~コンテンツマーケティングとGoogle マイビジネス~
GMO TECH × サクラサク共催セミナー~テクニカルSEOとコンテンツマーケ~
リモート環境下においても売上・利益が成長し続ける組織創りと営業戦略

その他のブログ記事

Return Top