CLSは画像サイズ指定で本当に改善されるのか（コアウェブバイタルSEO検証）

CLSはSEOコアウェブバイタル指標の一つで、画像読込などによるレイアウトのずれの度合いを数値化したものです。

結論、imgタグに幅と高さの指定をすればCLS数値は少なくなる事が検証できました。

あらかじめサイズ指定をしておけば、その表示スペースが最初から確保されるのでレイアウトがずれないためです。

CLSとは

Googleが検索ランキング要因として2021年5月頃に正式採用するのが「コアウェブバイタル」と呼ばれる概念ですね。

ユーザーがそのWEBサイトを気持ちよく使えるよう、その満足度を多面的に数値化したものになります。

CLSは、そのコアウェブバイタル指標の3つ（LCP・FID・CLS）の内の一つです。

逆に言えば、いかにユーザーに不快感を与えない様なWEBサイトを設計するかがポイントになります。

3つの要素

この中でCLSは「ユーザーが意図せぬレイアウトのずれ」の度合いを数値化しています。

レイアウトのずれは画像や動画・広告などがページ内に表示される事で、その分コンテンツ位置が上下左右にずれる現象です。

例えば以下の様な現象が、ユーザーの弊害（ストレス）になると考えています。

ユーザーが陥りやすいストレス

CLSの数値が高いという事は、それだけこの「ズレ」が起きている度合いが大きい事を指しています。

CLS以外のLCPやFIDの時間が長い場合も同様で、それだけWEBサイトがユーザーにストレスを与えていると言えます。

コアウェブバイタルは正式なSEOランキング要素に

これらを改善する事は、ユーザー体験（顧客満足度）の向上に直結しますよね。

Googleは今後、ユーザーの満足度が高いWEBサイトをより上位へ持って来るべきと考えているのです。

Googleがコアウェブバイタルを正式なSEOランキング要素にしようとしているのは、これが理由です。

しかしランキング要素になるからと言って、すぐに明確な対応の道筋ができている人はまだ少ないと思います。

CLSが改善しやすい要素

コアウェブバイタルの主な3要素の中で、一番取っかかりやすいのが「CLS」と言われています。

このCLSはHTMLに手を加えるだけですぐに数値を改善できると言われているからです。

HTMLの修正とはズバリ、画像のimgタグに「widthとheightの数値を指定する事」です。

では本当にこの画像サイズの指定作業で、CLSの数値が改善されるのか検証してみました。

CLS数値の調べ方

このCLSの数値を改善する前に、現在の数値（修正前の数値）を測る必要がありますよね。

これはGoogle Search Consoleで調べる事ができます（他にもLighthouseなどの各種ツールがあります）。

「ウェブに関する主な指標」の項目で、対象WEBサイトのPC版とスマホ版それぞれのコアウェブバイタル数値を見る事ができます。

LCP・FID・CLSの3指標に関して「良好」「改善が必要」「不良」の3段階の色分けで評価してくれています。

LCP・FID・CLSの3段階評価

	良好	改善が必要	不良
LCP	2.5 秒未満	4 秒以下	4 秒を超える
FID	100 ミリ秒未満	300 ミリ秒以下	300 ミリ秒を超える
CLS	0.1 未満	0.25 以下	0.25 を超える

CLSの数値に関して言えば、0.1未満が「良好」、0.25以下は「改善が必要」、0.25超だと「不良」という扱いです。

今のところ「不良」と判定されていても順位は落ちない様ですが、来年5月以降は順位に影響してくる事でしょう。

「不良」と判定されたページに対してはもちろん、「改善が必要」に関しても対応が必要になりますね。

改善前のCLS数値

とある管理中のWEBサイトを使って、HTML改善前と改善後のCLS数値を比較してみました。

このWEBサイトは元からimgタグにwidth・heightの数値指定を一切入れていません。

代わりにCSSでwidth:100%;の制御をしているため、PC・スマホ共に枠内で横幅一杯に表示がされます。

画像サイズに比例して高さも自動で収まってくれるためです。

むしろサイズ指定をしない事で、ソース量を削減できるとさえ思っていました。

CLS改善前の状態

CLSを改善する前の数値が以下の状態です。

修正前の状態（PC）

修正前の状態（スマホ）

CLSの数値は0.25を超えると「不良」扱いとなり赤色の帯になる訳ですが、スマホ版ほとんどのページが「不良」状態でした。

以前までは黄色だったのですが、途中から赤色に判定されましたね。

データ状態は同じでも、通信環境やサーバー状態によって変わる様です。

ページを例に取ったCLS数値の状態（修正前）

いずれも「0.29」「0.31」と、0.25を超えていますね。

imgタグへ幅と高さを指定

ではこの状態からこのWEBサイト上の全ての画像タグにwidth="" height=""を指定してみます。

この時CSSまでは変更せず、width:100%;の指定はそのまま続行してみました。

imgタグ記述例

<img loading="lazy" width="703" height="400" src="../images/image.png" alt="">

PC版・スマホ版同様に、今回の検証ではsrcset=""は使っておりません。

「サイズ指定をするだけ」でどれだけ違うのか、その差を確かめるためです。

srcset=""を使えばスマホ版はもっと改善される可能性がありますよね。

srcsetタグ記述例

<img src="../images/image.png" srcset="img/image-320.png 320w,img/image-640.png 640w" sizes="50vw">

改善後のCLS数値

一通りHTMLソースの改善をおこなったので、修正した全WEBページをUPし直します。

Google Search ConsoleがWEBサイトに反映された修正を検証し終わるまでは、当然少し時間が掛かります。

ですので「修正を検証」ボタンを押した後しばらく待っていました。

Google Search Consoleの検証結果

数日経ってから確認をした結果がこちらです。

ウェブに関する主な指標「モバイル版」

ページを例に取ったCLS数値の状態（修正後）

改善前と同じURLで「0.24」「0.18」と、いずれも0.25を下回りました。

見事に赤帯ゾーンを抜けて黄色帯ゾーンへ来ていました。

黄色ですのでまだ改善が必要な事に変わりは無いのですが、サイズ指定をした事で変化が起きたのは間違いありません。

サイズ指定は十分条件ではありませんが、改善策の一つである事がこれで証明されましたね。

srcsetを使えばより変化が出るかも

今回は単に、width="" height=""を指定するだけにとどめました。

赤帯が出ていたのはスマホ版ですので、本来はレスポンシブデザイン向けタグ設定である「srcset=""」を使うべきでしょう。

しかし単純に幅と高さを設定するだけでも、スマホ版のCLS数値が向上する事を知ってほしかった訳です。

なぜ画像サイズ指定でCLS数値を改善できるのか

CLSは、スペースの無い所に画像等のデータが割り込んで来る事でレイアウトがずれる「度合い」を数値化しています。

サイズ指定をしていないと、ブラウザは画像が読み込まれるまでそのサイズ比率を知らないままです。

画像が入った瞬間にスペースが作られるので、その次にある文章がガクッと下に落ちる訳です。

imgタグにwidth・height属性を追加しておけば、前もってブラウザ側にその画像の横と縦のサイズ比率を知らせる事ができます。

把握したサイズ比率により、画像の表示予定サイズが算出できる訳です（スマホ版も同様）。

最初からスペースを空けておけばレイアウトはずれない

算出した表示予定サイズがあれば、画像をダウンロードする前に「適切な画像表示スペース」の確保が可能なのです。

最初から表示スペースが空いていれば、画像が後からダウンロードされたとしてもレイアウト崩れは起きません。

つまりこれで文章やリンクの位置が、後から押し下げられる事は無くなるという訳です。

まとめ

ここまで紹介した通り、HTMLソースに画像サイズを直接指定するだけで簡単にCLSの数値の改善ができる事がわかりました。

少し手間かも知れませんが、これからは画像タグにサイズ指定をするのは常識になります。

コアウェブバイタルSEOにはCLSだけでなくLCPやFIDなどもありますので、多様な改善が必要になります。

しかしCLSについては比較的簡単な事がおわかり頂けたと思います。

画像サイズ指定はこれから必須です

冒頭でも述べましたが、コアウェブバイタルは来年からSEO要素として正式導入されます。

これからWEBサイトを作成する際は、画像にwidthとheight属性を必ず入れる様にしましょう。

そして既存サイトで画像サイズ指定をしていない場合は、全て指定をしていく必要がありますね。

一押し人気コーナー紹介