人生のセーフティネット

【Googleコアアプデ 】Core Web Vitals 3つのうちCLSの解説と改善方法

google core web vitalsのclsについて解説する人

2020年5月にあったGoogleコアアプデ後にブログPVが激減したブロガーは多いのではないでしょうか

もともとPVが少なかったアラフォーブロガーの私も
アクセスがほぼゼロになりました。

変化に対応していくために何が必要か調べてみたところ、
Google Core Web Vitalsというキーワードが出てきました。

今回はGoogle Core Web Vitalsとは何かを理解していきたいと思います。

Google Core Web Vitalsとは?

簡単にいうと

ウェブサイトを訪れるユーザーのストレスを減らすこと
使いやすくすることです

重要なポイントは3つ

1 ページの表示速度を速くすること

2 操作に対する反応が良いこと

3 デザインや見ためが安定していること

それぞれ重要な指標ですね

googleは上記の3つのポイントを数値化するために下記を設定しました。

3つのポイント

* Largest Contentful Paint (LCP)

* First Input Delay (FID)

* Cumulative Layout Shift (CLS)

今回はCLSについて解説していきます。

CLSって何?

CLSとはCumulative Layout Shiftの略です。

500ミリ秒以内にレイアウトシフトが発生しないなど
コンテンツの不安定性を測定し、スコア化したものです。

要するに突然大きな広告が画面全体に出てきたりする時
イライラしたりしますよね。

そのように画面全体のレイアウトを変えてしまうことなどが
ユーザーに対して悪影響を及ぼすとしてgoogleがスコア化したものです。

ブログの記事を見ていて、スクロールしていったら
広告がドーンと来て画面全体のデザインレイアウトが崩れる

そうすると読み手としてはストレスを感じる
そのストレスを改善して良いブログにしましょうというものです。

CLS低下の原因は?

表示速度を遅くする原因は下記が考えられます。

CLS低下の原因

・寸法のない画像
・サイズのない広告や埋め込み
・動的に挿入されたコンテンツ

広告は、Webのレイアウト変更の最大の原因の1つです。

広告サイズによってクリック率が高くなり、パフォーマンスや収益が向上するので
大きく目立ったりする広告を貼りがちですが、
それ以降の記事やコンテンツから離脱する可能性が出てくるので
ユーザーエクスペリエンスの低下につながり、スコアも低くなります。

CLSの改善方法

ビューポートの上部近くに広告を配置しない

YouTubeのビデオ、Googleマップのマップ、ソーシャルメディアの投稿のサイズに注意

ユーザーの操作に応じない限り、既存のコンテンツの上に新しいコンテンツを挿入しない

ビューポートとは

ビューポートとは表示領域のことです。
スクロールせずに画面全体が表示されている
その表示領域をイメージしてください

ビューポートの上部近くに広告を配置しないとは

画面の上部近くに広告を配置しないでくれということですね
アドセンスとかの配置は良いのか!と聞いてみたくもなりますが
Googleとしてはスコア低下の要因と位置付けているようです。

アドセンスの位置も考えなくてはならないですね

YouTubeのビデオ、Googleマップのマップ、ソーシャルメディアの投稿のサイズに注意

YouTubeのビデオなどを埋め込む時に
埋め込み用に十分なスペースが確保されない場合があり、最終的に読み込まれるときに
画面全体のレイアウトが変わってしまう恐れがあるということです。

こちらもスコア低下の要因と位置付けているようなので注意が必要です。
充分なスペースを確保して設計していきましょう。

ユーザーの操作に応じない限り、既存のコンテンツの上に新しいコンテンツを挿入しない

広告と同様に、ページの残りのコンテンツをシフトするバナーやフォームで発生します。

「ニュースレターにご登録ください!」
「関連性のあるコンテンツ」

うーん、どこかで見たことありますよね
今までやっていたことがスコア低下要因になるような感じでしょうか。

今までのブログの書き方やCVの方法を見直せとGoogleは言っているのかもしれません
そりゃあ検索順位も激変するのは納得ですね。

CLSは2020年のコアアップデートのキモとなっているのではないかと感じます

【Googleコアアプデ 】Core Web Vitals CLSのまとめ

Google Core Web Vitalsとはウェブサイトを訪れるユーザーの
ストレスを減らすことを目的としたものであり、
それを数値化した指標のうち、今回は『CLS』について解説しました。

CLSとは簡単にいうとユーザーが安定的にサイトを見られるようにするもの
画面のサイズが一定であることが大切である

サイズ感が考えられていない動画や広告はスコア低下の要因になる
今まで成功してきたブログ作成の方法はこのスコアの導入によって変化がおきそうです。

コアアップデートのキモになるような気がしてならないので、CLSは注視していきたいと思います。

ポイントは

画面のレイアウトを崩すような広告配置をしない!

Youtubeなどの埋め込みはスペースを充分に確保して全体のレイアウトを考慮する

メルマガ登録など追っかけバナーなどはスコア低下要素

LCP【Googleコアアプデ 】Core Web Vitals 3つのうちFIDの解説と改善方法とともに重要な指標ですね!

Googleの考えていることを理解して、ブログを継続していきましょう!

参考文献:web.dev

リモートワークについての記事を下記noteにまとめています。
無料なのでフォロー、ブックマークお願いします

リモートワーク無料note

ABOUT ME
アバター
あおぞらキンモクセイ
人生のセーフティネット、複数の収入源を構築。大学卒→フリーター +バンドマン→ 証券系サラリーマン→起業→証券系サラリーマン◆株、為替はどっぷり◆子育て奮闘中。英語はあんまり喋れないけど旅行好き◆イギリス、オランダ、ベルギー、シンガポール ◆音楽はGarage bandで宅録継続◆入り口は初期パンクだけど、オールジャンル好き◆サッカー好き◆最近は化石と釣り、落語に興味あり。https://aozorakinmokusei.com◆https://blog.with2.net/link/?2043158