コア ウェブ バイタルと表示パフォーマンス（2021年2月5日開催）
2021年2月5日、「コア ウェブ バイタルと表示パフォーマンス」をオンラインで開催しました。本セミナーはWeb担当者の皆さまの業務により関連した内容をお届けする、45分間のピンポイント講座です。
2020年5月にGoogleが発表したWebページの評価指標「コア ウェブ バイタル（Core Web Vitals）」の適用が近づいてきました。「表示パフォーマンスが大切なのは認識しているけれど、自分の閲覧環境ではストレスなく使えているし、何ら問題ないだろう」とお考えの方もいらっしゃるかもしれません。しかしこの指標は、企業Webサイトにとってむげにはできない存在になりつつあります。本セミナーでは、「コア ウェブ バイタルとは」、Webページが満たすべき品質、特に表示パフォーマンスの重要性に焦点を絞って解説しました。
本セミナーは2020年8月に開催したセミナーをアップデートした内容で行いました。内容に関しては「Web担当者のためのピンポイント講座 / コア ウェブ バイタルと表示パフォーマンス（2020月8月21開催）開催レポート」をご参照ください。
木達の講演の様子
取締役（CTO）木達からのコメント
Googleの「ページ エクスペリエンス」に「コア ウェブ バイタル」が統合され、LCP・FID・CLSという3つの表示パフォーマンスが検索結果に影響し始める時期が、いよいよ今年5月に迫ってきました。もっとも、セミナーの中で強調しましたように、それで検索順位が大きく変わるとは考えにくいのですが、比較的SEOに興味をお持ちのWeb担当者の方に多くご参加いただけたように思います。改めてセミナーへのご参加、誠にありがとうございました。
当日参加された皆様には、ぜひユーザー体験、UXを継続的に改善するための手段として、コア ウェブ バイタルの計測結果を活用していただければと思います。以下、アンケートでお寄せいただいた質問に、この場をお借りして回答させていただきます。
ログイン有無で構成が変わるページでもURLが同一の場合、フィールドデータはまとめて取得されてるのか（クローラーはログインしないため今までのSEO対策ではなかった観点のため）
Chrome User Experience Report | Chrome UX Report | Google DevelopersにはThe Chrome User Experience Report is powered by real user measurement of key user experience metrics across the public web
とあり、計測対象はログイン操作を必要としない（一般に公開されている）Webページと読み取れます。つまりフィールドデータにはログイン前の状態における計測データのみが含まれると思いますが、あいにく正確なところは私には分かりかねますので、Googleにお問い合わせいただければと思います。
CLSについてラボデータの数値は良好だが、フィールドデータでは不良というページがある。ラボデータと違いユーザーの閲覧行動に応じ指標が変動したためだと思うが、どんな行動でCLSが発生しているか課題を検知する方法はあるか？
CLS、つまりCumulative Layout Shiftについてのご質問ですが、フィールドデータよりラボデータのほうが良好な数値が得られる傾向にある、というのはCumulative Layout Shift (CLS)の末尾に記載されている注釈に理由が明記されています：
Lab tools typically load pages in a synthetic environment and are thus only able to measure layout shifts that occur during page load. As a result, CLS values reported by lab tools for a given page may be less than what real users experience in the field.
意訳しますと、ラボデータの算出に用いる環境では、ページの読み込み中に発生するレイアウト変化しか勘案されない、ということになります。従い、ラボデータの数値は良好だが、フィールドデータでは不良というページ
については、読み込み完了後において何かしらレイアウトに変化を加えていないか、確認いただく必要があると思います。
スクロールすると画面中にあるメニューが上部に固定されるUIでスクロール量に応じてposition:fixedにするようにしていると、メニューが固定/解除されるタイミングでCLSが増えていくのですが、この様なUIパターンでCLSを発生させない作り方はありますか？（スマートフォンのYahooトップのカテゴリ表示タブの様なUIです）
実際のUIやそれを実現しているコードを拝見しないことには何ともいえないのですが、Rick Viscomi氏のTwitterスレッドで言及されている状況が該当すると思われ、メニュー相当のスペースを確保することが回避策として示されています。より具体的な改善につきましては、恐れ入りますが当社までご相談ください。
アンケートにお寄せいただいたコメント（一部）
- 特定のトピック（今回はコアウェブバイタル）についてコンパクトながらしっかり知識を得ることができました。
- 内容がわかりやすく、すぐにでも対応できるところがありましたので、早速見直したいと思います。
- 実際の測定方法など、ツールの具体例をあげていただきわかりやすかったです。
- このような情報は調べてもすっきり理解するまで時間がかかるので、専門の方からわかりやすく整理してご説明いただき、大変勉強になりました。