microCMS

Googleの検索アルゴリズムに組み込まれたCore Web Vitals(コアウェブバイタル)の3つの指標とは?

工藤 港

Googleは、2021年6月中旬より検索順位を決める要素の1つとして、Core Web Vitals(コア ウェブ バイタルを段階的に導入追加することを公式に発表しています。
出典:Google 検索セントラルブログ

今回は、Core Web Vitalsを構成する3つの指標とそれぞれの改善方法をご紹介します。

Core Web Vitals(コア ウェブ バイタル)とは?

Web Vitals(ウェブ バイタル)とは、Web上でユーザー体験(UX)の向上を実現するためにGoogleが導入した取り組みのことです。

Vitals(バイタル)とは「重要なもの・本質的なもの」という意味で、Web Vitals(ウェブ バイタル)は「ユーザー体験(UX)を向上するために必要な指標に関する総合的なアドバイス情報」という意味を持ちます。

GoogleはWeb Vitals(ウェブ バイタル)の中でも、サイトの健全性を示す特に重要な指標として、次の3つをCore Web Vitals(コア ウェブ バイタル)として設定しています。

Core Web Vitalsを構成する3つの指標

3つの指標とは、ページの表示速度を測る「LCP」ページの応答性を測る「FID」ページ・コンテンツの視覚的安定性を測る「CLS」です。

画像引用:Google Developers

次の章では、それぞれの項目について詳しく説明していきます。

ページの表示速度を測る「LCP」

LCP(Largest Contentful Paint)とは、ページのメインとなるコンテンツが表示されるまでの時間を示す指標です。
この「メインとなるコンテンツ」とは、ブラウザの表示範囲内で最も大きなコンテンツのことで、具体的には以下の要素が表示されるまでの時間を対象とされています。

  • img要素
  • svg要素内のimage要素
  • video要素
  • url関数を介してロードされた背景画像を持つ要素
  • テキストノードまたは他のインラインレベルのテキスト要素を含むブロックレベル要素


画像や動画もしくはブロックレベル要素ということなので、ほとんどの要素が当てはまることになりそうです。(※将来的に変更になる可能性あり)

LCPでは、ページが読み込みを開始してからメインとなるコンテンツが表示されるまでの時間が2.5秒以内であればスコアが「良い」、2.5秒以上は改善が必要4.0秒以上かかると良くないと判断されます。

出典:Google Web.dev「LCP(Largest Contentful Paint)

ページの応答性を測る「FID」

FID(First Input Delay)とは「初回入力遅延」という意味で、ユーザーがページ内で最初にアクション(クリックやタップ、テキスト入力など)を行った際の反応速度(インタラクティブ性)を測る指標です。

FIDでは良いユーザー体験を提供するためにユーザーがアクションをしてから反応するまでの時間が0.1秒以下であればスコアが「良い」、0.3秒を超えると良くないと判断され、スコアの値が短ければ短いほど良いとされます
公式サイトでは、FIDを私たちが普段の生活で初めて会う相手の反応速度から感じる第一印象に例えて解説されています。

出典:Google Web.dev「FID(First Input Delay)

視覚的な安定性を測る「CLS」

CLS(Cumulative Layout Shift)とは、ページを読み込んでいる最中に発生する予期せぬレイアウト(画像やボタンなどの表示位置)のずれによるUX低下を防ぐための視覚的な安定性を測定する指標です。
例えば、ページ内のリンクをタップしようとしたら、突然バナー広告が表示されて誤って広告をタップしてしまったり、記事を閲覧していたら、広告が少し遅れて出現し閲覧していた記事が下にずれて中断してしまう、というような体験を指します。

CLSでは、表示中の画面内(viewport内)でユーザーの操作がないのに発生したずれに関して、独自の「レイアウトシフトスコア(Layout shift score)」を算出されます。
この数値は、影響を受けた面積 * 移動した距離の割合 で算出され、0.1未満であればスコアが「良い」、0.25以上は良くないと判断され、スコアの値が小さいほどUXが良いとされます
前述のLCPやFIDは、読み込み時間や応答速度などの時間を単位として測定していたのに対し、CLSは単位がありません。

出典:Google Web.dev「CLS(Cumulative Layout Shift)

LCP / FID / CLSを測定してみましょう

指標については理解できたところで、実際にUXの改善を始める前に、まずはサイトの現状スコアについて知る必要があるかと思います。
Googleは、LCP / FID / CLSを可視化するツールを複数提供していますので、それらについて解説します。

Lighthouse(ライトハウス)

Lighthouseは、サイトの問題の特定やユーザー体験の改善に活用できる、オープンソースの自動化されたChrome拡張機能の監査ツールです。
使い方は簡単で、一度インストールしておけば測定したいページを開いてボタンクリック1つで測定できます。LighthouseではFIDは表示されず、代わりに類似指標であるTBT(Total Blocking Time)が表示されます。

参考記事:Lighthouse(ライトハウス)とは?Google公式のSEOチェックツールを解説

(上記の画像は実際にmicroCMSブログのDesktopを計測した結果です。

参考:Google Developers「Lighthouse によるウェブアプリの監査」

PageSpeed Insights(ページスピードインサイト)

PageSpeed Insightsは、読み込み速度を測定する際によく使われるツールです。 測定したいURLを入力すれば、モバイル端末とパソコンそれぞれの速度のスコアとともにCore Web Vitalsの数値が表示されます。
Chrome UX reportのデータをもとに作成されていて、利用できるデータが少ない(閲覧されている数が少ない)場合は、指標の判定は表示されないようです。

(上記の画像は実際にmicroCMSブログのDesktopを計測した結果です。

参考:Google Developers「PageSpeed Insights について」

Google Serch Console(グーグルサーチコンソール)

Google Serch Consoleは、ユーザーがサイトに訪れる前のデータやサイトの掲載順位を閲覧・管理・改善するのに役立つ解析ツールです。

サーチコンソール左メニューのウェブに関する主な指標をクリックすると、Core Web Vitalsの3つの指標について「良好」「改善が必要」「不良」の状態が一目で確認できます。課題の具体的な解決策については、前述のPageSpeed Insightsなどで確認します。

こちらもPageSpeed Insightsと同様に、利用できるデータが少ない(閲覧されている数が少ない)場合は、指標の判定は表示されないようです。

(上記の画像は実際にmicroCMSブログのモバイルを計測した結果です。

参考:Google Search Console ヘルプ「Search Console の概要」

Core Web Vitals Chrome拡張機能

Web Vitalsは、サイトのCore Web Vitals指標のパフォーマンスをリアルタイムで測定できるChrome拡張機能のツールです。

Lighthouseと同様に、一度インストールしておけば測定したいページを開いてボタンのクリック1つでLCP / FID / CLSの測定ができます。(ただし、FIDの測定には一度ページ内をクリックしておく必要があるようです。)

(上記の画像は実際にmicroCMSブログのDesktopを計測した結果です。

LCP / FID / CLSのスコア改善方法

ここまで、Core Web Vitalsの3つの要素とその測定方法についてご紹介してきましたが、この章ではそれぞれのスコア低下要因と具体的な改善方法についてご紹介します。

LCPのスコア改善方法

LCPのスコア低下の主な要因として以下の4点があげられます。

  • サーバの転送速度や応答時間が遅い
  • レンダリングをブロックするJavaScriptとCSS
  • 画像や広告、CSS、JavaScriptなどの読み込み時間が遅い
  • クライアント側のレンダリングの問題


1つ1つみていきましょう。

サーバの転送速度・応答時間の改善

ブラウザがサーバからコンテンツを受信するのにかかる応答時間が速くなると、読み込み時間が速くなり、LCPのスコアが改善されます。 サーバを最適化したり、近くのコンテンツ配信ネットワーク(CDN)にルーティングしたりすることで、応答時間の短縮が期待できます。

レンダリングをブロックするJavaScriptとCSSの削減

重要ではないJavaScriptやCSSを延期したり、ブロック時間を削減することで、ページのメインコンテンツの読み込み時間短縮に繋がります。
また、ブラウザにとっては不要な要素であるCSSファイルを読みやすく整形するためのコード(スペース・インデント・コメントなど)を削除することで、 レンダリングにかかる時間短縮が期待できます。

画像や広告、CSS、JavaScriptなどの読み込み時間の削減

ブラウザの表示範囲内でレンダリングをした際に、画像や広告、CSS、JavaScriptなどの要素が表示されるまでの時間はLCPのスコアに直接影響します。 画像の最適化と圧縮、テキストファイルの圧縮などで、読み込み時間の削減に繋がります。

レンダリング方法の改善

クライアント側のレンダリングサイトを構築する際は重要なJavaScript実行を最小限に抑えたり、SSR(サーバサイドレンダリング)を使用したりすることで最適化に繋がります。

参考:Google Web.dev「最大のコンテンツペイントを最適化する

LCPのスコア改善のためにmicroCMSでできること

microCMSはAPIベースのため、Jamstackと呼ばれる最新の技術構成に非常に相性が良いです。
Jamstackは、SSR(サーバサイドレンダリング)よりさらに応答時間を最適化することのできる構成です。
Jamstack構成においては静的ページの配信が基本となるため、非常に高速でセキュアです。また、シングルページアプリケーションによるスムーズなページ遷移を可能にします。

大規模なメディアサイトやコーポレートサイトでより効果を発揮し、サイトの高速化によりPV増加・ユーザーエクスペリエンスの向上に寄与し、LCPのスコア改善にも繋がります。

参考記事:Jamstackとは何か?まずは基本を理解しよう!

また、microCMSではJamstackサイト制作のメニューもご用意しております。

FIDのスコア改善方法

FIDのスコア低下の主な要因としては、CSSの再描画や画像の読み込みもありますが、おそらく一番多いのは大量のJavaScript実行による遅延だと考えられます。
JavaScriptを実行している間は、ブラウザはユーザーの操作に応答できないため、実行時間が長ければ長いほどスコアの低下に繋がります。また、サイト自体のJavaScript実行以外にも、ライブラリ・広告・計測ツール・SNSボタンのJavaScriptによる応答遅延等も要因として考えられます。

長いタスクの分割、ページの最適化、JavaScript処理の分割、JavaScriptの実行時間の短縮などによりFIDの改善が見込まれます。
参考:Google Web.dev「最初の入力遅延を最適化

FIDのスコア改善のためにmicroCMSでできること


microCMSは、Nuxt.jsなどのJavaScriptフレームワークと非常に相性が良いヘッドレスCMSです。

Nuxt.jsは、2017年以降急速に普及しているVue.jsのフレームワークです。Vue.jsは、WebアプリケーションのUIを比較的容易に構築できるJavaScriptフレームワークですが、Nuxt.jsはVue.jsの欠点でもあったSSR(サーバサイドレンダリング)が行えるフレームワークです。

また、Nuxt.jsの容量は57KB程度と軽量なフレームワークなので、Nuxt.jsの導入によって動作が遅くなる等のユーザーへの負荷は比較的少ないです。加えて、コードの分割が自動で行われることによって読み込み速度の改善が期待できます。

参考記事:Nuxt.jsとの連携

CLSのスコア改善方法

CLSのスコア低下の主な要因としては、以下が考えられます。

  • サイズのない画像(img要素)
  • サイズのない広告や埋め込み、iframe要素
  • Webフォントの読み込み
  • 動的に挿入されたコンテンツ


CLSはLCPやFIDに比べると、比較的に改善施策が行いやすく、表示する画像のサイズを指定したり、広告や画像の表示領域指定を行うことでCLSの改善が見込まれます。
参考:Google Web.dev「累積レイアウト シフトの最適化

CLSのスコア改善のためにmicroCMSでできること


microCMSでは、画像編集処理にimgixのAPIをご利用いただけます。imgixはURLパラメータによって画像をリアルタイムで編集することができる画像向けCDNです。microCMSのご利用料金にimgixのAPI利用料金が含まれていますので、別途imgixの契約は不要でご利用可能です。

画像アップロード後に画像URLにパラメータを付けるだけで、 画像サイズや品質の調整など画像編集が行えて、 各デバイスに合わせた表示速度の最適化(SEO対策)が可能です。

そのほかにも、Googleが開発した、画質を維持しつつファイル圧縮率を高めることができる次世代画像フォーマットであるWebP形式への変換や画像の上に文字を重ねる(オーバーレイ表示する)などが可能です。

参考記事microCMSの画像編集機能


2022年2月、リアルタイム画像処理CDNサービス「imgix」アカウントマネージャーの金本氏をお招きして、Google Core Web Vitalsに対応したサイト速度改善の完全攻略法について、概要から実装方法まで具体的な解決方法を詳しくご紹介する「サイト速度改善の完全攻略法セミナー」を開催しました。

アーカイブ動画はこちら(Youtube)にてご覧いただけます。
Webサイト制作者の方や、自社のサイトの速度改善を行いたい方など、ぜひご覧ください。


まとめ

Googleの検索アルゴリズムに新たに追加されるCore Web Vitals(コアウェブバイタル)の3つの要素 LCP / FID / CLS についてご紹介しました。
SEO対策についてもさることながら、これらの指標を改善していくことによって、サイトを訪問する人に良いユーザー体験(UX)を提供できることが一番の価値ではないでしょうか。

各指標の改善方法でご紹介しましたmicroCMSは日本製のヘッドレスCMSです。
また、LCP / FID / CLSを測定するツールの計測事例としてご紹介したmicroCMSブログはmicroCMSとNuxt.jsを組み合わせて作られています。

ヘッドレスCMSには、今回紹介しました Core Web Vitals という指標に合わせて、適切な改善を行いやすい仕組みが整っております。ご興味のある方はこちらの資料をどうぞ。

>「ヘッドレスCMSの特徴」の資料請求はこちら
ヘッドレスCMSの特徴(メリット・デメリット)やWordPressなど従来のCMSとの違いを解説した資料です。


>社内共有にもそのまま使える「CMS比較表」の資料請求はこちら
CMS導入にあたっての目的・課題の整理し比較のポイントをまとめた資料です。
日本製のヘッドレスCMS「microCMS」を含めた主要なCMS5社の比較表もご覧いただけます。

まずは、無料で試してみましょう。

APIベースの日本製ヘッドレスCMS「microCMS」を使えば、 ものの数分でAPIの作成ができます。

microCMSを無料で始める

microCMSについてお問い合わせ

初期費用無料・14日間の無料トライアル付き。ご不明な点はお気軽にお問い合わせください。

お問い合わせ

microCMS公式アカウント

microCMSは各公式アカウントで最新情報をお届けしています。
フォローよろしくお願いします。

  • X
  • Discord
  • github

ABOUT ME