今回は、新たなSEOの指標として始まるCore Web Vitalsについてまとめてみました。

Core Web Vitals（コアウェブバイタル）とは、新たな検索順位のランキング要因としてGoogleが提案した指標です。

この指標が2021年に開始されると発表があったことから、2021年下半期〜年内以降、WEBのトレンドが大きく変わってくる可能性があるようです。

コアウェブバイタルとは

コアウェブバイタルとは、ユーザーエクスペリエンスを向上させるための取り組みとなっており、SEO的にも対応していく必要がある項目です。

ユーザーエクスペリエンスの向上とは、
「ストレスを感じさせないページ繊維の動き」
「ユーザーが意図する動きの有無」
「ユーザーがスムーズに内容を確認出来る」
などが含まれ、閲覧者が見やすく使いやすいサイトかどうかと考えれば分かりやすいと思います。

これにより、さらなるユーザー目線の使い勝手の良さを求められるようになります。

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

コアウェブバイタルは、「LCP（読み込みパフォーマンス）」「FID（初回入力遅延）」「CLS（視覚的な安定性）」の3つの指標で評価されます。

LCP（読み込みパフォーマンス）

LCPは「Largest Contentful Paint」の略称で日本語では「最大のコンテンツペイント」と言います。
サイトのページにアクセスしてから、表示領域内の最大要素（主に画像や動画、見出しなど）が表示されるまでの時間を測定した指標です。
表示されるまでの時間が短いほど良い評価になります。

LCPに影響する要素

LCPに影響する要素はファーストビューで表示されるものです。もしもページのファーストビューに動画が存在する場合には、その動画が最大要素となり、HTMLで表示しているもの以外にも、CSSで背景を表示させている場合なども最大要素になります。

LCPの評価が下がる要因と改善方法

サーバーの応答時間が遅い

レンタルサーバーはサイトの速度に直接影響するため、性能以外にもデータ転送量や同時アクセス数といった、アクセスに影響する要素をふまえてレンタルサーバーを選び、サーバキャッシュやブラウザキャッシュを利用します。

JavaScriptとCSSがレンダリングをブロックする

CSSやJavaScriptのサイズが大きいために他のファイルの読み込みに支障が出る場合には改善が必要です。圧縮されたCSSやjavascriptをし、 重要でないCSSを後の方で読み込んだり、重要なCSSはインラインで読み込むなどを行います。

リソースの読み込み時間

大抵が画像の読み込み時間の問題が影響するため、画像を圧縮したりサイズを軽くします。

FID（初回入力遅延）

FIDとはFirst Input Delayの略称で、初回入力遅延の事を意味します。

サイトのページにアクセスしてから、クリックやタップなどのアクションにブラウザがどのくらい速く対応できるかを測定した指標です。
スワイプすればスクロールされる、クリックすれば開く、テキストを入力すると表示が変わるなど、これらのユーザーの動作に対して実際に返答されるまでの時間が短いほど良い評価になります。

FIDの評価が高いサイトはストレスを感じ難く、スムーズに動くWEBサイトとなりユーザー体験は良好と言えます。

FIDの評価が下がる要因と改善方法

・JavaScriptが分散し同タイミングで様々な要素を読み込んでいる場合

・ボリュームの大きいCSSをヘッダーで読み込んでいる場合

・ファーストビューにサイズの大きい画像がある場合

読み込むリソースを減らしてサイトスピードを速くする事が重要です。ファーストビュー部分をなるべく初めの方に読み込むことで改善につながります。

CLS（視覚的な安定性）

CLSとは「Cumulative Layout Shift」の略で、日本語では「累積レイアウト変更」と言います。ページの読み込み段階で、ページ要素がどのくらい移動しているか（レイアウトのずれがあるか）の指標です。

例えば、ページを開いて画像が読み込まれた瞬間、本来あるはずの場所の画像が抜け、テキストなど他の要素が上に詰まってしまった数秒後に、画像が表示され他の要素が元の位置に戻るといったことが起きた場合、レイアウトが変更されていると判断されます。この様にレイアウトが動く事はユーザビリティが非常に悪いとされ、SEOでも評価が下がります。
なぜなら、ユーザーが本来クリックしたかった部分を押そうとした際にレイアウトが動いてしまうと、目的の箇所では無い別のリンクを誤ってクリックしてしまう可能性があるからです。

ページ要素の移動量で測定され、0に近いほど良い評価になります。

CLS評価が下がる要因と改善方法

レイアウトが動いてしまう原因は主に以下が考えられます。

・width=auto
・width=100%
・プログラムで画像を縮小拡大
・lazy load

CLSの改善方法は簡単で、imgタグにwidthとheightを指定することです。

おわりに

LCP・FID・CLSはCore Web Vitals(コアウェブバイタル)のユーザー体験向上のための新たなコンセプトです。今後プランニングAでも対応に向け、技術的な改善策を研究してまいります。

プランニングA WEBチーム　野々下