CLSに関する問題を改善する方法を具体的に解説【SEO対策】
私はSEO対策をしながらブログやサイトを運営しています。
先日に「Search Console」の「ウェブに関する主な指標」を確認。
すると、「CLS に関する問題: 0.25 超」という警告が表示されていました。
少し調べてみると、Googleが「2021年5月からCore Web Vitals(ウェブに関する主な指標)をランキング要因にする」と発表していることがわかりました。
SEOでページ順位も維持したいので、何とかCLSを「不良」から「良好」状態に改善したいです。
CLSに関する問題の改善方法を具体的に教えてください！
こんな悩みを解決します。
この記事の内容
- CLSに関する問題の改善方法を具体的に解説
- CLS発生の原因を確認する方法
この記事の筆者
この記事を書いている私は、ブログ運営歴5年目です。
ブログのおかげで生計を立てられており、当ブログだけで350万円以上稼いでいます。
SEO対策を頑張っているあなたなら、CLSに関する問題の重要性をご存知かと思います。
2021年5月からSEOの評価指標に加わると発表されていますし、記事の順位が落ちるかもしれないので悩みますよね。
私も当ブログを運営していて、CLSの改善にはかなり悩まされました。
というのも、すべてのページが「CLS に関する問題: 0.25 超」に該当して「不良」扱いされていたからです。
ですが、色々な文献を調べつつ改善していた結果、下記画像のとおり全ページを改善することができました。
では、具体的にどのような対策を実施して改善できたのか？
この記事ではCLSの改善方法を詳しく解説していきます。
あなたもこの記事を読みながら対策すれば、CLSに関する問題が改善されますよ！
それではご覧ください。
CLSに関する問題を改善する方法を具体的に解説【SEO対策】
事前知識として、そもそもCLSって何？という方に向けて簡単に解説しておきます。
CLS(Cumulative Layout Shift)とは、ページ内のレイアウトのズレを数値化した指標のことです。
数値スコアが低いほど良好と判定され、高いほどCLSが不良と判断されます。
「0.1未満＝良好」「0.1超＝改善が必要」「0.25超＝不良」
詳しくはCumulative Layout Shift (CLS)で解説されています。
あなたもページ閲覧時に、広告がいきなり表示されて誤クリックしてしまった経験や、レイアウトがいきなり崩れた経験があると思います。
CLSがあるとユーザーにとって迷惑ですし不便ですよね？
なので、今後の検索結果の順位決めに取り入れられようとしているわけです。
さて、そんなCLSの問題の改善方法は結論、下記のとおりです。
- 画像のimgタグにwidth属性とheight属性を設定する
- Lazy Loadで代替のローディング画像を使用しないようにする
- サイドバーのスクロール追従をやめる
- 自動広告のページ内広告をオフにする
順番に詳しく解説していきます。
CLS改善方法①：画像のimgタグにwidth属性とheight属性を設定する
CLSの原因として、画像表示のimgタグにwidth/height属性が設定していない点が挙げられます。
ページで画像を表示する際に、画像のサイズが予め指定されていないとレイアウトがずれるからです。
Addy Osmani氏の下記ツイートをご覧いただければ、イメージが湧くと思います。
Tip: Set width & height on your <img> elements. This now allows modern browsers to infer their intrinsic size pre-download, reducing layout shifts. pic.twitter.com/yhsIftiJzR
— Addy Osmani (@addyosmani) June 27, 2020
左の例は、画像サイズを指定していない場合。
右の例は、画像サイズをきちんと指定している場合。
あきらかに左の例は、レイアウトがずれていますよね？
なので、ページに画像を掲載する場合は、必ずimgタグにwidth/height属性を設定しましょう。
具体的には下記のとおり。
<img src="sample.png" alt="サンプル画像" width="150" height="150">画像に対して「html編集」を選択すればhtmlコードを編集できます。
上記のようにwidth(横幅)とheight(高さ)を指定しましょう。
WordPressを使っているなら、自動でwidth/height属性を挿入してくれています。
試しにページ上の画像に対して右クリックから「検証」を選択してみてください。
画像のhtmlコードにwidth/height属性が設定されていることが確認できるはずです。
なので、WordPressを使っている方は、width/height属性の対策は基本的に必要ありません。
ただし、WordPressのテーマによっては、独自の画像ブロックが搭載されているものもあります。
独自のブロックは、WordPress公式の機能ではないので、width/height属性が設定されていない可能性もあるのです。
なので、WordPressテーマ独自のブロックを使って画像を表示している方は、一度htmlコードを確認してください。
CLS改善方法②：Lazy Loadで代替のローディング画像を使用しないようにする
CLSの原因として、Lazy Loadで代替のローディング画像を使用している場合が挙げられます。
Lazy Loadとは、Webページを開いたときにページ上に存在する画像の読み込みを遅延表示するための技術です。
通常、Webページを開くとすべての画像の読み込みがされます。
すると、ページを開く際に大きな負荷が生じ、表示速度が遅くなってしまいます。
そこでLazy Loadを使うことで、画像の表示画面にスクロールするまで画像の読み込みを遅れさせることができます。
ちなみに画像が読み込みされるまで、代替のローディング画像を設定できるものもあります。
このとおり、Lazy Loadはページ表示速度を上げるための便利な技術です。
しかし、使い方を間違えるとCLSが発生する原因になります。
例えば、代替のローディング画像を使用する場合です。
画像が表示されるまでの間、代わりに表示しておくための「ローディング画像」を設定してしまうとCLSが発生します。
CLSが発生する理由はシンプルです。
例えば、下記のような場合。
・表示したい画像のサイズが「width 320px / height 240px」
・代替のローディング画像のサイズが「width 300px / height 200px」
この場合、双方の画像サイズを比較して「width 20px / height 40px」の誤差が生じますよね？
つまり、「横に20px / 縦に40px」のレイアウトのズレが生じることになるわけです。
なので、Lazy Loadを使用するときは、代替のローディング画像は使用しないようにしましょう。
WordPressでver.5.5以降を使っている方は、「Native Lazyload」が標準機能として実装されています。
WordPressでは画像にwidth/height属性が指定されていれば、自動的に「loading="lazy"」というコードが挿入されて「Native Lazyload」の対象となります。
つまり、WordPressの標準機能「Native Lazyload」なら、遅延ロードでCLSは発生しません。
画像にwidth/height属性が設定されていなければ、遅延ロードされないからです。
なので、WordPressを使っている方は標準搭載の「Native Lazyload」を使うようにしてください。
他のLazy Loadプラグインなどは即刻利用をやめたほうがいいですよ。
他のLazy Load技術だと、画像にwidth/height属性が設定されていなくても、問答無用で遅延ロードしてしまうからです。
つまり、CLSが発生するリスクがあります。
CLS改善方法③：サイドバーのスクロール追従をやめる
CLSの原因として、サイドバーなどのスクロール追従が挙げられます。
パソコンでWebページをスクロールして見ていると、記事の横の「サイドバー」が追ってくるように表示されることはないでしょうか？
実はサイドバー追従もCLSの発生の原因になるのです。
スクロールした際、追従型サイドバーが微妙にズレているのを目視で確認できますよ。
なので、スクロール追従を設定している場合は、CLSの改善のために即刻やめることをオススメします。
実際のところ、ほとんどの読者ユーザーはサイドバーを見ていません。
そして、スマホでブラウジングすることの多い現代において、サイドバーで読んでほしい記事などをアピールしたところで見てもらえません。
なぜならサイドバーに行くまでにページから離脱してしまうので。
サイドバー追従を実装したために、CLSの不良でSEO評価が下がるのはもったいないです。
なので、追従型サイドバーはやめて普通のサイドバーに変更しましょう。
CLS改善方法④：自動広告のページ内広告をオフにする
CLSの原因として、Googleアドセンスの自動広告(ページ内広告)が挙げられます。
自動広告はページ内に自動で広告が挿入されるので、ページレイアウトが移動してしまいます。
なので、自動広告をオフにするか、自動広告のページ内広告だけオフにするのがオススメです。
ちなみに、全画面広告とアンカー広告に関しては、CLSの発生原因にはなりません。
なので、この2つは安心して使って大丈夫ですよ。
CLS発生の原因を確認する方法
次に、CLSの発生原因を特定する方法を解説します。
サイトによってCLSの発生原因は違います。
なので、これまでご紹介してきたCLS改善を実施しても、CLSが発生する可能性があるのです。
さて、CLS発生の原因を特定する方法は下記のとおり。
- 「PageSpeed Insights」を使う
- Chromeの拡張機能「Web Vitals」を使う
順番に解説します。
CLS確認方法①：「PageSpeed Insights」を使う
SEO対策をしていれば、すでにこのツールはご存知だと思います。
CLSの発生原因を確認するなら、まずはこの「PageSpeed Insights」を使いましょう。
PageSpeed Insightsの使い方
- PageSpeed Insightsに調査したいページURLを入力
- URL入力後「分析」をクリックして結果の表示を待つ
- 「ラボデータ」の項目「Cumulative Layout Shift」を確認
- 「診断」の項目内の指摘事項を確認して改善していく
こんな感じです。
上記手順③・④についてもう少し詳しく解説します。
ラボデータ(特定のPCで取得したデータ)の項目「Cumulative Layout Shift」が、0に限りなく近い値になっていれば大きなCLSは発生していません。
この場合、フィールドデータ(実際の複数ユーザーから取得したデータ)には、ラボデータよりも大きいCLSスコアが表示されます。
ですが、ラボデータが0に限りなく近い値なら、いずれ「良好」範囲内には収まるはずです。
もし、黄色の文字や赤色の文字で数値が表示されている場合は、そのページに大きなCLSが発生しているということになります。
「診断」項目内では、CLSの発生原因が具体的に指摘されます。
例えば下記のような内容です。
「合成されていないアニメーションは使用しないでください」
「画像要素で width と height が明示的に指定されていない」
「レイアウトが大きく変わらないようにする」
これらが表示されている場合は、それぞれ指摘された部分を改善しましょう。
CLS確認方法②：Chromeの拡張機能「Web Vitals」を使う
PageSpeed Insightsを使って改善してもCLSが発生する場合。
そんな時はChromeの拡張機能「Web Vitals」を使って確認しましょう。
Web Vitalsの使い方
- Google Chromeで「Web Vitals – Chrome ウェブストア」にアクセス
- 「Chromeに追加」をクリック
- Chrome のウィンドウ右上に「Web Vitals」が追加されたことを確認
- 調査したいページを上から下にゆっくりスクロールして閲覧していく
- ページ閲覧中に「Web Vitals」のアイコンが赤くなった部分を改善していく
こんな感じです。
地道ですが「Web Vitals」を使ったほうが確実にCLSの発生箇所を特定できます。
本気で改善したい方にオススメのツールです。
まとめ：CLSに関する問題を改善してSEO対策しよう
今回は「CLSに関する問題の改善方法」「CLS発生の原因を確認する方法」について解説しました。
今回お伝えした内容をまとめると下記のとおりです。
今回の内容
- CLSに関する問題の改善方法は下記4つ
- 画像のimgタグにwidth属性とheight属性を設定する
- Lazy Loadで代替のローディング画像を使用しないようにする
- サイドバーのスクロール追従をやめる
- 自動広告のページ内広告をオフにする
- CLS発生の原因を確認する方法は2つ
- 「PageSpeed Insights」を使う
- Chromeの拡張機能「Web Vitals」を使う
CLSの発生には必ず原因があります。
原因を特定して対策すれば、必ずCLSのスコアは改善できます。
2021年5月のSEOアップデートに備えて、さっそくあなたのブログ・サイトのCLSを改善しましょう！
WordPressで本気でSEO対策したい方へ
Core Web Vitals(ウェブに関する主な指標)は、CLSだけでなくLCPやFIDの3つがあります。
すべての項目を手動で改善していくのは時間も労力もかかってとにかく大変です。
そこで、SEOに最適化されたWordPressテーマを使うことを強くオススメします。
SEO最適化テーマを使えば、あなたが改善すべき部分を最小限にすることができますよ。
下記の記事でWordPressにおすすめのSEO最適化テーマをご紹介しています。
»WordPressブログで失敗しないおすすめのテーマは3つ【SEO最適化済】
そして、サイトの表示スピードも上げることができるので、SEO評価をさらに高めることも！
SEOに最適化されていないテーマを使っているなら、今すぐ変えたほうが良いでしょう。