Googleは2021年6月以降にコアウェブバイタル（Core Web Vitals）をランキング要因のひとつにすると発表しました。
GoogleはUX（ユーザー体験）を向上させることでユーザーの利便性が上がると考えています。
Googleが重要視している指標でサイトを上位表示させるには必ず対策しなければならない項目です。
コアウェブバイタル（Core Web Vitals）には3つの指標があります。
LCPとFIDとCLSです。
のちほど詳しく解説します。
このうちのひとつCLSで問題が発生しました。
「CLSに関する問題: 0.25超」というURLが52ページも出てしまったため、あわてて対処しました。
これからご紹介する対処方法で翌日にはすべて解消されました。
コアウェブバイタル（Core Web Vitals）はGoogleアナリティクスで確認することができます。
また、以下のサイトでページスピードを測ることができます。
Googleが提供しているサービスです。
自サイトのトップページや各ページを入力して計測することができます。
さらに気になる競合ページも計測することができます。
公式サイト：PageSpeed Insights – Google Developers
コアウェブバイタル（Core Web Vitals）とは
ウェブバイタル（Web Vitals）とは、Googleが提供する「UX（ユーザー体験）向上のガイドライン」を指します。
特に中心（Core）となる3つの指標をコアウェブバイタル（Core Web Vitals）と呼びます。
以下がその3つです。
LCP（Largest Contentful Paint）：読み込み時間
サイトページ内でメインとなる最も大きな画像や動画の表示スピードを指します。
2.5秒未満が「良好」、2.5秒以上4秒以下は「改善が必要」、4秒を超えると「不良」と判断されます。
FID（First Input Delay）：初回入力遅延
ユーザーが最初にリンクをクリックしたりテキスト入力するなどアクションを起こした場合の反応速度を指します。
0.1（100ミリ）秒未満が「良好」、0.1秒以上0.3秒以下は「改善が必要」、0.3秒を超えると「不良」と判断されます。
CLS（Cumulative Layout Shift）：ページコンテンツの視覚的な安定性
画像や広告が遅れて表示されるなどユーザーが予期しないコンテンツのズレを指します。
このズレが大きい場合、誤クリックなどの原因になります。
気になるリンクや画像をクリックしようとしたら、急に表示がズレて広告をクリックしてしまったなどがそうです。
スコアは「影響を受けた面積」×「移動した距離」で計算されます。
0.1未満が「良好」、0.1以上0.25以下は「改善が必要」、0.25を超えると「不良」と判断されます。
参考：Web Vitalsの概要 サイトの健全性を示す重要指標 －Google Developers Japan－
この3つの指標の評価が低い場合、サイトの評価も下がります。
ユーザーが満足するサービスが提供できないサイトという判断になります。
そうなれば当然、上位表示が難しくなります。
LCPとFIDの改善方法
Cocoonのサイト高速化
Cocoonは簡単にサイト高速化ができるようになっています。
ページスピードの評価が悪い場合は、チェックが入っているかどうか確認してください。
「Cocoon設定」の「高速化」から確認ができます。
「ブラウザキャッシュ」「HTML縮小化」「CSS縮小化」「JavaScript縮小化」「Googleフォント」にチェックを入れます。
チェックが入っていない場合は、チェックを入れて保存してください。
これだけでもかなり評価点数は改善すると思います。
特にCSSコードの書き込みを頻繁におこなっているサイトは「CSS縮小化」がかなり効くと思います。
Googleアドセンスの広告配置
アドセンスやアフィリエイトの広告はページスピードを遅くすると言われています。
広告は必要最低限に設置することをおすすめします。
また、広告配置も重要になってきます。
私はアイキャッチ画像のすぐ下に広告を配置していました。
広告はページの上部にあるほど評価が下がるという話もあります。
ページ上部の広告は、はずしたほうがいいかもしれません。
ユーザーの利便性を考え、記事の邪魔にならない位置に設置してください。
画像を圧縮する
様々なサイトで推奨されているプラグインが「EWWW Image Optimize」です。
画像をアップロードした際に画像を圧縮してくれて、画像の位置情報も削除してくれるプラグインです。
非常に便利だと感じたので私も導入してみました。
導入前はPageSpeed Insightsのパソコン評価は80以上だったのですが、導入後は30台まで下がってしまいました。
プラグイン同士や使用しているテーマによっては相性の悪いものがあるようです。
正直、原因はわかりませんでした。
同じCocoonを使用している人は問題ない人もいるようなので、テーマが原因ではなさそうです。
EWWW Image Optimizeを無効化したらまた80以上に戻ったので、このプラグインの導入が原因だったのは間違いないです。
結果としてEWWW Image Optimizeの導入はあきらめ、TinyPNGを利用しています。
TinyPNGはプラグインではありません。
登録などは必要なく、Web上で圧縮してダウンロードできるサイトです。
EWWW Image Optimizeの圧縮率は10％程度ですが、TinyPNGを使って圧縮すると70％前後圧縮できます。
画像ごとに自分で圧縮しなければならないのは面倒ですが、慣れればそんなに手間ではありません。
圧縮率をみてもTinyPNGの利用をおすすめします。
プラグインの導入は必要最低限にしてください。
サイトの動作が重くなる原因になります。
CLSの改善方法
CLS不良はコンテンツのズレで起こります。
ズレが起こる原因は、先に文字やテキストリンクが表示されて、あとから画像が表示されるからです。
文字やテキストリンクは軽く、画像は重いからです。
先に表示された文字を押しのけるように画像が表示されるため、文字やリンクがズレるというわけです。
CLS不良の多くの場合が、画像の遅延読み込みが原因です。
画像の遅延読み込みとは、画像を一気に読み込まずスクロールで表示領域に入ったときに順番に読み込むというものです。
一気に読み込まないことで表示スピードが上がるという仕組みです。
CocoonにはLazy Loadで画像を遅延読み込みする方法が標準搭載されています。
Lazy Loadとは、画像の遅延読み込みをおこなうためのJavaScriptライブラリです。
これにチェックが入っている場合、CLSに悪影響を及ぼすことがあるようです。
ページ下部に飛べるリンクや高速スクロールができるマウスの場合、一気にページ下部に飛んでしまいます。
画像が読み込まれる前にページ下部に移動してしまうとコンテンツのズレが大きくなる原因になります。
修正方法としては2つあります。
①imgタグにwidthとheight属性を設定する
②cssでレスポンシブな箱を用意する
コンテンツがズレないように画像が読み込まれる前にあらかじめ画像の表示領域を確保しておくための解決策です。
しかし、いずれも知識がなければ難しいです。
私の場合、LCP・FID（表示スピード）よりCLS（表示のズレ）のほうが問題が大きかったためチェックをはずしました。
このチェックをはずしただけでCLSが改善されました。
まとめ：ウェブに関する主な指標はランキング要因
Googleはコアウェブバイタル（Core Web Vitals）をランキング要因のひとつと考えています。
SEO対策としてはずせない項目になりました。
GoogleサーチコンソールでLCP・FID・CLSの不良が確認された場合は、なるべく早く対処したほうがいいです。
面倒だからといって放っておくのは得策ではありません。
各テーマによってサイト高速化の方法が違うと思います。
Cocoonをご利用の方はご紹介したとおりの方法で高速化できます。
それ以外のテーマをご利用の方も調べれば出てくると思いますので、なるべく早く対応することをおすすめします。
※※※※※
コアウェブバイタル（Core Web Vitals）がランキング要因のひとつだとしても、この評価を上げただけでランキングが上がったという話は聞きません。
現状、SEO対策としてはキーワード選定のほうが圧倒的に有効です。
初心者にもわかりやすくSEO対策とキーワード選定についてまとめました。
>>【SEO対策のやり方】ブログ記事のキーワード選定の基本と効果
