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

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

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

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

CLSエラーのほとんどが「領域にwidthとheightを指定していない」ことが原因です。 画像を例に考えてみましょう。

画像にwidthとheightを設定していれば、サイト読み込み時にあらかじめ領域が確保されるため、レイアウトシフトは発生しません。 しかし未設定の場合、画像が読み込まれるタイミングで領域が確保されるので、画像を読む毎にレイアウトシフトが発生します。

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

画像やボックスにはwidthとheightを指定しておきましょう。 またはwidthとheightを指定したdiv領域などに放り込むのも良いです。

widthとheightの指定と言っても、何も数値を指定しなければならない訳ではありません。 レスポンシブサイトなどで領域サイズが流動的な場合は、%やcalc関数で指定することも可能です。

CLSの調査方法

大体の人はGoogleサーチコンソールにエラー通知されてCLSエラーを検知すると思います。 そこから先の調査や検証は外部ツールに任せましょう。

なおCLSは接続タイミングによってブレがある他、閲覧端末や画面サイズによっても発生したりしなかったりします。 確認時はその辺りも意識する必要があります。

PageSpeed Insights

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

ここの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が解消されれば原因は前半部に、解消されなければ原因は後半部もしくは両方にあると特定できます。 こうして削る範囲を少しずつ狭めていけば、やがて問題となっている箇所を特定できることでしょう。

B!

関連記事

HOME