CLSエラーの調査・対応方法

CLSとはCumulative Layout Shift(累積レイアウトシフト)の略語です。 サイトを閲覧している際にガタっとレイアウトが変わることを意味します。

ウェブページを見ている際に急に広告が読み込まれ、ページのレイアウトがズレた経験はないでしょうか。 このようなレイアウトシフトが多いページは、サーチコンソールでCLSエラーを通知される訳です。

CLSはユーザー体験が悪化し、ひいてはサイトのSEOにも悪影響を与えます。 CLSエラーを検知したらなるべく早く解消しましょう。

CLSエラーのよくある原因

画像サイズが未指定

CLSエラーの原因は色々ありますが、代表的なのは「画像にwidthとheightを指定していない」ことです。

サイトが読まれる際に画像サイズが未指定だと、画像表示用の領域が確保されるのはサイト読み込み時ではなく画像読み込み時になります。 すると画像を読み込む度にレイアウトシフトが起こってCLSエラーとなる訳です。

全ての画像にwidthとheightを指定しておきましょう。

要素の表示領域が確保されていない

広告やカルーセルスライダーが差し込まれることでCLSエラーとなる話もよく聞きます。 これも原因は画像サイズ未指定とほとんど同じ話です。

要素が何にせよ重要なのは「あらかじめ表示領域を確保しておく」ことです。 そうすればサイト読み込み時に領域が確保されるため、レイアウトシフトは発生しません。

つまりCLSの原因となっている要素をwidthとheightを指定したdiv領域内に放り込めば解決します。

見た目問題ないのにCLSが発生している場合もある

見た目上ではCLSが発生していないのにCLSエラーとなる場合もあります。 例えば初期設定がnodisplayのサイドバーがコンテンツ全体を押し下げている場合も、レイアウトシフトしていると判断されることがあります。 nodisplayだからユーザー目線ではCLSは発生していないのですが、機械的にはダメなのでしょうね。

実はこれこのサイトが陥っていたCLSエラーの話です。 ほぼ全てのページでCLSエラーとなっているのに見た目のズレがないので、原因特定に酷く時間がかかりましたよ… 最終的にHTML領域をゴリゴリ削って原因探しするハメになりました。

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機能を使うのがお勧めです。 ページを右クリック→検証から機能を利用できます。

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

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

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

ページコンテンツを削る

developer toolで確認しても原因がよく分からない場合、ページコンテンツを削って原因を探す手があります。

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

B!

関連記事

HOME