CLSエラー（累積レイアウトシフトエラー）の調査・対応方法

CLSとはCumulative Layout Shift（累積レイアウトシフト）の略語で、この数値が高いほどにサイト閲覧中にガタっとレイアウトがずれていることを意味します。 このズレが多いページはサーチコンソールでCLSエラーとして通知されます。

CLSはユーザー体験を悪化させるので、なるべく早い解消が必要です。 そんなCLSエラーの調査・解消方法についてお話します。

CLSエラーの多くは「領域サイズ未指定」が原因

CLSエラーのほとんどが「領域にwidthとheightを指定していない」ことが原因です。

領域にwidthとheightを設定していれば、ページ読み込み時にあらかじめ領域サイズの枠が確保され、後から枠内に描写されていきます。 しかし未設定の場合、領域が読み込まれるタイミングで枠が確保されるので、領域を読む毎にレイアウトシフトが発生します。

CLSエラーの原因のほとんどは「画像・広告・カルーセルスライダーなどの領域にサイズを指定していない」ことにあります。 特にheightの未指定はCLSに繋がることが多いです。

領域にはwidthとheightを指定しておきましょう。 またはサイズを指定したdiv領域などに放り込むのも良いです。

widthとheightには数値以外にも%やcalc関数を指定することも可能です。 レスポンシブサイトなどでサイズが流動的な場合はこちらを利用しましょう。

CLSエラーの補足情報

サーチコンソールのCLSエラーはファーストビュー

サーチコンソールで通知されるCLSエラーは、見た感じではファーストビューに限ったもののようです。 なのでエラーを解消するだけなら画面外の領域はとりあえず考慮しなくて良いかもしれません。

意図的な領域移動処理もCLSとして計測されてしまう場合があるので、そういったものはファーストビューに入れない方が無難です。

CLSのチェックは「モバイル」と「PC」双方から

CLSレポートには「モバイル」と「PC」に分けて調査されるものが多いです。 これらは主に端末サイズと接続速度に違いがあります。

どちらもエラーになっていたら根本的にページがまずいですが、片方だけエラーになる場合もあります。 例えば小画面ではファーストビューに表示されない部分に問題がある場合、PC版のみがエラーとなります。

確認・修正・検証も両端末の違いを意識して行う必要があります。

CLSはブレる

CLSは接続タイミングによってブレがあります。 修正確認してCLSが解消されたと思ったら、たまたま小さくカウントされていたなんてこともあります。

CLSの確認はリアルタイム計測ならスーパーリロードを数回、レポートなら数回作成して確認した方が良いでしょう。

CLSの調査方法

CLSを調査・検証するツールを紹介します。

PageSpeed Insights

CLSエラーの有無は「PageSpeed Insights」で確認しましょう。

ページURLを入力して分析し、Cumulative Layout Shift（CLS）と書いてある項目が赤くなければOKです。

なおPageSpeed Insightsには「フィールドデータ」と「ラボデータ」があります。 フィールドデータは過去28日の収集期間から割り出したもので、修正して即確認しても数字には反映されません。 解消されかをその場で確認する場合は「ラボデータ」のところを見ましょう。

Web Vitals

PageSpeed Insightsは色々なデータを解析してくれる一方で、解析には時間がかかります。 CLSだけ確認するならChromeの拡張機能「Web Vitals」を使う方が簡単です。

拡張機能を入れて表示される小窓が、サイトアクセス時に赤くなっていなければOKです。

なおCLS以外にも調査項目があり、いずれかに問題があると小窓が赤くなります。原因がCLSにあるかは小窓をクリックして確認してください。

Lighthouse

chromeのデベロッパーツール「Lighthouse」を使うのもおすすめです。 chromeでページを開いて右クリック→検証を選択し、一番上のタブから「Lighthouse」を選択ましょう。（なければ「>>」の中にあります）

Generate Reportでレポートを作成して「Cumulative Layout Shift」の評価結果を確認しましょう。 問題ある場合「Avoid large layout shifts」を確認すれば、どの要素が問題だったかを教えてくれます。

developer tool

CLSの原因がなかなか特定できない場合、Chromeのdeveloper tool機能を使うのがお勧めです。 chromeでページを右クリック→検証から機能を利用できます。

まずNetworkタブを選択し、Disable cacheにチェックを入れ、Onlineバーの「Slow 3G」を選択します。 これは回線速度が速いと一瞬でページが表示されてしまい、レイアウトシフトの原因が探りにくいからです。 （動体視力に自信があるなら不要です）

次にPerformanceタブを選択し、下方にあるRenderingタブ内のLayout Shift Regions にチェックを入れます。 これによりレイアウトシフトした領域が青く光るようになります。

以上の下準備が終わったら、デベロッパーツールのリロードボタンを押してみてください。 レイアウトシフトした箇所が青く光るので、そこから原因の箇所を大よそ絞り込めます。

ページコンテンツを削ってみる

解析ツールを使用しても、CLSが起きている原因がいまいち絞り込めないこともあります。 その場合はページコンテンツ自体を削って原因を探すのも手です。

例えばCLSが発生しているページの前半部をばっさり削り、それでCLSが解消されれば原因は前半部に、解消されなければ原因は後半部もしくは両方にあると特定できます。 こうして削る範囲を少しずつ狭めていけば、やがて問題となっている箇所を特定できることでしょう。