コアウェブバイタルで重要視される『CLS』を改善する方法について

こんにちは。
大阪でWEBコンサルティングとWEB制作をしているワイズオフィスです。

今回はCLSの改善方法ついて書きたいと思います。

CLSとは

はじめに

CLSとは2020年5月にGoogleが発表したコアウェブバイタル（ユーザー体験における不可欠な要素）の３つの指標のうちの一つです。

コアウェブバイタルについて詳しくは下記の記事をご覧ください。

これからのＳＥＯ対策に大きな影響を与えるCore Web Vitalsについて解説します。

コアウェブバイタルは2021年5月から導入するとされております。

CLSとは

CLSとはCumulative Layout Shiftの略語でページ読み込みに応じて発生する予期せぬレイアウトのずれによるUX低下を防ぐための、視覚的な安定性を測定する指標です。簡単に表現すると「ユーザーが操作していないときに起こるレイアウトのずれ」をスコア化したものです。

CLSは下記のように計算されてスコア化されております。

レイアウトシフトスコア = 影響がある範囲の割合 * 実際にずれが起こった距離の割合
（画面全体を100%として、各割合を出す）

ずれの要因

・寸法のない画像（width属性やheight属性が設定されていない）
・サイズのない広告、埋め込み、iframe
・動的に挿入されたコンテンツ
・FOUT / FOITを引き起こすWebフォント
・DOM更新の前にネットワーク応答を待機するアクション（応答待ってからDOM更新・されちゃうと、押し間違いが発生するため） 

CLSの改善方法

画像のサイズをimgタグに記述する

まずやっておきたいことが img タグに 「width」と 「height」を記述することです。
昨今はレスポンシブレイアウトが主流となってきている中で、この部分を記載せずに全てCSSで対応するケースがほとんどになっております。
CLSに対応させるためにはwidth属性・height属性を付与させることがお勧めされております。

WEBフォントはCDNなどを利用する

WEBフォントはフォントファイルをサーバー内に組み込む方法もありますが、CDNを利用する方法の方が表示スピードが速くなり、ズレが起きにくくなると言われております。

ユーザーが操作する以外で、既存コンテンツの上にコンテンツを挿入しない

すでに表示されているコンテンツの上に、別のコンテンツが入ってきたりすると、既に表示されているコンテンツがずれてしまうので、それを防ぐための方法です。
もしコンテンツの上部や途中に、別のコンテンツを入れたい場合は、ちゃんとそれが表示される領域を予め確保しといてあげることが必要です。