CLSとは？改善はずれた場所の特定から｜スマホ・レスポンシブで悪化する理由
「CLSが0.25超と出た、どこを直せばいい？」「スマホだけ悪いのはなぜ？」と困っていませんか？
ずれを全部足した値だと思っていると、探す範囲が広がりすぎて手が止まるのも無理はありません。
この記事では、CLSの決まり方とずれた場所の特定、原因の3か所、スマホだけ悪い理由を解説します。
Search Consoleで警告を受けた方が、直す場所を数か所に絞り込めるようになります。
CLSとは、表示中に要素がずれた量を測る指標
CLSは「Cumulative Layout Shift」の略です。読み込み中に画像や広告が入り、読んでいた文章が押し下げられる現象を数値にしたものです。
Core Web Vitalsの3つの指標のひとつで、秒やミリ秒の単位を持ちません。割合どうしを掛けて出す値なので、単位のない小数で表されます。まずは、この値がどう決まるかを押さえてください。
動いた面積と距離の掛け算で決まる
1回のずれの値は、画面のうちずれの影響を受けた面積の割合と、動いた距離の割合を掛けて出します。面積には、動く前と動いた後の位置の両方が含まれます。
web.devの例は、画面の半分を占める要素が、画面の高さの4分の1だけ下に動く場合です。影響を受けた面積は0.75、距離は0.25で、値は0.1875です。小さな要素が少し動いても値はほとんど増えませんが、大きな要素が大きく動くと一気に跳ね上がります。
0.1以下が良好、0.25超は不良
基準は0.1以下が良好で、0.25を超えると不良です。その間は改善が必要の区分になります。
| CLSの値 | 評価 |
|---|---|
| 0.1以下 | 良好 |
| 0.1を超え0.25以下 | 改善が必要 |
| 0.25超 | 不良 |
0.1を超えたからといって、すぐに順位が落ちるわけではありません。優先して直すかどうかは、どのページ群で起きているかを見てから決めます。
判定は利用者の75%が収まる値で決まる
判定に使うのは、実際にページを開いた利用者のデータです。表示の75%がその値に収まっているかを見て、モバイルとPCを分けて評価します。
自分の端末で0だったとしても、利用者の側で悪い値が出ていることは珍しくありません。回線が遅い端末ほど、読み込みの途中でずれが起きやすいためです。確認には、自分の画面ではなく実測のデータを使ってください。
CLSは合計ではなく、最も揺れた5秒間で決まる
名前に「累積」とあるため、ページ内のずれをすべて足した値だと説明されることがあります。これは2021年に変わる前の定義です。
現在は、ずれをまとまりごとに区切り、最も大きいまとまり1つの値を使います。この仕組みを知っていると、直す範囲を数秒間に絞れるようになります。長く開かれるページほど不利になる問題も、この変更で解消されました。
セッションウィンドウという区切り方
ずれを区切ったまとまりを、セッションウィンドウと呼びます。ずれとずれの間隔が1秒未満なら同じまとまりで、1秒以上あくと別のまとまりです。
ひとつのまとまりは、最長5秒で打ち切られます。ページ内にまとまりが3つできたなら、中の合計が最も大きい1つだけが採用されます。直すべきなのは、最も揺れている数秒間だけです。
読み込みが終わったあとのずれも測られる
CLSは、読み込み中だけの指標ではありません。ページを閉じるまで、ずっと測られ続けます。
下までスクロールしたところで、遅れて読み込まれた画像が入る場合も数えられます。確認のときは上部だけを見がちなので、画面の下のほうほど見落としやすい箇所です。スクロールは利用者の操作として扱われないため、その最中のずれも除かれません。
操作から500ms以内のずれは数えない
ボタンを押してメニューが開く動きは、対象外です。タップやクリック、キーの入力から500ミリ秒以内に起きたずれは、予期されたものとして除かれます。
アコーディオンの開閉やタブの切り替えまで疑う必要はありません。問題になるのは、何もしていないのに動く場合です。当サイトのよくある質問も、タップして回答が開く形で作っています。
CLSの改善は、ずれている場所の特定から始める
いきなり直し方を調べても、どこに当てはめるかが決まりません。先に、どのページのどの要素がずれているかを突き止めます。
使う道具は3つで、どれも無料です。広い範囲から1つの要素まで絞り込む順番で使うと、迷わずに済みます。順番は、Search Console、PageSpeed Insights、開発者ツールです。
Search Consoleで対象のページ群を絞る
最初に開くのは、Search Consoleのウェブに関する主な指標のレポートです。モバイルとPCが分かれており、似たページがグループにまとめて表示されます。
グループの代表URLを見れば、記事ページだけか、全ページかが分かります。全ページならテーマ、特定の種類だけならそのテンプレートが原因の候補です。ここで範囲が絞れると、あとの作業がずっと楽になります。
PageSpeed Insightsでずれた要素を見る
代表URLをPageSpeed Insightsに入れると、ずれた要素の一覧が出ます。診断の中にある、レイアウトシフトに関する項目を開いてください。
上部の実測値と、下の参考値が食い違うこともあります。参考値は読み込みの数秒しか見ていないため、スクロール後のずれは出ません。参考値が良くても、実測値が悪ければ下のほうに原因が残っています。
開発者ツールで動きを記録する
Chromeで対象のページを開き、F12で開発者ツールを出します。パフォーマンスのタブで記録を始め、ページを読み込んで最後までスクロールしてから止めてください。
記録に出るレイアウトシフトを選ぶと、動いた要素が画面上で示されます。ただし、ここで見えるのは原因ではなく結果です。動いた要素の1つ上に何があるかを見てください。押し下げているのは、たいていその要素です。
CLSが悪化する原因になりやすい3か所
web.devが挙げている主な原因は、大きく3つに分かれます。上から順に見ていけば、多くはこの中で見つかります。
| 原因 | 直し方 |
|---|---|
| 寸法のない画像と埋め込み | 幅と高さを書く、最小の高さを決める |
| 後から差し込まれる要素 | 場所を空けておく、重ねて表示する |
| Webフォントの切り替わり | 代わりの書体の字幅を近づける |
どれも、ずれが起きてから押さえるのではなく、最初から場所を確保しておくという考え方は同じです。
① 寸法のない画像と埋め込み
最も多い原因です。画像に幅と高さが書かれていないと、ブラウザは読み込むまで場所を空けられません。
読み込んだ瞬間に、その分だけ下の要素が押し下げられます。直し方は、画像のタグに幅と高さを書くことです。WordPressは5.5から、本文の画像に寸法を自動で補っています。広告枠や地図の埋め込みは大きさが決まらないため、外側の箱に最小の高さを指定してください。
② 後から差し込まれる要素と動き
JavaScriptで後から追加される要素も、同じ理屈でずれを起こします。お知らせの帯、同意を求める帯、ポップアップなどです。
内容の一番上に差し込むと、その下すべてが動きます。画面の端に重ねる形にすれば、押し下げは起きません。動きを付けるときは、transformで動かすとほかの要素に影響せず、CLSに数えられません。プラグインを入れたら、前後で記録を取って比べてください。
③ Webフォントの切り替わり
Webフォントを読み込み終えた瞬間に、代わりの書体から切り替わって文字の幅が変わります。折り返しが変われば、その下の行もすべて動きます。
影響を小さくするには、代わりの書体の字幅を本来の書体に近づけるのが有効です。CSSの size-adjust などで調整できます。当サイトは端末に入っている書体を先に指定し、ない端末でだけWebフォントを使う形です。
レスポンシブでスマホだけCLSが悪化する3つの理由
CLSはモバイルとPCで分けて集計されます。PCは良好なのにスマホだけ悪いという状態は、珍しくありません。
原因は、たいてい画面の狭さにあります。同じページでも、狭い画面では1つの要素が占める割合が大きくなるからです。PCで確かめて問題がなくても、スマホの幅で記録を取り直す必要があります。PC用の確認だけで済ませていると、警告の原因にたどり着けません。
① 画像が画面に占める割合が大きい
スマホでは、画像が画面の幅いっぱいに広がる作りが一般的です。高さは幅に合わせて決まるため、寸法が書かれていないと読み込むまで分かりません。
しかも画面が狭いぶん、1枚の画像が画面に占める割合が大きくなります。PCでは小さなずれでも、スマホでは面積の割合が何倍にもなります。同じ画像でも、スマホでだけ不良になるのはこのためです。
② スマホでだけ出る要素がある
下に追従する問い合わせボタン、アプリへの誘導の帯、開閉式のメニューなどです。PCの表示では出てこないため、PCで確認している限り気づけません。
画面の端に重ねて表示しているなら、問題はありません。内容の流れに差し込む作りだと、スマホでだけずれが起きます。スマホ用の要素を加えたときは、どこに差し込まれるかを確かめてください。
③ 文字の折り返しで行数が変わる
本文の幅が狭いほど、同じ文章でも行数は多くなります。書体の切り替わりで字幅が少し変わっただけで、折り返しの位置がいくつもずれます。
PCでは1行に収まる見出しが、スマホでは2行と3行を行き来することも珍しくありません。見出しにWebフォントを使っているなら、スマホの幅で記録を取って確かめてください。行数が変わらなければ、下の要素も動きません。
CLSの改善に関するよくある質問
CLSを改善すると、検索順位は上がりますか
Googleは、Core Web Vitalsをランキングを決める際に考慮する要素の1つとしています。ただし、直しただけで大きく上がるとは限りません。
内容が検索の意図に合っていることが先で、CLSは読む人の不快を減らすために直すものです。文章を読んでいる途中で押し下げられる体験は、離脱のきっかけになります。順位より、読む人のために直すと考えてください。
PageSpeed InsightsとSearch Consoleで数値が違うのはなぜですか
見ている範囲が違うためです。PageSpeed Insightsが見ているのは、1つのURLです。Search Consoleは、似たページをまとめたグループを見ています。
さらに、PageSpeed Insightsの下に出る参考値は、読み込みの数秒間だけを測った値です。スクロールのあとのずれは含まれません。判断には、上部の実測値かSearch Consoleの数値を使ってください。
直したのに数値が変わらないのはなぜですか
実測値は直近28日間の集計なので、直した直後には反映されません。古いデータが入れ替わるまで、数週間かかります。
Search Consoleで修正の確認を始めると、28日間のモニタリングに入ります。その間は開発者ツールで記録を取り、レイアウトシフトが消えたかを見てください。手元で消えていれば、あとは集計が追いつくのを待つだけです。
画像にwidthとheightを書くと、スマホで縦に伸びませんか
伸びません。CSSで高さをautoにしていれば、ブラウザは属性から比率だけを読み取って高さを計算します。
書く数値は、実際に表示する大きさと違っていても構いません。多くのテーマは、最初からこの指定を持っています。古いテーマでは、高さを固定する指定が残っていることもあります。念のため、スマホの幅で表示して、画像の縦横比が崩れていないかを見てください。
CLSの改善は、プラグインだけでできますか
原因が本文の画像だけなら、プラグインで補える場合もあります。テーマや広告、フォントが原因なら効きません。プラグインが直せるのは、本文の中の画像に限られるからです。
入れたプラグインそのものが要素を差し込み、新しいずれを生むこともあります。画像を最適化するプラグインが、寸法を取り除いてしまう例もあります。先に原因を特定してから、道具を選んでください。
まとめ
CLSは合計値ではなく、最も揺れている数秒間の値です。だから、直す範囲はページ全体ではなく数か所に絞れます。
先にやるのは場所の特定で、直し方を調べるのはそのあとです。原因の多くは、寸法のない画像、後から差し込まれる要素、書体の切り替わりのどれかにあります。スマホだけ悪いなら、画面の狭さで大きく出ている要素から見てください。
まずはモバイルの指標を開き、警告の出ているグループを1つ確かめてください。