SEOを改善するためのCLS（累積レイアウトシフト）の最適化戦略

CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift) は、ウェブページのレイアウトの変化によってユーザーが体験する不快感を測定するSEOの指標です。CLSは、ウェブページのコンテンツが動的に変更された場合に、コンテンツが移動したり、拡大縮小したりすることで生じるレイアウトの変化を測定します。

CLSはCore Web Vitalsの３つの指標のうちの一つです。

Core Web Vitals

Core Web Vitalsは、Googleが推奨するウェブサイトのパフォーマンス指標で、ユーザーエクスペリエンスに重要な役割を担う3つの指標で構成されています。

• LCP (Largest Contentful Paint) : あるページの最も大きなコンテンツが読み込まれるまでの時間を測定します。

• FID (First Input Delay) : あるページが最初にインタラクティブになるまでの時間を測定します。

• CLS (Cumulative Layout Shift) : あるページのレイアウトの変化によってユーザーが体験する不快感を測定します。

これら3つの指標は、Google Search ConsoleやPageSpeed Insightsなどのツールを使用して測定することができます。

CLSの実際の例

例えば、Webサイトに広告を表示している場合、広告が読み込まれる前に、そのスペースが空白になっていると、広告が読み込まれるときに、その空白が埋まり、それによってページ全体のレイアウトが移動します。これが、Cumulative Layout Shift (CLS)の指標が測定する不安定さです。

CLSの計算方法

Cumulative Layout Shift (CLS)の値は、以下のように計算されます。

• 各変化が発生した領域の大きさを計算します。
• 各変化が発生した領域の大きさと、それらが発生した領域が占めるビューポートの割合を掛け合わせます。
• 第2のステップで得られた値をすべて足し合わせます。

例:

• スクロール前に領域Aが0.1,領域Bが0.2,領域Cが0.3占めていた
• 領域Aが0.2,領域Bが0.1,領域Cが0.4に変わった場合

CLS = (0.1 * 0.1) + (0.2 * 0.2) + (0.3 * 0.4) = 0.028

Googleは、このCumulative Layout Shift (CLS) の値が0.1以下になるように、Webサイトを最適化することを推奨しています。

CLSは、Google Search Consoleによって測定され、Googleのランクアルゴリズムにも影響を与えます。CLSスコアが高い場合、ランクが低下し、トラフィックも減少する可能性があります。

CLSの改善

Cumulative Layout Shift (CLS) の低減には、以下のような対策が考えられます。

• 画像や動画などの外部リソースの読み込みを遅らせない
• 不要な描画を避ける
• スクロール位置によって、表示されるコンテンツを制御する
• 広告の表示前に、広告のスペースを確保する

また、Chrome DevToolsなどの開発ツールを使用することで、Cumulative Layout Shift (CLS)の値を確認し、対策を行うことができます。

Cumulative Layout Shift (CLS)は、Webサイトの開発者にとって重要な指標です。Googleが推奨する値を目指しながら、Webサイトのパフォーマンスを最適化することで、ユーザーエクスペリエンスを向上させることができます。

特に広告を扱う際には注意が必要です。