こんにちは。和雨（@waublg）です。
あなたはコアウェブバイタルって知っていますか？
2021年の間にランキング要因になる、つまり検索順位に影響すると言われています。
え、それすごい重要なんじゃないの！？
そうなんです！
なので今のうちから理解しておきましょうね！
この記事では、コアウェブバイタルの指標のひとつ、CLSについて説明します。
- コアウェブバイタルとは？
- コアウェブバイタルの指標の一つ、CLSとは？
という点について簡単に説明しますので、とりあえずさらっとだけでも把握だけしてくださいね！
コアウェブバイタルとは？
まずコアウェブバイタルとは、ウェブページUXにおけるGooogleが掲げる重要な指標です。
さっぱりわからん
ですよね。笑
まずUXというのはUser Experienceの略で、日本語では「顧客体験」と訳されています。
ちょっと分かりにくい説明ではありますが、「ユーザの快適な体験（のデザイン）」と普段私は説明しています。
例えば、Webサイトを開いてどのページもサクサク動いていたら快適ですよね。
その他にも操作のしやすさとか、突然広告が表示されて誤タップしちゃうとか、そういうのも全部ユーザ体験です。
そんなUXを評価するうえでの指標として、Googleは2021年中にコアウェブバイタルという基準を追加するということです！
もちろんUXの評価はSEOの評価に繋がりますので、私たちはコアウェブバイタルについて理解し、サイトを改善しなくてはなりません。
CLSって何？
コアウェブバイタルは更に3つの指標に分けられます。
それは、
- LCP(Large Contentful Paint)
- FID(First Input Delay)
- CLS(Cumulative Layout Shift)
の3つです。
今回はその中のCLSについて解説します。
CLSはCumulative Layout Shiftの略らしいです。
翻訳をかけたら「累積レイアウトシフト」と出ました。
正直この言葉からじゃ意味が分かりませんよね。笑
結論を言うと、CLSというのは視覚要素の安定性を示す指標とのこと。
つまり、Webページの表示がぶれたりすることなく、安定して表示されるかどうかということです。
たとえばWebページを開いた瞬間、ページ内の画像の表示が後回しにされることがあります。
ブロガーさんなら分かると思いますが、遅延読み込みというやつですね。
その画像の読み込みが完了したとき、画像を表示させたら周りのコンテンツがぶれることがあります。
んー、わからなくもないけど、ピンとこないな
ちょうどこの現象のイメージと解決策を、グーグルのアディ・オスマニ氏がTwitterで動画付きで教えてくれています。
動画の左の例を見ていただければわかると思いますが、画像読み込み前は横のテキスト部分が左端に寄っていて、読み込みが完了して画像表示されたら右側に動きましたよね。
これが表示のぶれです。
解決策はこのツイートの通り、HTMLの<img>タグにwidthとheight（画像の幅と高さ）をあらかじめ記入しておくことです！
こうすると最初から読み込み後の画像のスペースを確保してくれるので、ぶれがなくなります。
このことからも今後はimgのwidth, heightなどをきちんと記述されていることが重要になると分かりますね。
そうなのか、、そしたらHTMLを覚える必要があるのかな
多少は必要かもしれません。
でも、有料テーマにしておけばある程度対応してくれますよ！
もしかしたら、しばらくはHTMLの知識や使っているテーマによって差が出てしまうかも知れません。
「有料テーマは必須か」という点で悩む方が多いかもしれませんが、こういう所で差が出たりするんですよね。
いずれにしろ、CLSが何かとかが分かっていなければ対応もできないしテーマの判断基準も決められません。
ここで最低限理解して、これから何が必要かを考えておきましょう！
WordPressでサイトを作るにあたって、テーマ選びはとても重要です。なぜなら、テーマ選びによって、デザインからSEOまで大きく差がついてくるからです！せっかくならデザインが良くて、使いやすくて、便利で、アクセス[…]
まとめ
コアウェブバイタルやCLSについて、少しでも把握できたでしょうか？
コアウェブバイタルについてはまだ十分に情報が出回っていないので、少々専門的な話に感じられてしまったかも知れませんね。
でも、Googleの軸はユーザのためになるコンテンツを評価するであることに変わりありません。
ここだけはしっかりと忘れずに、訪問してくれた読者さんが快適にサイトを見てもらえるよう頑張っていきましょう！