Core Web Vitalsの詳細とSEOや最適化の話
Googleは検索体験をより良くするため、Webまわりでいろいろな取り組みを行ってきました。
WebアプリやWebサイトをネイティブアプリに近づけるPWA（Progressive Web App）や、検索結果からのページ読み込み速度を劇的に高めるAMP（Accelerated Mobile Page）などはその代表例です。特にAMPは近年多くのメディアやブログ、その他サイトが導入し、検索からの訪問者の体験を大きく向上させています。
そして2020年、GoogleがUX（ユーザーエクスペリエンス）を評価するための新たな指標 Web Vitals を発表しました。
UXの良し悪し（品質）を決める要因は多数ありますが、中には特定のサイトやコンテンツに限定されたものもあります。それら多くの要因の中でも共通項として普遍的に大切であるとされる3つの指標は合わせて Core Web Vitals（コア ウェブ バイタル）と呼ばれています。
そしてその3つのシグナルとは、
* LCP: Largest Contentful Paint
* FID: First Input Delay
* CLS: Cumulative Layout Shift
です。
それぞれGoogle Developersブログにも解説が載っていますが、今回は対策や最適化案なども含めてそれぞれ解説します。
Largest Contentful Paint（LCP）
LCPはユーザーがページのメインコンテンツをどれくらい早く見ることができるかを表す指標です。
ここでメインコンテンツとはviewport内の一番大きな画像や動画、あるいはテキストブロックです。
そのページの主要な内容が見えない限り、そのページはユーザーにとって有益ではない、ということでこのLCPが大事とGoogleは考えています。
LCPは2.5秒以下でGood、4秒以上かかるとPoorという判定になります。
メインコンテンツではやはり画像や動画が（ある場合は）ロード時間としてのボトルネックになる場合が多いと予想されるため、この部分の最適化方法としては
* 画像の圧縮
* WebPなどフォーマットの最適化
* CDNを使った配信速度の向上
などが挙げられます。
また、SPAなどでクライアントサイドでレンダリングを行っている場合はそこで処理に時間がかかってしまうこともあるため、サーバーサイドレンダリングやプリレンダリングも検討しましょう。
このほかJavaScriptの非同期化など含めたレンダリングブロック対策、サーバー最適化、キャッシュの利用などいろいろありますが、これらLCPの改善方法については以下のページにGoogleが全部まとめてくれています。
First Input Delay（FID）
FIDはユーザーが初回のインターアクションを行い、そのイベントに対してブラウザが処理を開始するまでの遅延を表します。ページの反応速度の指標、と言えるでしょう。
ここでインターアクションとは、ページ上のボタンをやリンクをクリックするといった行為等を指します。
いくらページでテキストや画像が見えていたとしても、詳細ページへのリンクをクリックしても動かなかったり、メニューアイコンを開けなかったりしたらUXとしてはよろしくない、とGoogleは考えます。
FIDは100ミリ秒以下でGood、300ミリ以上でPoorと判断されます。
ポイントとしては、FIDはユーザーによるイベントに対してブラウザ側で処理が開始されるまでの遅延であり、その処理自体が完了するのにかかる時間は考慮されていません。
FIDはインターアクションに関連する指標ということなので、対応策としては主にJavaScriptの処理の改善がメインになります。非同期処理を取り入れたり、タスクを小分けにしたりすることが挙げられます。やや複雑な場合はWeb Workerを利用することも効果的です。
FIDの改善方法については以下のページに情報がまとめられています。
Cumulative Layout Shift（CLS）
CLSはページのレイアウトの視覚的なずれを表す指標です。
例えばあとから読み込まれたコンテンツが他のコンテンツを上下（あるいは左右）に押すことによって見た目のレイアウトが変化する、というような場合を想定します。
具体的なケースとしては、例えばサードパーティーが配信する広告がページの上部にあとから表示されたり、TwitterやInstagramなどの投稿があとから表示されるようなページが挙げられます。
途中でいきなりレイアウトが変わってしまうと、意図しないボタンを押してしまったりといった混乱が生じる可能性があるため、UXの品質評価にとってこれは重要とGoogleは判断しています。
CLSの算定には layout shift score というスコアが用いられ、これは以下のように計算されます。
layout shift score = impact fraction * distance fraction
ここで impact fraction は画面シフト前後を合わせたエリアがそのページ（viewport）に対してどれだけの領域を占めているかを表し、distance fraction はどれだけの距離を移動したかを表します。
そして0.1以下であればGood、0.25以上であればPoorと判断されます。
CLSは主に外部サービスからコンテンツを取ってくるようなページで注意が必要になります。改善案としては、
* viewportの上部への（外部配信による）広告表示やを避ける
* iframeやその他embedを使って外部からコンテンツを表示させる場合は最適なサイズで height と width をあらかじめ指定し、スペースを確保しておく
などが考えられます。
CLSの最適化方法については以下のページを参照ください。
Core Web Vitals の計測方法
Core Web Vitals は一般的に以下の3つの方法で実際に計測、評価確認が可能です。
1. Chrome ユーザーエクスペリエンス レポート（CrUX）
2. PageSpeed Insights
3. サーチコンソール内のCore Web Vitalsレポート
これ以外にもAPIを使って計測できますし、一部Chrome DevToolsで確認も可能です。
常日頃からサーチコンソールを確認しているウェブマスターであれば、サーチコンソールからの確認がやりやすいかと思います。
左側メニュー内の「ウェブに関する主な指標」をクリックすると詳細レポートを見ることができます。
ここで「不良」と出ている部分は早急に対策を行った方がいいでしょう。もちろん「改善が必要」も出来るだけ対策を取り入れたいところです。
PageSpeed Insightsもページ事に確認ができるので便利です。
ひとつのページで計測から分析結果、そして対策まで表示されるので、情報にまとめてアクセスできます。
より良いUX = SEO
この Core Web Vitals は2021年以降に正式に検索結果のランキング要因（SEO要因）になると言われていますが、少なくとも導入の半年前にはGoogleから発表があるそうです。
ということでまだまだ時間はありますし、これを理由に見直すというよりも、これらはより良いユーザー体験を提供するための指標なので、ウェブマスターとしては日頃から気にして改善を施すべきポイントであると言えます。
以前からの流れでもありますが、検索結果のランキングのために何かを行うのではなく、ユーザー体験を向上させることによって、結果としてランキンにも良い影響がでる、というマインドが正しいです。
尚、このUXの指標である Core Web Vitals が正式にランキング要因に加わったとしても、一番大事なのはコンテンツそのものであることに変わりはありません。いくらUXが良くても検索者の意図（intent）に合った内容でなければランキングとして上位を狙うのは難しいでしょう。
あくまで検索ワードや検索者の意図に合致したクオリティーの高い情報を発信するということを大前提に、その上でUXの改善も頑張りましょう、という捉え方が良いと思っています。