2021年からランキング要因となるウェブ バイタルのCLSが0.25を越えないために試したこと

いよいよ2021年からランキング要因にウェブ バイタルが含まれる

Core Web Vitalは、新しくSEOランキング要因になります。

ランキング要因となるのは、2021年以降といわれています。(一部影響をが出始めているといっている人もいるという情報もあります。もうそろそろ準備が必要か？)

Core Web Vitalのランキングシグナルは、一般的なクエリでより大きな役割を果たすらしい。

Core Web Vital

Core Web Vitalには以下の３要素があります。

出典Web Vitals の概要: サイトの健全性を示す重要指標
https://developers-jp.googleblog.com/2020/05/web-vitals.html

LCP（Largest Contentful Paint）：ページがすべて読み込まれるまでの時間。

FID　（First Input Delay）：ページが読み込まれユーザーが初めて入力できるまでの遅延。

CLS（Cumulative Layout Shift）：ページレイアウトの安定性。ページのずれ幅。

サーチコンソール　ウェブに関する主な指標で確認

CLS改善に関しては多くの情報が出ています。

Core Web Vitalの改善に関しては、改善に向けて多くの情報が試されています。

特に、CLSが2.5を越るエラーや警告がサーチコンソールに報告されている場合が多く、様々な改善方法を試しているようです。

ここでは、CLSが2.5を超えるエラーや警告に関しての原因として記載されている事項を中心に記載されたサイトのURLと情報を記載しています。

海外ＳＥＯブログ

Core Web Vitals改善: 安定版Chromeで大きなCLSを発生させている要素を特定する

①画像のimg タグにwidth 属性とheight属性が設定されていない。
②JavaScriptで動的にコンテンツを埋め込む。

【ワードプレス　ルクセリタス】CLS に関する問題: 0.25 超（モバイル）、おいらの解決方法

出典　https://sotobou-aji.com/archives/post-10943.html

①WEBフォントを非同期で読み込んでいた。

「ウェブに関する主な指標」【Luxeritas】

出典https://nowaki.work/corewebvital-cls

①すべてのLazy Load (画像の遅延読み込み)が有効になっている。

CLSに関する問題:0.25超の対処

出典　https://pix524.net/cls-025-improvement/#toc_id_1_1

①LasyLoadが有効になっている。
②Adsenseの自動広告を行っている。

CLS に関する問題: 0.25 超（モバイル）が出てしまい解決策がわかりません。 | Cocoonテーマに関する質問 | Cocoon フォーラム

出典　https://wp-cocoon.com/community/cocoon-theme/cls-%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E5%95%8F%E9%A1%8C-0-25-%E8%B6%85%EF%BC%88%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%EF%BC%89%E3%81%8C%E5%87%BA%E3%81%A6%E3%81%97%E3%81%BE%E3%81%84%E8%A7%A3%E6%B1%BA/

①サムネイルのサイズをサイト内で固定してない

ブログのアクセス数が激減＊「CLSに関する問題」との関係は？Googleアップデートが関係している？

出典　https://funasaan.hatenablog.com/entry/2020/06/20/174235#%E5%8F%82%E8%80%83%E3%83%9A%E3%83%BC%E3%82%B8-1

①動画と画像を多用しすぎ
②ページが重くて読み込みにくい

「CLS に関する問題」が改善→すべて良好となったので経過メモ

出典　https://orita-ani.net/cls-no-memo/

①使用していないjavascriptが足を引っ張る
②アドセンスの使用
③Googleタグマネージャーの影響
③ウィジェットの広告の影響
④PHPバージョンが古い

「CLS に関する問題: 0.25 超（パソコン） 」がやっと解決したので解説してみる！【SEO】

出典　https://dokugaku-koumuin-no1.com/seo/cls-error/

①アイキャッチとサイドバー広告にサイズ指定がされてなかった

問題解析手順

CLS 0.25 超に関する問題は、やみくもにアクションだけとってもなかなか改善できないようです。

CLSの原因や発生個所を特定する手順やツールについて書かれたサイトもありました。

クロム拡張機能Web Vitalsの使用

出典　https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

CLS（Cumulative Layout Shift）を計測してみた

出典　https://www.alta.co.jp/blog/post-582/

開発者ツールを使ってCLSの発生ポイントを探す。（調査手順がサイト内にあります）

自分の場合

レンタルサーバー　カラフルボックス　lightspeed Cacheプラグインを使用してました。

上記すべて試しても改善しないので、lightspeed Cacheプラグインの設定を見直したところ、
ページの最適化項目中のCSSを非同期ロードをオンにしてしまっていた。（オフにして改善）

あまりにも当然で情けないことでした。