こんにちは!メディアハッカーです。
今回は「Core Web Vitals」という新しいUX指標についてご紹介します。
「Core Web Vitals」は今後Googleの検索ランキングの要因に組み込まれるので、SEO対策のためにもwebメディア担当者は必読です!
▼この記事を読むとわかること
・Core Web Vitalsがどんな指標なのか
・なぜCore Web Vitalsに対応しなければならないのか
・どのようにCore Web Vitalsに対応すればいよいのか
3分でキャッチアップできるようざっくりと説明いたします!
目次
Core Web Vitalsとは
・3つのUX指標
Core Web Vitalsとは、2020年にGoogleが発表した新たなUXの3つの指標です。
![スクリーンショット 2020-10-21 18.01.59](https://assets.st-note.com/production/uploads/images/37164926/picture_pc_4b66970d7d6b42de205458142f8de147.png?width=800)
SEOにも反映予定2021年以降にGoogleの検索ランキングの要因に組み込まれると言われています。具体的なタイミングはまだGoogleから発表されていませんが、早めに対応しておきたいですね。
参考:https://webmaster-ja.googleblog.com/2020/06/evaluating-page-experience.html
Core Web Vitalsの背景
・UXのいいサイトが求められる傾向
![スクリーンショット 2020-10-21 17.46.03](https://assets.st-note.com/production/uploads/images/37164858/picture_pc_45f1d587358d0963ee0ec2984bb7a158.png?width=800)
ユーザーがUXのいいサイトを求めるため、Googleはページエクスペリエンスを重要視しています。Core Web Vitalsもページエクスペリエンスの一環です。
LCP
・どんな指標か
ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
つまり、「大事なコンテンツの読み込みスピード」と言い換えられます。
![スクリーンショット 2020-10-21 18.03.23](https://assets.st-note.com/production/uploads/images/37165410/picture_pc_2b3209d2ca9e94cab0bf4c3aae11fe3e.png?width=800)
・基準
![スクリーンショット 2020-10-21 18.04.16](https://assets.st-note.com/production/uploads/images/37165450/picture_pc_fab2a9550b06aa40305401f2d4546645.png?width=800)
FID
・どんな指標か
最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。
言い換えれば、「最初のアクションの反応がいいか」です。
![スクリーンショット 2020-10-21 18.05.25](https://assets.st-note.com/production/uploads/images/37165509/picture_pc_d92d1ffa9da5495a201ce3c0809310a4.png?width=800)
・基準
![スクリーンショット 2020-10-21 18.05.46](https://assets.st-note.com/production/uploads/images/37165516/picture_pc_2ffda59ec69a1ff3e9dfeb836aac7518.png?width=800)
CLS
・どんな指標か
ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。
つまり、「カクつかないか、ずれないか」ということです。
![スクリーンショット 2020-10-21 18.06.59](https://assets.st-note.com/production/uploads/images/37165573/picture_pc_a53a38a99705090f809b6710b90b6e49.png?width=800)
・スコアの算出方法
![スクリーンショット 2020-10-21 18.07.10](https://assets.st-note.com/production/uploads/images/37165582/picture_pc_0bb10e765db3d8ac357dfcb55edad668.png?width=800)
・基準
![スクリーンショット 2020-10-21 18.08.41](https://assets.st-note.com/production/uploads/images/37165596/picture_pc_aa529fc3dc83d6cf93226657af42e82a.png?width=800)
Core Web Vitalsに対応するメリット
Core Web Vitalsに対応するメリットは一言で言うならば、ユーザーエンゲージメントが高まりサイトの価値が向上することです。
・LCP
![スクリーンショット 2020-10-21 18.14.07](https://assets.st-note.com/production/uploads/images/37165648/picture_pc_087d06cd07ef6a5784542b11bfe8aed8.png?width=800)
・FID
![スクリーンショット 2020-10-21 18.14.32](https://assets.st-note.com/production/uploads/images/37165668/picture_pc_80db7a57b005b07fb3073b476d37058f.png?width=800)
・CLS
![スクリーンショット 2020-10-21 18.15.00](https://assets.st-note.com/production/uploads/images/37165673/picture_pc_ebe55e922916b9f166065dd17c210a10.png?width=800)
・改善できるKPI
・page/session
・pageview
・離脱率
・直帰率
・回遊率
・平均掲載順位
Core Web Vitalsの対応策
・LCP:画像や動画のサイズを小さくしたり、表示スピード自体をあげること。
![スクリーンショット 2020-10-21 18.17.31](https://assets.st-note.com/production/uploads/images/37165719/picture_pc_90eeff75b3d2b5f1c5ca28ee18328afa.png?width=800)
・FID:JavaScriptの実行時間を減らす、長い処理を分割して実行する。
![スクリーンショット 2020-10-21 18.18.45](https://assets.st-note.com/production/uploads/images/37165752/picture_pc_c7bec326e0495bbbcc8f2765bb0df378.png?width=800)
・CLS:サイズ不定な要素を無くし、レイアウトのズレを解消する。
![スクリーンショット 2020-10-21 18.19.27](https://assets.st-note.com/production/uploads/images/37165773/picture_pc_263c48be15bceedd7770a96540c2a2cf.png?width=800)
まとめ
・Core Web Vitalsは「LCP」「FID」「CLS」の3つのUX指標
・「LCP」は「大事なコンテンツの読み込みスピード」
・「FID」は「最初のアクションの反応がいいか」
・「CLS」は「カクつかないか、ずれないか」
・Core Web Vitalsに対応するとユーザーエンゲージメントが高まる
▼無料で読めるニュースレターの登録はこちらから
![](https://fourm.cdn.anymanager.io/wp-content/uploads/2022/09/メディアハッカー-1.png)