サーチコンソールの「CLSに関する問題」について
CLS（Cumulative Layout Shift）は、Webページのビジュアルスタビリティを測定するためのメトリックの一つです。これはGoogleがWeb Vitalsプログラムで推奨する3つのコアWebバイタルメトリック（LCP、FID、CLS）のうちの一つです。CLSが高いと、ユーザーがページで何かをタップしようとしたときに予期せず要素が移動する可能性があり、これがユーザーエクスペリエンスを悪化させる可能性があります。
Google Search Consoleでは、このCLSメトリックを報告し、問題があるページを特定する機能があります。もしCLSが高いと判断された場合、それは以下のような原因による可能性があります。
- 画像や広告が遅延してロードされる: ページ上での遅延ロードは、その他の要素が既に表示されているときに新しい要素が突然表示される可能性があります。
- フォントの遅延: カスタムフォントが遅れてロードされると、テキストが突然リフロー（再配置）される可能性があります。
- 動的コンテンツの挿入: JavaScriptによって動的にコンテンツが挿入される場合、ページのレイアウトがシフトする可能性があります。
- アニメーションとトランジション: サムーズなトランジションやアニメーションが不適切に実装されていると、CLSが高くなる可能性があります。
このような問題を修正することで、CLSスコアを改善し、よりよいユーザーエクスペリエンスを提供することが可能です。具体的な修正方法には、予約容量（widthとheight属性の明示）、loading="lazy"属性の使用、不必要なレイアウトシフトを引き起こすJavaScriptの修正などがあります。
ビジュアルスタビリティって？
ビジュアルスタビリティ（Visual Stability）とは、ウェブページやアプリの画面がどれだけ「安定している」かを示す概念です。言い換えれば、ページを閲覧しているときに画面上のボタンやテキスト、画像などが突然動いたり、場所が変わったりしないかどうか、ということです。
例えば、あなたがオンラインショッピングサイトで「購入する」ボタンを押そうとしているとき、そのボタンが突然別の場所に移動してしまうと、うっかり違うボタンを押してしまう可能性がありますよね。このような不意の「動き」は、ユーザーにとってストレスを感じさせるものであり、ビジュアルスタビリティが低いと言えます。
ビジュアルスタビリティが高いウェブページやアプリは、使いやすく感じられることが多いです。それは、ユーザーが期待通りの操作ができるからです。このような理由から、ウェブページの品質を評価する際にビジュアルスタビリティも重要な要素とされています。