LCP,FID,CLSと書かれたプレート。

BLOG ブログ不具合

CLS に関する問題: 0.25 超!?今後ランキングに影響するCWV・コアウェブバイタル

公開日2021/4/27 更新日2021/8/16

颯 Sou

こんにちは、soublogを運営している作曲家ブロガーの颯 Souです。

CLSの問題が発生して困っていませんか?

2021年の6月中旬からコアウェブバイタルがランキングに影響します。

私は現在「CLSに関する問題:0.25越」が発生しており、対策をしている最中です。

同じ問題が発生している方がいるかもしれないので、私が行った対策をまとめておきます。

目次は次の通りです。

・ページエクスペリエンスがランキングに使用される

2021年6月中旬から、ランキングにページエクスペリエンスが使用されます。

先日次のようなツイートをしました。

LCP、FID、CLSの3つのコアウェブバイタルが重要になってきます。

Chrome User Experience Reportによると、これらの語句の意味は、

LCP:

Largest Contentful Paint(LCP)は、ページのメインコンテンツが読み込まれようとしたとき、ページの負荷のタイムラインでポイントを記録する、人が体感する読み込み速度を計測するユーザー重視の重要な指標です。高速なLCPは、ページが使いやすいことを指します。

FID:

First Input Delay(FID)はユーザーが応答しないページを操作しようとしたときに感じる体験を定量化するため、負荷の応答性を計測するユーザー重視の重要な指標です。FIDが低いと、ページが利用しやすいことを指します。

CLS:

Cumulative Layout Shift (CLS)は、ユーザーが予期しないレイアウトシフトを経験する頻度を定量化するため、視覚的な安定性を測定するための重要なユーザー重視の指標です。CLSが低いと、ページが快適になります。

です。

LCP, FID, CLSにおける、良好、改善が必要、不良の値。

・CLS に関する問題: 0.25 超の問題発生

ランキングに反映されるコアウェブバイタルですが、Google Search Consoleで確認することができます。

先日次のようなツイートをしました。

早速、見てみました。

Google Search Consoleの「ページエクスペリエンス」をクリックします。

ページエクスペリエンスの結果。ウェブに関する指標で失敗したURLが224あることを示している。

なんと、良好URLが0%になってました。

これはまずいですよね。

Google Search Consoleの「Webに関する主な指標」をクリックします。

ウェブに関する主な指標。

モバイルで不良URLが発生しています。

モバイルの右側のレポートを開くを開きます。

CLSに関する問題:0.25越え(モバイル)不良が224あることを示している。

CLSに関する問題:0.25越(モバイル)となっていました。

・CLSに関する問題:0.25超(モバイル)の対策と結果

私が行った対策は次の3点です。

・画像を固定にする
・Google Adsenseの自動広告を廃止
・Autoptivizeのプラグインを導入

・画像を固定にする

画像のWidthとHightに数値を入れておくと、ページが表示されて画像が読み込まれるまでに、画像のスペースが確保されて、ずれがなくなります。

しかし、WordPressでどうやってWidthとHightを入力すればいいのか。

方法があります。

記事上で、画像をクリックします。

そして、ブロックの中の、AMP設定のAMPレイアウトの固定を指定するだけです。

CLS対策のためにWordPressで画像の固定をする方法。

・Google Adsenseの自動広告を廃止

自動広告を廃止しました。

ネット情報の口コミから自動広告を廃止したら改善したという結果を知ったからです。

・Autoptivizeのプラグインを導入

AutoptimizeのプラグインはCSS、JS、画像、Google フォントなどを最適化することでサイトの応答を高速化します。

Autoptivizeを導入しました。

Page Speed Insightが改善しました。

・結果CLSは改善された

CLSが改善できたがどうかは、最大28日かかります。

しばらく待つことにします。

...1日経過後

よい結果が返ってきたので報告します。

不良URLが0件になり、良好URLが234件になりました

ウェブに関する主な指標。CLSが改善した。

所感的に、画像を固定したのが良かった印象です。

・コアウェブバイタルを表示するツール

セットアップ。

・Chromeの拡張機能 Web vitals

Chromeの拡張機能を使えば、コアウェブバイタルを確認できます。

Googleの拡張機能 Web vitalsで、LCP,FID,CLSを表示している様子。

ChromeのWebストアからインストールできます。

・CRUX Page Speed Trends

先日次のようなツイートをしました。

CRUX PAGE Speed Trendsを使うと、LCP、FID、CLSの軌跡が分かります。

CRUX Page Speed Trendsの解析結果。

導入方法はこちら

・コアウェブバイタルの参考情報

インフォメーション。

先日次のようなツイートをしました。

・まとめ

2021年6月中旬から段階的にコアウェブバイタルがランキングに影響します。

CLS に関する問題: 0.25 超に対して行った対策は、

・画像を固定にする
・Google Adsenseの自動広告を廃止
・Autoptivizeのプラグインを導入

です。

なお、結果は最大28日かかります。

改善後、1日で結果が出ました。

CLSは改善です。

所感は、画像の固定をしたのが良かったと感じました。

以上、参考になれば幸いです。

BLOGに戻る

  • この記事を書いた人

颯 Sou

【経歴】京大院卒/大企業/自由を求め脱出/作曲家・ブロガーのフリーランス 【作曲】21曲リリース/AWA動画広告BGMプログラム採用実績あり/Audiostock審査通過/委嘱楽曲の提供経験あり 小学校でピアノを習い、中学校でアコギを買い、高校でエレキを始め、大学で軽音サークルに入り、社会人から作曲家でボカロPとして音楽活動をしています。 【ブログ】soublog500記事/昨年13万PV 社会人になってからブログ制作を開始。最初はボカロ活動を広めることを目的に執筆。「ボカロPになるには」というキーワードで検索順位1位に。また途中から自己啓発を発信し、「自己啓発 一覧」というキーワードで1位を獲得経験あり。SEOを考慮したブログノウハウも発信中。

-BLOG, ブログ不具合
-,