【Google Search Console】「CLS に関する問題」の意味や対策についてのメモ

Google Search Consoleの「ウェブに関する主な指標」タブ内では、サイトで発生しているHTML/CSS/JavaScript等に起因する諸問題を確認することが可能です。

エラーの発生状況について時系列で確認できるため、突如「CLS に関する問題: 0.25 超（モバイル）」という不良ステータスの問題が新たに最近表示されるようになっていることに気が付くことができました。

突然「CLS」という用語が表示され、「CLS に関する問題: 0.25 超（モバイル）」という表示自体にはヘルプへのリンクがなかったのですが、表示されている表の列名部分「型」の隣のハテナマークから、その意味を確認することができました。

CLS（Cumulative Layout Shift）: ページの読み込み中にページの UI 要素がどの程度移動するかを示します。

CLSの値の計算方法は少し複雑で、その値が例えば「0.25」だったとして、それがどの程度の状態を表すのかを示すことは難しいのですが、ここで説明されているとおり、「ページを読み込んでいる最中に、描画された要素の位置が移動してしまう」その移動の量が大きすぎる、ということが問題されているのが先ほどのエラーです。

最も典型的なのは、画像が読み込まれるときに、画像の大きさが新しく確保されて、それまでその画像の位置に表示されていた文章や他の画像、ボタン等がすべて下に押し出されてしまう現象です。

このケースでは、画像のデータが読み込まれた後に描画する場所が確保されることが問題であるため、画像ファイルを読み込む前に（つまりHTMLファイルの事典で）、hightやwidthで画像の高さを指定しておいて、まだ画像が読み込まれていないため中身は空っぽなのだけれど、読み込まれたら表示する領域だけはしっかり確保しておいて、そこに画像が表示される前後でコンテンツを押し出すような現象が発生しないようにする、というのが定番の対策です。

今回も結果これと類似するパターンでした。高さや幅の指定に漏れがあり、コンテンツが読み込まれるまで場所を確保しておらず、押し出す形になってしまっていました。

今回は、具体的にどこで描画内容の移動（シフト）が発生してしまっているかを確認するために、まず具体的に発生している（CLSの値が大きすぎる状態の）ページのURLを特定しました。

特定すると行っても、先ほどのGoogle Search Console内の「ウェブに関する主な指標」を開き、「レポートを開く＞詳細＞CLS に関する問題: 0.25 超（モバイル）」と開いていくと、「例」と書かれた表の中に、具体的に発生しているURLの例を確認することができます。

そのURLを「PageSpeed Insights」というGoogle公式のツールに貼り付けて、「分析」を実行しました。

分析が完了すると、CLS含め様々な指標が表示されます。特にこのツールでは、この後紹介する手法（Chrome Developer ToolsのLighthouseを使う）とは異なり、自分の環境に限らずGoogle側から見た状況を、そして、現在に限らず最近28日間にわたっての状況を確認することができます。

そこで「Cumulative Layout Shift」または「CLS」と用事されている項目を確認するとCLSの値が分かるのですが、ここで手っ取り早く参考になるのは、「ラボデータ」と「改善できる項目」という見出しの間にある、ページが読み込まれる様子をコマ送りにしたような、複数枚のスクリーンショットです。

そのスクリーンショット（ファーストビュー限定）を左から順番に見ると、画像の読み込みなどに応じて下に押し出されてしまっていることをできます（これで確認できない場合も有りますが、今回はこれで事足りました）。

どこで発生しているのかや、発生の原因等をある程度確認できたら、ウェブページを修正しながら動作を確認していきます。

その場合はより詳細な情報を確認した方が良いので、Chromeの「F12」キー等で開くことができる「DevTools」の「Lighthouse」タブを開き、「Generate report」を実行しました（モバイルを調査したい場合はDeviceでMobileを選んでおく）。

表示内容は先ほどの「PageSpeed Insights」のレポートと同じ（表示言語は英語）なのですが、各種内容を確認できることは同様ですが、それらの指標を何度も測定し直したり、「View Original Trace」ボタンをクリックするとすぐさま描画パフォーマンスに関するタイムライン表示を確認することができます（Lighthouseのレポート生成と同時に、Performanceタブでパフォーマンスの測定／記録が行われている）。

先ほどのコマ送りのようなスクリーンショットもより細かく確認することが可能です。

なお、Lighthouseの測定をやり直す（再測定する）には、Lighthouseタブ左上に表示されているバツマーク（丸に斜線のマーク）をクリックして結果をクリアして、前の初期画面に戻ったら「Generate report」を押し直します。これで再測定が走ります。

Lighthouseを利用せずとも描画のずれの確認などはできるのですが、CLSの値を計算してくれるため、例えば先ほどの「不良」であれば「0.25」という基準値があり、それより低い値に収まっているのか等を確認することができます（もちろん0にするのがよい）。

CLSが小さくできたことを例のURLおよびいろいろなURLで確認し、実装や表示に問題なさそうであることが確認できて反映が完了したら、「Google Search Console」の「ウェブに関する主な指標」の「詳細」から辿ることのできる個別の問題ページに表示された「修正を完了しましたか？ 修正を検証」というボタンから、修正結果の確認を依頼することが可能です。

定期的に確認されて「ウェブに関する指標」のグラフが作成されていることから、わざわざ修正を検証の依頼を送信する必要がないようにも見えますが、実際に送信すると、（すぐには検証は終了せず、効果を見るには結局数日かかる）しばらくして表示が変わり、うまく行けば「合格」表示となり、該当するURL数が「0」になり、対応終了となります。