こんにちは。エンジニアの岩澤です。 今回はSEO評価につながるCLSについてまとめてみました！ SEO改善に悩んでいるそこのあなた！ぜひこの記事を参考にサイト評価を高めてみてください。

近年、Googleが検索ランキングの要因として「Core Web Vitals」を重視するようになりました。 その中でも特に注目されているのが**CLS（Cumulative Layout Shift）**です。 CLSとは、「ウェブページの読み込み中に発生するレイアウトのずれの量」を測定する指標です。

サイトを閲覧する際に最初の読み込み時に画像がおおきく表示され、その後小さく表示されるような経験をしたことがありませんか？ まさにそれが「レイアウトのずれ」です。

CLSは、次の2つの要素で計算されます。

①　Impact Fraction（影響範囲）: ずれた要素がページ全体に占める割合。

②　Distance Fraction（移動距離）: 要素が移動した距離。 このスコアは0から1以上の範囲で評価され、数値が小さいほどユーザー体験が良好とされます。GoogleはCLSの理想的なスコアを0.1以下としています。

Googleは、ユーザー体験を重視する方針を強めており、CLSを含むCore Web Vitalsは検索ランキングに直接影響します。

①　低いCLSスコア: ユーザー満足度が向上し、サイトの滞在時間やコンバージョン率が上昇する可能性があります。

②　高いCLSスコア: ページの使いにくさが原因で直帰率が増加し、ランキングが下がるリスクがあります。

CLSを悪化させる要因には以下のようなものがあります。

①　画像や広告のサイズ未指定 ページロード時に画像や広告スペースのサイズが動的に変更されると、レイアウトが崩れることがあります。

②　動的コンテンツの読み込み 遅延読み込みされたフォントやJavaScriptによって要素が移動する場合があります。

③　非同期コンテンツの読み込み順序 ページ内の要素がランダムな順序で読み込まれると、視覚的なズレが発生します。

ここは私の経験ですが、特に「1」と「2」の組み合わせによって発生しているサイトを非常によく見ます。 例えば、トップページにスライダー画像のデザインを埋め込んでおり、JSでそれが実装されている際に、ページ遷移時に ロードが完了するまでの間JSが適用される前のサイズの画像が表示されており、その後スライダーが適用され画像が小さくなる というものです。皆さんも一度は見たことがあるのではないでしょうか。それくらい多くのサイトで発生しています。

ここまでCLSとは何か？そして原因にはどのようなものがあるか紹介してきました。 そんな、CLSのスコアを良好にするための方法をいくつか紹介します。

①画像や動画のサイズを明示する 画像や動画がページに読み込まれる際にレイアウト崩れを防ぐには、必ずwidth（幅）とheight（高さ）を指定しましょう。 これにより、ブラウザは画像のスペースを事前に確保し、読み込み中のズレを防ぐことができます。 autoを利用し、アスペクト比を保持するのも一つの手です。

②フォントの最適化 ウェブフォントが遅れて読み込まれると、テキストが突然表示されたりスタイルが変わったりすることでCLSが発生します。 これを防ぐ一つとして、フォントディスプレイの調整があります。 CSSのfont-display: swapを使用すると、フォントの読み込み中にデフォルトのフォントが表示され、読み込み完了後に切り替わるようになります。 googleフォントを読み込んでいる際にも下記のようにすることで、swapを適用できます。

③レイアウトのリザーブスペースを設ける 動的に生成される要素（例: ポップアップ）に対して、事前にスペースを予約しておくことでズレを防ぐことができます

①PageSpeed Insights: ページのパフォーマンスを測定し、CLSを含む問題点を指摘。

②Lighthouse: 詳細なレポートを生成。

以上CLSの説明・原因・改善策についてまとめてみましたが、いかがでしたでしょうか。 CLSの改善は細かなCSSやJSの最適化により大きくスコアが変化します。 CLSの良い評価を維持することでユーザー体験が大幅に向上し、SEO効果も期待できます。 ツールや本記事で紹介した改善方法などを試してみて是非、良いサイト作りの参考にしてみてください！