PageSpeed InsightsでCLS（Cumulative Layout Shift）が悪い場合は、ページの読み込み中にレイアウトがズレています。
画像が表示されるタイミングであったり、広告が突然現れたりして、読んでいる途中に画面が「ガタッ」と動いてしまう現象です。
実際にWordPressの表示速度改善をご依頼いただくサイトでは、CLSの問題改善も一緒にご相談されるケースは多いです。
CLSはレイアウトズレの原因を特定さえできれば、対策は意外と簡単です。
記事を書いた人は信じられる？
最初に簡単に自己紹介をさせてください。
私は独学でサイト表示速度の改善方法を学びました。
高速化作業はPageSpeed Insightsの分析結果で図ることができ、施策効果が目に見えるもので、体感的に改善を感じることもできます。
当時はAIも今ほど普及していなかったので試行錯誤でスキルを身に付けました。
そのスキルを活かして、2019年ころからサイト高速化業務に携わってきましたが、2026年現在、1,000サイトは軽く超えた作業実績があります。
自己申告なので証拠はと言われるとなかなか示しづらいところはありますが、ココナラでのWordPress高速化作業実績がNo.1なのは確固たる証拠と言えると思います。
もちろんココナラ以外にランサーズでも作業実績があり、このサイトから直接依頼されるケースも多いです。
同業者さんから難しい改善を依頼されることも多々あります。
ネット検索でのWordPressの表示速度改善方法やAIの提案はまだまだあまく、効果がないものまで紹介、提案されることすらあります。
WordPressの表示速度改善方法を紹介している記事を、PageSpeed Insightsで分析したことはありますか？
立派なことを書いているのに残念なスコアになっていたりしませんか？
もちろん、運営するこのサイトのPageSpeed Insightsのスコアはほぼ100点です。
私は日本一サイト高速化をしてきているプロ、それも証明できる実績のあるプロだと自己評価しています。
1,000サイト以上を改善してきた本当のプロが、実践で結果を出せる本当の改善方法をご紹介します。
▽coconalaでの評価
https://coconala.com/users/2093261/reviews
CLSが発生する主な原因
WordPressサイトでよくあるのは、次のようなケースです。
- 画像のサイズが指定されていない
- アドネットワーク広告の表示
- スライダーなどブラウザ上で動的に生成されるコンテンツ
PageSpeed InsightsでCLSが0.1を超えている場合は、改善が必要な状態と考えた方がよいでしょう。
Googleサーチコンソールの方で「CLSの問題」というのもよく見かけますよね。
レイアウトずれの確認方法
基本は目視で確認します。
ブラウザキャッシュがあるとすぐ表示されてしまうので、スーパーリロードで確認するのがおすすめです。
それでも分からない時は、ブラウザのデベロッパーツールの「パフォーマンス（performance）」タブを見ると、Cumulative Layout Shift (CLS)として数値やズレている要素が確認できるので、その要素付近を入念に確認します。
どうしても変わらない時、可能であれば怪しい要素を一時的に非表示にします。
例えばヘッダー辺りの要素が怪しい、しかし目視では良く分からないし要素を見てもレイアウトズレになりそうな要因がない・・・、そんな時です。
怪しい要素を非表示にしてCLS値が改善されるのであれば、原因の見当は正しかったことになります。
非表示にする要素を子要素に狭めていって最終的に問題のある要素を特定してください。
原因さえ特定できれば、あとはCSSで予め高さを指定するだけです。
「CLS値」と「CLSの問題」は別問題
ややこしい見出しになってしまいましたが、この2つの根本は同じでも問題のとらわれ方が異なっているのでそこだけ注意です。
CLS値はリアルタイムで計測できるレイアウトズレの値なのに対し、CLSの問題はGoogleが一定期間収集したサイトデータを元に出された問題になります。
PageSpeed InsightsでCLS値はリアルタイムに改善が確認できますが、CLSの問題は違います。
そのためよくあるのが、CLS値の改善作業を行った後、「CLSの問題」がまだ出ています、という問い合わせです。
CLSの問題は一定期間のデータが元になっていますので、レイアウトズレを修正してもすぐには消えるわけではありません。
およそ1ヶ月後くらいかけて修正が反映され、うまくいっていればCLSの問題は消える、という流れになります。
画像サイズを指定する
レイアウトズレで一番多い原因は画像です。
それも、画像遅延読み込みをした画像でwidth、height属性がないパターンです。
画像を遅延読み込みすると、ブラウザは画像が表示されるまで本来の高さを判断できません。そのため、width / height属性が指定されていないと、画像が表示されたタイミングでレイアウトがズレてしまいます。
一番多い原因ではありますが、対策はシンプルにwidth、height属性は足せばOKです。
PageSpeed Insightsの分析結果でCLS値が高くなっていたら、まずはファーストビューに表示されている画像にwidth、height属性が正しく設定されているかを確認してください。
アドネットワーク広告も要注意
アドセンスなどのアドネットワーク広告は非常にCLSの原因になりやすいです。
というか何も意識せずファーストビューにアドセンスを設置するとレイアウトズレを起こしてCLS値が上がります。
ファーストビューの広告は収益に大事ですが、そのままではCLSの問題を引き起こすことには注意です。
対策としては、広告枠の高さをCSSであらかじめ確保しておくことです。
広告のラッパー要素に対して、min-heightを指定しておくといいでしょう。
まとめ
CLS改善は、原因の特定ができるかどうかがポイントです。
実務でもなかなか原因が分からず時間を取ってしまうことは少なくありません。
ややこしい問題ではあるのですが、メリットというか特徴というか、基本的に副作用のない改善なので私は優先的な改善項目だと捉えています。
遅延読み込みは不具合と常に隣り合わせですし、しっかり確認をしたつもりでも100%見落としが無いとは言い切れないので。
CLS改善はその不安がないのが好きです。
コメントを残す