この記事は以下の悩みや要望を持つ方にオススメです。
- GoogleサーチコンソールでCLSに関する問題が起きた！
- CocoonでCLS値を改善する方法を知りたい
- 具体的にCLS値をどれくらい改善できるのか気になる
先日、Googleサーチコンソールを確認したところ、このブログでCLSに関する問題が起きていました。
188ページは多すぎる…
CLSの問題が起きているのはPC表示のみであり、今まで「良好URL」だった記事全てが「改善が必要なURL」になっていました。
こんな風に突然切り替わることあるんですね…
実際にPC表示をページインサイトで確認すると、CLS(Cumulative Layout Shift)の数値が高く、パフォーマンスが82点になっていました。
個別ページ・トップページに関わらず、ほぼ全ページのCumulative Layout Shiftが0.2前後になっていました。
流石に全記事分改善が必要なのは困るため、実際に色々試してCLS値を0.098まで改善しました。
調べてみると、CLS値が高くて困っている人は意外と多かったため、備忘録としてまとめておきます。
【追記】時間がかかりましたが、Googleサーとコンソールの方でもCLS値の問題が解決されたみたいです。（方法は間違ってなかったっぽい）
＊ブログのアイキャッチ（サムネ）はCanva
を使用しています。
【Cocoon】CLS値をたった1分で改善できる方法
CLS値の改善方法を解説する前に、このブログの基本情報について紹介しておきます。
運営者：個人(ブログ初心者)
使用サーバー：ConoHa WING
使用ブログ：WordPress
使用テーマ：Cocoon
ブログジャンル：YouTubeの動画編集や機材解説＆副業系
投稿頻度：ほぼ毎日→1週間に1~2記事ほど
プログラミング経験：Pythonのみ(ブログには不使用)
1記事平均文字数：3500文字前後
投稿記事数：240記事(2022/03/18時点)
今回、有効だったCLS値改善方法はCocoonテーマ使用者向けですが、他のテーマでも同じことが出来るかもしれないので参考にしてみてください。
＊私はSEOの専門家では無いため、間違った情報や表現が含まれている可能性があります。
【結論】ヘッダーロゴを改善するとCLS値が下がった
結論から言うと、Cocoonでヘッダーロゴサイズを設定するとCLS値の問題を改善出来ました。
Cocoonのヘッダーロゴサイズ指定は1分どころか、30秒もあれば簡単に出来るのでCLS値で悩んでいる人は設定してみると改善できるかもしれません。
おそらく、CLSを計測する時に画像の幅と高さがあらかじめ設定されているかどうかが判断の一つになっている為、ヘッダーロゴサイズの設定がCLS改善に繋がったと考えています。
次はCLS値を改善出来なかった方法を紹介していきます。
CLSを改善出来なかった方法①不要プラグインの削除
共有可能なプレビュー用URLを作成出来るプラグインを削除して下画像のプラグインのみにしましたが、CLS値にはほとんど変化がありませんでした。
元々、不必要にプラグインを入れていないため、１つくらいプラグインを削除してもCLS値は変わらないのかもしれません。
＊Autoptimizeによる高速化設定は元々行なっています。
CLSを改善出来なかった方法②動的コンテンツ（カルーセル）の削除
Cocoonには「カルーセル」と呼ばれるオススメ記事をスクロール表示する機能があります。
おそらく、この記事のトップにも表示されていると思います。
ネットの情報によると「カルーセルのように自動で動くようなコンテンツ・機能はページの表示を遅くする」とあったので一旦カルーセルを非表示にしてページインサイトで計測しましたが、CLS値は全然変わらなかったです。
結果的にはカルーセルを表示したままでも、ヘッダーロゴサイズを指定することでCLS値が小さくなったため、カルーセルを気にする必要は無いと考えられます。
追記：カルーセルのクリック率が低かったので削除しました。
CLSを改善出来なかった方法③Googleアドセンスの自動広告をオフ
Googleアドセンスの自動広告をオフにしてみましたが、CLS値は変化しませんでした。
自動広告をオンにした状態だと、下画像のように広告が遅れて表示されています。
しかし、広告が表示されていない状態でも事前にスペースが空いているため、自動広告の有無がCLS値に影響しなかったのだと考えています。
CLSを改善出来なかった方法④アイキャッチ画像の表示をオフ
記事を開くとアイキャッチ画像が表示される設定になっていた為、アイキャッチ画像を表示しない設定にしましたが、CLSに効果はありませんでした。
ブログのアイキャッチは事前にEWWW Image Optimizerで軽量化し、サイズも決まっている為、CLS値に影響が無かったのかもしれません。
CLS値改善についてのまとめ
Cocoonのヘッダーロゴサイズを設定することにより、たった1分でCLS値を0.098まで改善することが出来ました。
意外と他サイトではヘッダーロゴサイズを指定する改善方法が紹介されていなかったので、似たような問題で悩んでいる方は参考にしてみてください。
また、下の記事ではブログを1年間運営してきた結果がまとめてあるので興味がある方は是非読んでください。
