Googleが提唱するCWVの重要な3つの指標の中の1つであるCLSにはサイトのレイアウトシフトが深く関わっています。

レイアウトシフトを放置しているとユーザーエクスペリエンスは低下し、SEOにも悪影響を及ぼしかねません。

今回の記事ではそんなCLSのスコアがSEOに与える影響やレイアウトシフトが起こる原因について解説します。

CLSの具体的な改善方法や確認のための無料ツールも紹介しますので、ぜひ参考にしてください。

CLSの位置付け

サイト

CLS（Cumulative Layout Shift）はWebサイトのレイアウトの安定性を評価する指標です。

CLSの値が大きいサイトでは、意図しないレイアウトのずれによってユーザーに不快感を与える可能性が無視できません。

ユーザーエクスペリエンスの向上を目指すGoogleは、CLSの値をランキング決定のための重要な指標の1つと定めました。

今後、レイアウトシフトの問題を考慮しないサイトはますますランキング上位を狙うことが難しくなることでしょう。

 

SEO対策の事例はこちら

 

ページエクスペリエンスの重視

アナリティクス

GoogleはWebサイトをランキングするにあたってページエクスペリエンスを重視しています。

ページエクスペリエンスの評価に使われるのは以下の5つの要素です。

  • Core Web Vitals
  • モバイルフレンドリー
  • セーフブラウジング
  • HTTPS
  • 煩わしいインタースティシャルの非表示

モバイルフレンドリーはモバイルでの閲覧に適しているか否かが、セーフブラウジングではコンテンツの安全性が問われます。

HTTPSは安全な配信方法の問題で、煩わしいインタースティシャルの非表示は広告表示に関する問題です。

以下の項ではこれらの要素の中からCWVの3つの指標について取り上げましょう。

 

SEO対策の事例はこちら

 

CWVの3つの指標

3

Googleが提唱するCWV（Core Web Vitals）はランキングの決定に深く関わるため非常に重要です。

CWVに関する評価が低いサイトはユーザーにとって使いにくいサイトである可能性が高く、利用者が減ることも考えられます。

CWVはユーザーエクスペリエンスを高く保つために重要な3つの指標によって構成されています。

この項目ではそれら3つの指標についてそれぞれ詳しくご紹介しましょう。

LCP

速度

CWVの3つの指標、1つ目はLCP（Largest Contentful Paint）です。

LCPはページの表示速度に関する指標で、ページ内の最大コンテンツを表示するのにかかる時間によって以下の通り評価されます。

  • 2.5秒以内：良好
  • 4.0秒以内：要改善
  • 4.0秒以上：不良

表示速度が遅いと多くのユーザーはすぐに帰ってしまいます。Webサイトの運営にあたってはとても大切な指標です。

FID

タップ

CWVの3つの指標、2つ目はFID（First Input Delay）です。日本語では初回入力遅延と呼ばれます。

ユーザーがクリックやタップなどのアクションを最初に行った時、ブラウザの応答時間が短いほど高評価となります。

  • 100ms以内：良好
  • 300ms以内：要改善
  • 300ms以上：不良

操作しても無反応のまま放置されるとユーザーは強いストレスを感じます。反応を待ちきれずに立ち去ることも少なくありません。

FIDの値は小さいに超したことはないといえるでしょう。

CLS

htmlcss

CWVの3つの指標、3つ目はCLS（Cumulative Layout Shift）です。

CLSは日本語では累積レイアウト変更と呼ばれており、先に触れた通り視覚要素の安定性に関する指標です。

サイトの記事を読み始めたら思いがけないタイミングで広告が表示され、興を削がれて困惑したという経験はないでしょうか。

これがレイアウトシフトと呼ばれる現象で、ユーザーの予期しないレイアウトのずれがどれくらい発生したかを計測します。

レイアウトシフトスコアは以下の通り評価されます。

  • 0.1未満：良好
  • 0.25未満：要改善
  • 0.25以上：不良

不意にレイアウトが変わるとユーザーに強い不快感や損害を与える場合があるので注意が必要です。

CLSのスコアがSEOに与える影響

転職エージェント

Googleは公式ブログの中で、ページエクスペリエンスの要素がただちにランキングを左右するわけではないと明言しています。

一部の要素が平均以下の値を示していても、総合的に優れた情報を含むページであれば上位にランクインするということです。

ただ、同じコンテンツを含むページが複数ある場合はこの限りではありません。

同程度のコンテンツを含むページ同士を比べる時には、CLSをはじめとするCWVの各スコアが重要な判断基準となるでしょう。

総じて、SEO対策で重要なのはコンテンツの質とページエクスペリエンスに関する高評価の維持だといえます。

 

SEO対策の事例はこちら

 

レイアウトシフトの概要

散らばったアルファベット

CWVの3つの指標の中の1つCLSはレイアウトシフトの発生に関する指標です。

ここでいうレイアウトシフトとは、ユーザーの予期しないコンテンツのずれが起きることを意味しています。

遅れて表示された画像のせいで文章を見失ったり、ふいに現れた広告を誤ってクリックしたりした経験はないでしょうか。

これらの現象はレイアウトシフトと呼ばれるもので、値が大きいと優れたユーザーエクスペリエンスを阻害していると判断されます。

レイアウトシフトの発生原因

PC操作する男性

レイアウトシフトは優れたユーザーエクスペリエンスの大敵です。場合によってはユーザーに損害を与えてしまいかねません。

そんなレイアウトシフトの発生原因について、この項目では主なものから3つを取り上げてそれぞれ詳しくご紹介します。

サイズ指定のない画像がある

レイアウトシフトの発生原因、1つ目はサイズ指定のない画像があることです。

Webサイトを構築する際、サイト内で使用する画像には高さや幅といった属性に値を指定して用います。

近年、様々なデジタルデバイスの普及を受けて、デバイスによって表示を変えられるレスポンシブデザインのサイトが増えました。

レスポンシブデザインの場合、画像にサイズを指定しないことが多く、これがレイアウトシフトの大きな要因となっています。

動的に埋め込まれるコンテンツがある

レイアウトシフトの発生原因、2つ目は動的に埋め込まれるコンテンツがあることです。

JavaScriptを用いた処理でコンテンツの高さを動的に変更していると、読み込みによってレイアウトシフトが発生します。

フォールバックフォントからWebフォントへの置換でサイズが変わる

レイアウトシフトの発生原因、3つ目はフォールバックフォントからWebフォントへの置換でサイズが変わることです。

描画する文字が指定フォントの中にない場合、その文字を持つ他のフォントから拝借することをフォントフォールバックといいます。

こうして一旦表示した文字からWebフォントに置き換わる時、サイズが変わってレイアウトがずれる場合が少なくありません。

このWebフォントの適用の問題はCLSだけでなく、同じCWVの指標の1つであるLCPにも関わる重要な問題です。

 

ワンポイント
高いユーザビリティを維持したままレイアウトシフトを改善するのが理想的。

CLSの改善方法

方法

CLSの改善方法はいかにレイアウトシフトの影響を小さく抑えるかということに尽きます。

直前の項目で説明した通りレイアウトシフトの原因はいくつかあるので、対処方法も複数存在します。

この項目ではCLSの主な改善方法の中から厳選して4つをご紹介しましょう。

画像にwidth属性とheight属性を指定する

CLSの改善方法、1つ目は画像にwidth属性とheight属性を指定することです。

width属性とheight属性が指定されていない場合、ブラウザは画像のダウンロードが済むまでサイズが分かりません。

そのためダウンロードが完了した瞬間にレイアウトシフトが発生してしまうことになります。

これを避けるためにはあらかじめCSSでwidth属性とheight属性を指定しておくことが有効です。

ダウンロード完了前にブラウザに画像のサイズを伝えることで、表示領域の確保ができるでしょう。

広告にプレースホルダを設定する

CLSの改善方法、2つ目は広告にプレースホルダを設定することです。

プレースホルダとは実際の内容を後から挿入するために仮の状態で場所を確保しておくことを意味しています。

この考え方は先に紹介したwidth属性とheight属性で画像のサイズを指定しておくことと同じだといえるでしょう。

広告の内容がダウンロードされ、読み込まれる前から場所を確保しておけばレイアウトシフトが生じることはありません。

動的コンテンツを最適化する

CLSの改善方法、3つ目は動的コンテンツを最適化することです。

JavaScriptを使ってページ上部に動的コンテンツとして埋め込まれたものもレイアウトシフトの原因となります。

こうしたコンテンツに対してJavaScriptを使わないことや表示位置変更などの対処をすることで問題解決できるでしょう。

動的コンテンツの中でも、ユーザーのクリックアクション直後に表示されるコンテンツはレイアウトシフトとみなされません。

ただし、クリックしてから表示されるまでに時間がかかりすぎるとCLSの評価を悪くする原因となります。

アコーディオンリストやプルダウンリストについてはクリックから表示までに時間がかかりすぎていないか検証が必要です。

Lazy Loadの代替ローディング画像を使わない

CLSの改善方法、4つ目はLazy Loadの代替ローディング画像を使わないことです。

Lazy Loadは画面に未表示の画像について遅延ローディングを行うもので、全体の表示速度が上がるためLCPに有効です。

ただ代替ローディング画像を使う場合があり、これによってレイアウトシフトが起きることがあるため気を付けなければなりません。

この問題には代替ローディング画像を使わないことで対処できます。

 

ワンポイント
レイアウトシフトは原因も対処法も複数存在する。

CLSの確認ツール

プログラミング

レイアウトシフトの発生原因や対処法について解説してきました。

レイアウトシフトに関する指標であるCLSの値はGoogle独自のスコアによって求められます。

この項目ではCLSの計測に使える無料ツールを3つ厳選してご紹介しましょう。

Search Console

CLSの確認ツール、1つ目はSearch Consoleです。

Googleが提供する無料解析サービスで、サイトの掲載順位の監視や管理を行うことができます。

CWVの3つの指標に関して改善が必要なものや不良なものがあれば通知してくれるので、サイト管理の心強い相棒となるでしょう。

管理画面の「ウェブに関する主な指標」をクリックすると不良URL・改善を要するURL・良好URLの推移示してくれます。

PageSpeed Insights

CLSの確認ツール、2つ目はPageSpeed Insightsです。

PageSpeed InsightsもGoogle提供のサービスで、CLSの要素をスクリーンショット付きで視覚的に表示してくれます。

これによって、サイト運営者は具体的にどのような対処をすれば良いか理解しやすくなるでしょう。

「レイアウトが大きく変わらないようにする」という項目でページのCLSへの影響が大きい要素を教えてくれます。

Chromeの拡張機能Web Vitals

CLSの確認ツール、3つ目はChromeの拡張機能Web Vitalsです。

Chromeの拡張機能Web Vitalsを有効にしていると、ページのセッション中に計測したCWVのスコアが分かります。

実際にページをクリックしたりスクロールしたりしながら問題点を探せることが大きなメリットだといえるでしょう。

ページのスクロール中に急に画像や広告が読み込まれる不具合がないかなど、自分で試しながら詳しく検証できます。

 

ワンポイント
無料ツールを使い比べて自社に適したものを探そう。

CLSの改善方法で悩んだら

胸に手を当てる男性

レイアウトシフトの発生はユーザーエクスペリエンスの観点からは非常に大きな問題です。

場合によっては、ユーザーが意図しない広告をクリックすることにもなり、損害を与えてしまう可能性も否定できません。

そのような事態を招かないためにもCLSのスコアを適性に保つ努力は欠かさずにいたいものです。

もしもCLSの改善方法に関して悩んだら、デジマクラスのコンサルタントに相談してみてください。

Webサイトの構築に精通したスタッフが親身になってお話をうかがい、適切なアドバイスをさせていただきます。

 

ワンポイント
CLSの改善方法で悩んだらプロに相談するのが1番。

まとめ

プログラミング中のPC画面　写真

いかがだったでしょうか。今回の記事ではCLSがSEOに与える影響やレイアウトシフトの発生原因などについて解説しました。

レイアウトシフトが頻繁に起こるとユーザーエクスペリエンスは著しく低下し、ユーザーとGoogle双方から低評価を受けます。

結果として検索ランキングは下位へと転落し、Webサイトを通じたコンバージョンも減少することでしょう。

こうした事態を避けるためにもCWVに関する対策は常に徹底しておかなければなりません。

本稿が対策実行のための一助となれば幸いです。