Chrome Dev Summit Recap 2020「Core Web Vitals」

こんにちは。ウェブ解析士の佐藤佳です。
昨日に引き続き、Chrome Dev Summit Recap 2020から「 Core Web Vitals 」のお話です。

そもそも Core Web Vitals って何？と言う方は、
こちらのブログを参考にしていただければ幸いです。

▼GoogleのCore Web Vitals（コアウェブバイタル）とは？
https://web-analyst-chanoma.com/archives/6376

では、さっそくSummitの講義についてお話を進めていきます。

結論から言うと、WebサイトがCore Web Vitalsのしきい値を充たしていれば、
最初のコンテンツが描写される前にユーザーが離れる確率が24％低くなりますので、
みなさん Core Web Vitalsやりましょうね、という話でした。

対策のポイントとして、以下の３つが発表されていました（そのまま列挙します）。

１）Insert new content carefully
ユーザーの操作に応答する場合を除いて
既存のコンテンツの上にコンテンツを挿入しないようにする。
（スムーズで予測がしやすいエクスペリエンスをユーザーに提供する）

２）Give Instant Feedback
ユーザーの操作に応答して、コンテンツを移動する必要がある場合は即座に移動する。
（ネットワークリクエストの完了まで待たせてはいけない）

リクエストの完了までに500ミリ秒以上かかりそうな場合は
プレースホルダを使用してコンテンツの読み込み時のスペースを予約します。

３）Match Visuals to Reality
ページ上の全てのインタラクティブ要素について
表示がインタラクティブに見える場合は、実際にインタラクティブにする。

サーバーサイドレンダリングを使用する場合は、
ページを読み込み中状態または無効状態でレンダリングし、
インタラクティブになる準備が整ってからページをアップロードする。

これらの内容はマーケターだけでコントロール出来ないと思いますので、
UXデザイナーや開発者と話し合いながら進めていきましょう。

今回はここまでです。
また次回のブログでお会いしましょう。