Core Web VitalsのLCP・FID・CLSの解説と改善方法

Core Wev Vitals

Core Web Vitals(コアウェブバイタル)は、2021年6月から導入されたGoogleのUX指標であり、ランキング要因の一つです。

2021年6月頃から実施されたページエクスペリエンスアップデートによって、Core Web Vitalsがページエクスペリエンスシグナルの一つとして追加されました。

この記事では、Core Web Vitalsの3つの指標(LCP、FID、CLS)の解説とその対策方法について解説します。

検索上位表示する上で、CWVは避けては通れないので、しっかり理解した上で対策しておきましょう。

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

Core Web Vitals

Web Vitals(ウェブバイタル)

ウェブバイタル(Web Vitals)は、ユーザー体験を向上するためのGoogleの取り組みであり、 サイトの健全性を示す重要指標でもあります。

そして、Web Vitalsに対して具体的な数字でクライテリアを決めているのがCore Web Vitalsの3つの指標(LCP、FID、CLS)になります。

LCP(Largest Contentful Paint)

LCP

 

LCP(Largest Contentful Paint) は、」ページの表示速度を表す指標で、知覚される読み込み速度を数値化したものです。

画像などのデータ量が大きいサイトは表示速度が遅くなるので、3つの指標の中では最もイメージ・改善しやすい指標ですね。

良好なユーザー体験を提供するためには、LCPが2.5秒以下を目指す必要があります。

LCPは小さいほど良好で、2.5秒以内が良好、2.5秒~4秒が要改善、4秒以上が不良です。

参考:web.dev | Largest Contentful Paint (LCP)

FID(First Input Delay)

FID

FID(First Input Delay)は、ユーザーの応答性を測る指標で、インタラクティブ性(読み込みの応答性)を表します。

ユーザーがサイト内でボタンやリンクをクリックしたり、JavaScriptの使用してから動作終了までの時間です。

良好なユーザー体験を提供するためには、FIDが100ms以下を目指す必要があります。

FIDも小さいほど良好で、100ms以内が良好、100ms~300msが要改善、300ms以上が不良です。

CLS(Cumulative Layout Shit)

CLS(Cumulative Layout Shift)は、視覚的な安定性を示す指標で、レイアウトのズレ・崩れを数値で表しています。

たとえば、サイト訪問した際に広告が時間差で表示されることで、コンテンツが移動してユーザー体験を損ないます。

良好なユーザー体験を提供するためには、CLSが0.1以下を目指す必要があります。

CLSは小さいほど良好で、0.1以下が良好、0.1~0.25が要改善、0.25以上が不良です。

Core Web Vitalsの確認・計測方法

Core Web Vitals 計測

Core Web Vitalsは様々な確認方法がありますが、主要な計測ツールを3つご紹介します。

Chrome拡張機能(Web Vitals)サーチコンソールPage Speed Insights
確認単位
(記事別)

(サイト全体)

(サイト全体)
他者サイトの確認
(可能)
×
(不可)

(可能)
改善方法の具体案×
(なし)
×
(なし)

(あり)

Chrome拡張「Web Vitals」

1記事ごとにCore Web Vitalsの指標をすぐ確認したいなら、Crome拡張機能の「Web Vitals」が便利です。

無料でChromeに追加して、Chrome右上の「Web Vitals」のアイコンをクリックすると、表示中のページのLCP、FID、CLSが表示されます。

Core Web Vitalsの数値が悪すぎる場合、具体的な数字が表示されないこともあります。

サーチコンソール(Google Serach Console)

サイト全体としてCore Web Vitalsの改善要否を判断できるのが、サーチコンソールです。

サーチコンソールを使ったCore Web Vitals確認手順は以下の通りです。

  • サーチコンソールにログイン
  • 左メニューの「ウェブに関する主な指標」をクリック
  • モバイル、PCの右上の「レポートを開く」をクリック
  • レポートが表示される

レポートでは「不良」「改善が必要」「良好」に該当する記事数が表示されます。

もしレポートが良好の場合は、すべての記事に対してCore Web Vitalsの数値は表示されません。(一例として1記事のみ3つの指標の数値が表示されます)

そして、「不良」と「改善が必要」のみ、LCP、FID、CLSの数値が具体的に示されます。

Page Speed Insights

Page Speed Insights(ページスピードインサイト)は、Googleのサイト表示速度やパフォーマンスを確認できるツールです。

Core Web VitalsはPage Speed Insightsでも確認できます。確認手順は以下の通りです。

Page Speed InsightsはCore Web Vitalsの点数計測だけでなく、改善方法も具体的に提示してくれるので必ず活用しましょう。

タカ
Core Web Vitalsはトップページだけでなく、サイト全体に対して把握・改善が必要です。

Core Web Vitalsの改善方法

Core Web Vitals 対策

Core Web Vitalsの改善は、次の3ステップで行うのが効率的です。

  • サーチコンソールでサイト全体の評価を確認
  • Core Web Vitalsの要改善・不良の記事を洗い出す
  • Page Speed Insightsで記事ごとに改善する

LCP、FID、CLSで具体的にどう改善するかを解説します。

LCPの改善

LCPスコアを下げる要因は、主にサーバーの応答時間、リソースの読み込み時間(サイトのファイル容量)です。

そのため、LCPの改善は主に、画像・コードの最適化や圧縮、次世代画像フォーマット配信、遅延読み込み(Lazy Load)の導入などが効果的です。

まずは画像を圧縮したりWebP配信によってファイルサイズを減らして下さい。WordPressサイトの場合は各種プラグインを活用すれば、上記LCPの改善できます。

参考:次世代画像フォーマットWebPの対応ブラウザとCMS別の配信方法

FIDの改善

FIDスコアを下げる要因は、主にJavaScriptの実行です。

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

CLSの改善

CLSはデザインのズレ、崩れですがその主な要因は広告やJavaScriptです。

CLSの改善方法としては、広告表示によるズレに対して、予めサイト内に余白を設けておくことです。

そうすれば、読み込まれなくてもズレや崩れは生じません。

タカ
専門的なことが多いですが、一番最初にやれて費用対効果が高い施策はLCの改善であり、画像の軽量化です。

ページエクスペリエンスシグナル

出典:Google検索セントラル

2021年6月から実施されたページエクスペリエンスアップデートが実施されました。

そこで、ユーザー体験を図る指標としてページエクスペリエンスシグナルの既存の4つに、Core Web Vitalsが追加されました。

Core Web Vitalsと合わせて対策が必要なので、簡単に解説します。

1.モバイルフレンドリー

モバイルフレンドリーとは、フォントの大きさ、要素感の距離や位置関係など。モバイルの小さな画面での閲覧に適しているかどうかを判定します。

Googleのモバイルフレンドリーテストによってモバイルフレンドリーかどうか確認できます。

2.セーフブラウジング

ハッキングされたコンテンツ、マルウェア、ソーシャルエンジニアリングなどの悪意のあるコンテンツや不正コンテンツ、脆弱性などを判定します。

Googleの透明性レポートによって、セーフブラウジングのステータスを確認できます。

3.HTTPS対応

ページでHTTPSの対応を判定します。HTTPSは、HTTPで通信を安全に行うための仕組みです。

サーチコンソールの左メニュー「ページエクスペリエンス」でHTTPS対応状況を確認できます。

4.インターステイシャル

インターステイシャルトは、ページ内に表示される全画面広告のことです。

広告枠が大きすぎるとコンテンツの視聴を邪魔し、無用なクリックを誘導するなどのユーザーの利便性を損ないます。

参考:Googleの透明性レポート

Core Web Vitalsまとめ

2021年6月から8月にかけて実施されたページエクスペリエンスアップデートによって、Core Web Vitalsページエクスペリエンスシグナルに加えられました。

Core Web Vitalsは、LCP、FID、CLSの3つの指標で表現され、それぞれLCPは2.5秒以下、FIDは100ms以下、CLSは0.1以下への改善が望ましいです。

Core Web Vitalsの確認方法は、Chrome拡張機能「Web Vital」、サーチコンソール、Page Speed Insightsを紹介しました。

具体的な改善手順は、まずサーチコンソールでサイト全体を確認し、Page Speed Insightsでページごとに改善の流れがベストです。

Core Web Vitalsと合わせて、モバイルフレンドリー、セーフブラウジング、HTTPS対応、インターステイシャルなども改善しましょう。

参考:【CWV対策】PSI速度スコア100点を取ったページ表示高速化の具体的な施策

  • この記事を書いた人
  • 最新記事

アフィリラブ

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

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

おすすめ記事

GRC 1

GRCは有限会社シェルウェアが開発した、人気の高い検索順位チェックツールです。アフィリエイターは使っていない人の方が少ないかもしれませんね。 GRCはボタン一つで、複数サイトにおける検索語ごとの検索順 ...

Q&A LSI Search 2

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

サイト 売買 3

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

4

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

-SEO対策

© 2021 アフィリラブ