Press Enter/Return to start Search

来年の検索周り最重要要素「コアウェブバイタル」についてまとめてみた

takagi0
技術
目次

こんにちは、高木です！
今年もやってまいりましたアドベントカレンダー！
参加させていただきますよ今年も！
今年はこの素晴らしい冒険島マガジンができたので、こちらで執筆させて
いただきます！

今年もSEO界隈では多くの指標やアルゴリズムが
日々改善されましたね。
Googleさんのこのアルゴリズムは「ランキング要素にはしません！」と
いうのは基本信じてはいけません！
基本後からなると考えておいて問題ないでしょう。

それはGoogleさん自信も検索の仕方をとても快適にするために
行っているわけですから、見過ごすわけにはいかないのですよね！

そんな中でも今年の中頃からささやき始められて
来年にはランキングの指標にもすると公式にアナウンスもありました
「コアウェブバイタル」についてまとめて行こうと思います。

聞き慣れない言葉や、横文字が多いので、半分私の備忘録として
Googleさんの参考などもあわせて紹介していきたいと思います！ではいく〜！

コアウェブバイタル（Core Web Vitals）とは

コアウェブバイタルを語る前にまずはじめに
ウェブバイタルというものが存在します。

GoogleはUX（ユーザーエクスペリエンス）の品質を高めることはWeb上でのサイトの長期的な成功の鍵。
Web　Vitalはウェブ上で優れたユーザーエスクスペリエンスを提供するための不可欠な高品質の信号に関するガイダンスを提供するためのGogoleによるイニシアチブです。
参考：https://web.dev/vitals/

簡単にいうとユーザーにとって快適なサイトは自ずと評価される。
ということですかね。
それをGoogle側が、共通指標として提示するので、それを意識して
改善することで、評価につながるよというのが「コアウェブバイタル（Core Web Vitals）」ということになります。

コアウェブバイタルの指標

それではいよいよ核に迫っていくという感じですかね。
先程、サイトがユーザーに対してUXやユーザー体験を良くすることで
高くなるということですが、Googleは何を指標としているのでしょうか。
それは。。。

・読み込み時間
・インタラクティブ性
・コンテンツの視覚の安定

これらが今現在、Googleがウェブバイタルの土台としているものです。
今現在というのは、あくまで、「２０２０年での設定では。。。」と表現しているところから、これは今後これらに追加されるかもしれませんし、現時点での設定自体が変わる可能性もあるということを思っても良いでしょう。
この辺が、Googleの今はランキングの指標には感がていませんですけど〜！ってやつに通ずる部分がありますね。

それでは現時点での設定の軸となっている項目を、
もう少し掘り下げていくとしましょう！

先程の３つの要素はそれぞれ下記のように呼ぶようになります。

読み込み時間→　LCP（Largest Contentful Paint）
インタラクティブ性→　FID(First Input Delay)
コンテンツの視覚の安定性→　CLS(Cumulative Layout Shift)

それはそれぞれがどういうことなのか、見ていきましょ！

LCP（Largest Contentful Paint ）：読み込み時間

Largest Contentful Paint は、ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。
感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
参考：https://developers-jp.googleblog.com/2020/05/web-vitals.html

LPCはそのページの中でも最も大きなコンテンツのレンダリング時間を指します！大きなコンテンツとは文字だったり画像だったりすることが多くなるかと思います！
レンダリングって何って人のために補足しておくと、サイトの表示される描画内容！もっと簡単に言うと、表示されるってことですね！
なので、ページの大きなコンテンツ（もっとも重要な要素と考えられるかも）が表示されるまでの速さという部分が評価の対象になりそうですね！

Googleとしては、ページの読み込みから2.5秒以内で表示できるとGood
と評価されるようです。

FID（First Input Delay ）：インタラクティブ性

First Input Delay は、最初の入力までの遅延を表します。
応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。
参考：https://developers-jp.googleblog.com/2020/05/web-vitals.html

FIDはページの中でユーザーがアクションしたときから応答するまでの時間をいいます。テキストリンクをクリックしたりボタンを押した際に反応を見ているという感じですね。
この時ページのスクロールやズームしたりする部分は、FIDには該当ないということです！

アクションして1000ミリ秒未満がGood評価になるようです。

CLS（Cumulative Layout Shift ）：コンテンツの視覚の安定性

Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。
視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。
参考：https://developers-jp.googleblog.com/2020/05/web-vitals.html

なんだか自分も、これがパッと聞いて、いまいちイメージが掴めなかったのですが、これは「ユーザーが意図せぬレイアウトのズレ」がどのくらいページ内で発生するかというものらしいです。

例えば、テキストを読んでいたのに、急に画像や広告が遅れて表示されて意図しないのにクリックしてしまったとか、テキストが急にずれてしまって、見失ってしまったということはないでしょうか？

そういうユーザーが体験する出来事で煩わしいものが少ないほどよいということです。これはGoogleが「そういうズレ」に対して影響を受けた範囲の広さと移動距離をもとに算出するようです。

ちょっとどうすればいいのかという感じもしますね。

コアウェブバイタルというのが、どういう指標を持って評価されるかというのが何となく見えてきたのではないでしょうか？

コアウェブバイタルの改善方法

さてそれでは実際にコアウェブバイタルの要素を改善していくためには
何を見ていけばよいのでしょうか？
改善するために見る要素などをピックアップしていきたいと思います！

LCP（Largest Contentful Paint ）：読み込み時間

LCPはサイト内の「最大のコンテンツイベント」の読み込みになるので
画像や重要なコンテンツ郡になるかと思います。
つまり下記のような要素が影響を受けるかと思います。

・img 要素
・ビデオや動画の要素
・CSSなどで使う背景画像
・テキストノードまたはその他のインラインレベルのテキスト要素の子を含むブロック

最大のコンテンツイベントとは何か？例えばページの中で
・重要な要素のテキストといえばタイトルでしょうか
・重要な画像というと、サムネイル画像やそのページでユーザーに
一番見てもらいたいもの
・動画があったらそれかも

そういうものを測っていると考えて概ね問題ないのではないでしょうか。
それらが、ストレスなく読み込まれユーザーに届けるには
・サーバーの応答時間
・レンダリングをブロックするJavaScriptとCSS
・リソースの読み込み時間
などが挙げられます。
このあたりを、サーバーキャッシュをもたせたり、ファイルの読み込みは
CDNを利用したりすることで改善ができるのではないでしょうか？

FID（First Input Delay ）：インタラクティブ性

ユーザーのアクションに対しての応答に対して遅延してしまう
要因にJSなどの読み込みなどが、考えられます。

現在のサイトではデザイン的な動きやUXやUIをわかりやすく
するために様々なJSが使われるかと思います。
しかしJSなどのファイルが多くなりすぎると、かえって妨げに
なってしまうというので、そのページ、ページで必要なものだけを
読み込ませるようしたりすることで、このあたりの改善ができるかと思います。

CLS（Cumulative Layout Shift ）：コンテンツの視覚の安定性

これを書いててこのツイートを見てみましょう！
先程少し分かりづらいと言っていた。ズレというのもあわせて
理解できます！

こういうズレを無くすということが、改善になるということになります。
そのためには、img要素にはwidthとheightを設定することが
まずその一歩になりえそうです。

## いつからランキング要因になる？

現状では、ランキングの要因として働くようになるのは
来年2021年の５月頃からと言われております。
ですので改善を行うのであれば、それを目安に行えばよいかと思います。

その際にあわせて気にかけていただきたいのは
下記の要因も組み合わせで評価されるということを
覚えておきましょう！

・モバイルフレンドリー
・セーフブラウジング
・HTTPS
・邪魔なインタースティシャルがない

ランキングの要因というは、それこそ200程度の要因があると
言われているので、コアウェブバイタルだけでなく満遍なく意識するべきです。

### 最後に
さて来年の検索エンジンにおける最適化の一つの代表的な
ランキング評価基準の一つになるコアウェブバイタルを、ざっとまとめて
来ましたが、いかがだったでしょうか。

一つ勘違いしてほしくないのは、このコアウェブバイタルを完璧に
すれば劇的にサイトのランキングに影響するかというとそうではありません。
ですので、対応もそこまで慌てて行う必要はないと言えます。

というと語弊があるかもしれませんが、今回のこの指標というのは
あくまで、ユーザーが心配なくサイトを自分が知りたい情報を
いち早く知ることができるようにするためのアルゴリズムにほかならないと
私は感じています。

まずはじめに私達が提供するべき情報は、ユーザーにとって
価値を提供できているか、スタートアップガイドに載っている
最低限の検索エンジンの最適化はできているか？
など、まずできることはたくさんあるかと思います。

あなたが情報を得たいと思う時に、どんなサイトがあると嬉しいですか？
まずはそういったところから始めることが何よりも大切だということを
お伝えして締めさせていただきます。

Now hiring！
プラコレでは、自由な未来をつくるために
一緒に冒険したいエンジニア・デザイナーを募集しています！
https://www.wantedly.com/projects/262436
運営サービス
[PLACOLE(プラコレウェディング)](https://pla-cole.wedding)
[DRESSY(ドレシー)byプラコレ](https://dressy.pla-cole.wedding)
[farny(ファーニー)byプラコレ](https://www.farny.jp)