【2021年版SEO】Core Web Vitalsの基礎と対策

Core Web Vitals

コアウェブバイタル(Core Web Vitals)はサイトの健全性を示す重要指標です。

GoogleはSEOの評価基準の一つとして、2021年5月からCore Web Vitalsを正式に検索ランキング要因に組み込むことを発表しています。

Core Web VitalsはUX(User Experience:ユーザーエクスペリエンス)に関わる3つの指標が土台となります。

  • LCP:ページの表示速度を表す指標
  • FID:ページの応答性を表す指標
  • CLS:ページの安定性を表す指標

この記事では、Core Web Vitalsの3つの指標の基礎や確認方法を解説し、それぞれ実施すべき対策をわかりやすく解説します。

2021年最新のSEO対策を実施したい方、アフィリエイト初心者の参考になれば幸いです。

2021年もブロガー・アフィリエイターとして生き残るためには、Core Web Vitalsへの対策は必須です。

タカ
とはいえ、僕もこれから本格的に対策していく予定です。ぜひ、理解して仲間にも教えてあげて下さい。

 

Core Web Vitalsの基礎知識

ウェブバイタル(Web Vitals)

コアウェブバイタル(Core Web Vitals)を理解するには、その大元となるウェブバイタル(Web Vitals)を知っておく必要があります。

ウェブバイタル(Web Vitals)とは、ユーザーエクスペリエンスに関わる、ユーザー満足度を高めるためのGoogleの取り組みのことです。

バイタル(Vitals)は「重要」「本質的」という意味があり、ウェブサイトで守るべき重要ルールといった意味合いがあります。Google公式による定義は以下の通り。

「ウェブで優れたユーザー エクスペリエンスを実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組みです。」

出典:Google Developers Japan Web Vitals の概要: サイトの健全性を示す重要指標

そして、ウェブバイタル(Web Vitals)の中核を成すのがコアウエブバイタル(Core Web Vitals)です。

Core Web Vitalsには満たすべき3つの指標「LCP」「FID」「CLS」があるので、順番に解説していきます。

タカ
3つの指標を最適化することがコアウエブバイタル(Core Web Vitals)の主な対策です。

 

LCP(Largest Contentful Paint)

LCPとは?

LCP

出典:web.dev | Largest Contentful Paint (LCP)

LCP(Largest Contentful Paint) はページの表示速度を表す指標です。Largest Contentful Paintを日本語に直訳すると「最大コンテンツの描画」です。

LCPは下記数値で表され、その良し悪しは数値と共に色付けで視覚化されています。数値が小さいほど UX(User Experience:ユーザーエクスペリエンス)が良いです。

  • 良好:2.5秒以内
  • 要改善:2.5秒から4秒
  • 不良:4秒以上

つまり、LCP要件はページの読み込み開始から終了まで2.5秒以内が望ましいということです。

LCP の具体的な改善方法は後ほど解説します。まずは、実際にLCPを確認してみましょう。

 

LCPの確認方法

LCPの確認方法は主に3種類あります。

  1. PageSpeed Insights
  2. サーチコンソール
  3. Chromeの開発者ツール

基本的には、3つの指標は一番目のPage Speed Insightsが一番確認しやすく、かつ改善もしやすいです。

しかし、今回は3番目のChrome開発者ツールでの確認方法を解説します。次の3ステップで簡単に確認可能です。

  1. Chrome 開発者ツールを開く(F12)
  2. Perfomanceタブをクリック
  3. 更新アイコンをクリック

赤で囲った部分が手順2と3です。画面の配置は初期設定で多少異なります。

そうすると、しばらく読み込みした後で下記の画面が表示され、画面中央の右側にLCPが表示されます。

下記画像は小さいので、スマホではピンチイン、パソコンではクリックして拡大表示してください。中央の右側に小さくLCPと表示されています。

全体図(スマホから拡大できます)

LCPの部分を拡大表示すると下記の通り。

LCPの拡大図

最近投稿した記事を確認したところ、LCPが約2,190msでした。かなり遅い方ですが、基準値の2.5秒以下(2,500ms)をなんとか満たしていました^^;

なお、確認方法は下記記事を参考にしましたので、より詳しく知りたい方は合わせて確認してみてください。

参考:株式会社レクタス LCPについて

タカ
LCPは「ページの読み込み速度」なので、直感的にも分かりやすいですね。

 

FID(First Input Delay)

FIDとは?

FID

出典:web.dev | First Input Delay (FID)

FID(First Input Delay)はサイトのインタラクティブ性を測る指標です。日本語で直訳すると初回入力遅延です。

最初に何らかの操作(クリック、タップ、JavaScriptの実行)をした際のブラウザの反応時間を指します。

たとえば、JavaScriptが実行され、完了するまでの時間などです。これが遅いとストレスに感じるので、ユーザーエクスペリエンス的にも重要ということ。

FIDは下記数値で評価され、その良し悪しは色付けで視覚化されています。数値が小さいほど UX(User Experience:ユーザーエクスペリエンス)が良いです。

  • 良好:100ms以下
  • 要改善:100ms~300ms
  • 不良:300ms以上

つまり、FID要件はページの操作イベント発生から終了まで100ms以内が望ましいということです。

 

FIDの確認方法

FIDはPage Speed Insightsで確認できます。

PageSpeed Insightsにアクセスして、入力窓にURLを入力して実行すると表示されます。

試しにYahoo!のトップページをページスピードインサイトで分析してみました。

Yahoo!の場合、FIDが74msであり、100ms以下なので良好であることがわかります。

実はコアウェブバイタル(Core Web Vitals)の3つの指標(FID、LCP、CLS)は全てPage Speed Insightで確認できます

Page Speed Insightで表示されるのは4つ指標で、コアウェブバイタル(Core Web Vitals)と似た指標としてFCPがあります。FCPとLCPの違いは以下の通り。

  • FCP(First Contentful Paint):何らかのコンテンツが表示される時間を表す指標
  • LCP(Largest Contentful Paint):ページのメインとなるコンテンツの読み込みに時間を表す指標

FCPはページにとって重要でないコンテンツ表示までの速度、LCPはより重要なコンテンツが表示までの速度です。

Page Speed Insightsではコアウェブバイタル(Core Web Vitals)の3つの指標(FID、LCP、CLS)が表示されない場合があります。

その場合は別の方法(サーチコンソール、Chrome開発ツールなど)で確認しましょう。

 

CLS(Cumulative Layout Shift)

CLSとは?

出典:web.dev | Cumulative Layout Shift (CLS)

CLS(Cumulative Layout Shift)は視覚要素の安定性を示す指標です。

サイト読み込み途中に表示される広告によって文章ががずれることはよくあります。そのズレによる影響を数値化したのがCLSです。

CLSの計算方法は、例えばスマホの画面中央にボタンが出現し、要素のズレによって影響受ける場合を想定すると下記のように計算できます。

 

ボタンが画面のちょうど中央から下に出現したため、影響を受けた面積の割合は0.5です。

出現したボタンの大きさがviewportの高さの15%であったとすると、下半分の要素が移動した距離は0.15となります。

これにより、CLS = 0.5*0.15 = 0.075 と計算されます。

出典:SEO研究所 サクラサクラボ

ここでviwportとは画面の表示サイズのこと。つまり、CLSを数式化すると次のような感じだと思います。

CLS = ズレの影響を受ける画面比率 × 要素の移動比率(要素の移動量 / viewportの高さ)

コンテンツが表示から非表示に変わることによるズレの影響を受ける画面比率が小さいほど、CLSは良好ということです。

CLSは下記数値で表され、その良し悪しは色分けで視覚化されています。数値が小さいほど UX(User Experience:ユーザーエクスペリエンス)が良いです。

  • 良好:0.1以下
  • 要改善:0.1~0.25
  • 不良:0.25以上

要するに、CLS要件はページのコンテンツのズレ量を0.1以下に抑えることが望ましいということです。(ズレないのが理想)

 

CLSの確認方法

先ほどと同様、CLSはPage Speed Insightsにて確認できます。

 

各指標の確認方法まとめ

これまで紹介した通り、3つの指標(LCP、FID、CLS)の確認方法は3通りです。各指標の確認方法を紹介します。

LCPFIDCLS
Page Speed Insights
ウェブマスターツール
Chrome開発者ツール××

◯:確認可能、×:確認不可?

細かな改善も考えると、細かな速度改善の施策を教えてくれるPage Speed Insightsがおすすめ。いずれも無料で使えます。

 

Core Web Vitalsへの対策

Core Web Vitals 対策

基本的には Search Console やPage Speed Insightを見ながら改善していくことになります。

LCPの改善

LCPはページの読み込み速度の遅延なので、改善するためには、画像、動画の軽量化、HTML タグ要素の最適化が必要です。

場合によっては、レンダリングを妨げる JavaScript や CSSによって遅くなる場合もあるので、不要な CSSの修正や、JavaScriptの削除や読み込み遅延などによって改善できます。

FIDの改善

FIDはほとんどの場合 JavaScript によって遅くなる場合が多いです。

不要な JavaScript の削除や読み込み遅延などによって改善できます。

CLSの改善

CLS はデザインの崩れに関する要因です。

CLSもJavaScript によって遅くなる場合が多いです。

不要な JavaScript の削除や読み込み遅延などによって改善できます。

Core Web Vitalsの改善方法まとめ

Core Web Vitalsの見える化、改善にはPage Speed Insightで改善するのが一番です。

Page Speed Insightでは丁寧に改善方法を提示してくれるので、そこで表示される「改善できる項目」を一つづつ改善していきましょう。

たとえば、次のような項目が挙げられます。

  1. 適切なサイズの画像に変更する
  2. レンダリングを妨げるリソースの除外
  3. 次世代フォーマットでの画像の配信
  4. JavaScript の最小化
  5. 使用していない CSS の削除

これらを一つづつ丁寧に改善していけば、Core Web Vitalsは何も恐れる必要ないです。

むしろ、Core Web Vitals対策を実施することでページが高速化され、直帰率や離脱率が下がり、より一層稼ぎやすいサイトに変わるはずです。

タカ
引き続き対策実施し、分かったことがあればリライトでシェアしたいと思います。
  • この記事を書いた人
  • 最新記事

アフィリラブ

副業アフィリ歴7年&ブログ歴3年 / 月7桁達成 / 2019年から専業 / LINEオープンチャット「アフィリラブの部屋」開設(参加者400名突破) / 自己投資で借金300万円以上→2012年アフィリ開始→借金完済 / 100kmラン12h完走

アフィリラブTwitter アフィリラブInstagram アフィリラブFacebook

おすすめ記事

Q&A LSI Search 1

今回は、最近リリースされた潜在キーワード取得ツール「Q&A LSI Search」を紹介します。 Q&A LSI Searchは簡単に言えば、Yahoo知恵袋などの複数のQ&A ...

サイト 売買 2

サイト売買(M&A)サービスは、サイトの売買をサポートする比較的新しいサービスです。日本では2005年頃から各社サービスを開始しています。 個人間のサイト売買ではトラブルが起こりやすく、売買サ ...

3

IR-SEO は令和時代に生き残る『2019年最新 今やるべき 王道のSEO対策 理論』のWebセミナー動画です。 2019年3月、5~6月初旬にかけて起こったGoogleアップデートにより、報酬やア ...

-SEO対策

© 2021 アフィリラブ