SEO
2021.07.21 (水)
コアウェブバイタル3つの指標LCP/FID/CLSとは?改善方法まで網羅
Googleは2021年5月より検索結果の表示順位を決める指標にCore Web Vitals(以下、コアウェブバイタル)も含めると発表しました。
これにより「コアウェブバイタル」は次のSEO対策対象として、SEOに関わるユーザーから大きな関心を集めています。
2021年5月にGoogle検索のランキングの指標になると発表されていたものの結局いつからなのか、そもそもコアウェブバイタルって何?、どうやって対策すればいいの?という方もいるでしょう。
そこで、SEOに関わるならぜひとも知っておきたいコア ウェブバイタルの中でも重要な3つの指標から、作用する要因や改善方法、おすすめの測定ツールまで解説します。
▼目次
コアウェブバイタルとは何か?
コアウェブバイタルとは、いくつかあるウェブバイタルのなかでも現在Googleが重要視している3つ指標「LCP」「FID」「CLS」を指します。
Web Vitals(ウェブ バイタル)はユーザー エクスペリエンス(以下、UX)の向上のために重要となる指標を提供する取り組みを指し、近年、Googleはページの読み込み速度やモバイルフレンドリーのようなUX基準を追加してきました。
しかし、UXを判断する側面はサイトやページによってさまざまであることから、Googleが共通指標として定めているものがコアウェブバイタルです。
UXの核となるユーザーニーズは「ページの読み込み速度」「情報の操作性」「ページコンテンツなど画面の見やすさ」などであるとし、これらがコアウェブバイタルの土台になっています。
GoogleアップデートでコアウェブバイタルがSEOに影響するようになると、大幅に検索順位が変わる恐れもあるため、理解し自社サイトの改善に役立てることが重要となるでしょう。
参考:Google Developers「サイトの健全性を示す重要指標」
コアウェブバイタル3つの重要指標とは?
UX向上に重要となるウェブバイタルを数値化するために特に重要な指標をコアウェブバイタルといい、具体的には「LCP」「FID」「CLS」の3つを指します。
これらはUX向上だけでなくSEOにも関係するため、必ず理解しておきましょう。
LCPについて
LCPはLargest Contentful Paintの頭文字をとったもので、「最も大きなコンテンツの絵」の意味し、読み込み時間を測る指標です。
ページ内でメインとなるような最も大きな画像や動画、背景画像などのファイルが、ユーザーに認識されるまでにかかった時間を秒数(s)で表し、値が小さければ小さいほど優れたUXとなります。
FIDについて
FIDはFirst Input Delayの頭文字をとったもので、「最初に感じる遅れ」を意味し、ユーザーが一番初めに感じるサイトの印象(インタラクティブ性)を測る指標です。
クリックやテキスト入力、タッチ操作などユーザーがページ内で行った操作に対する反応速度をミリ秒(ms)で表し、値が小さければ小さいほどUXが良いとされます。
CLSについて
CLSはCumulative Layout Shiftの頭文字をとったもので、「累積レイアウト変更」を意味し、視覚的な安定性を評価する指標です。
ユーザーがサイトを見たとき文字と画像が重なったり、ページを開いたときに突然広告が表示され誤ってタップしてしまったりと、ページ読み込み時に発生するユーザーが意図しないズレがどのぐらい起きたのかを計測します。
影響を受けた範囲の面積と実際の表示距離をもとにスコアを算出し、単位はなく、ページ表示の安定性を「レイアウトシフトスコア」と呼ばれる独自のスコアで評価したもので、値が小さければ小さいほどUXが良いです。
コアウェブバイタルの導入時期2021年5月?6月?いつから?
Googleは、コアウェブバイタルがGoogle検索のランキング指標へ導入される時期について当初は2021年の5月頃と宣言していましたが、2020年11月に「2021年6月中旬に延期し段階的に導入する」と発表しました。
また、2021年6月中旬以降8月末までランキングシステムのひとつの要素として組み込まれるものの、完全に組み込まれるわけではない、とのことです。
段階的ではあるものの導入が決まったことを踏まえ、コアウェブバイタルに関する理解を深めつつツールの利用やWebサイトの改善を行うことが求められます。
参考:Google 検索セントラル ブログ「ページ エクスペリエンスの更新に対応するための期間、ツール、詳細情報」
パソコン向けページエクスペリエンスアップデートが2022年2月から開始
(2021年1月追記)
パソコン向けのページエクスペリエンスが2022年2月から検索順位決定ロジックに組み込まれることが2021年11月に発表されました。2022年2月から開始し、2022年3月までに完了する予定とのことです。
詳細は以下のページより確認ください。
→パソコン向けページ エクスペリエンスによるランキングの導入スケジュール
上記ページにて発表されている要素として以下の通りです。
- LCP(Largest Contentful Paint)
- CLS(Cumulative Layout Shift)
- FID(First Input Delay)
- HTTPS セキュリティ
- 煩わしいインタースティシャルがない
(インタースティシャル広告とは、ページが切り替わる際に強制的に表示される広告のことです。)
コアウェブバイタルがパソコン版の検索結果のランキングの要素として組み込まれることは発表されましたが、どれぐらいの重要度かについては実装されてみないとわかりません。また、追記するべき事項があれば記載致します。
コアウェブバイタルがSEOへ与える影響度合いとは?
検索結果の表示順位に対しコアウェブバイタルはどのくらい影響があるのか、Googleウェブマスター向け公式ブログでは、以下のように書かれています。
ページ エクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページ エクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。優れたページ エクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません。しかし、同様のコンテンツを含むページが複数ある場合は、ページ エクスペリエンスが検索ランキングで非常に重要になります。
出典:Googleウェブマスター向け公式ブログ「より快適なウェブの実現に向けたページ エクスペリエンスの評価」
上記によれば「LCP」「FID」が平均以下であっても、Webサイトの評価を下げる要因にはならないと言えますが、コンテンツの質が最も重要なことに変わりはないでしょう。
加点方式、減点方式どちらに働くか明確にはわかりませんが、同じ質のコンテンツをもつページを比較する時に、UXに関わる指標であるコアウェブバイタルが大きく影響するものと考えられます。
コアウェブバイタルに作用する要因を説明
ここからはコアウェブバイタルのスコアが低下する要因を、「LCP」「FID」「CLS」それぞれに分けて解説します。
LCPを左右する要因
LCPを左右する主な要因は以下の4つです。
1)サーバーの応答時間が遅い
2)レンダリングをブロックするJavaScriptとCSS
3)リソースの読み込み時間が遅い
4)クライアント側のレンダリング
要因1:サーバーの応答時間が遅い
サーバーからブラウザへ受信する時間がかかればかかるほど、ページの読み込み速度も遅くなり画面に表示されるまで時間がかかってしまい、LCPに直接影響します。
要因2:レンダリングをブロックするJavaScriptとCSS
プログラミング言語を通して画像や動画、文字を生成することをレンダリングといいます。
JavaScriptやCSSなど、スクリプトやスタイルシート内に含まれる中身の記述が多いほどレンダリングに時間がかかり、LCPに影響を及ぼします。
要因3:リソースの読み込み時間が遅い
スクロールせずに見ることができる範囲に含まれている画像や動画、JavaScriptとCSSなどをレンダリングしたとき、見えている項目が大量だと表示が遅くなります。リソースの読み込みにかかった時間が長いほどLCPに影響してしまうのです。
要因4:クライアント側のレンダリング
多くの場合、クライアント側のJavaScriptロジックやフレームワークを用いてWebサイトを構築したり直接レンダリングしたりしています。
クライアント側で行っているレンダリングが遅く表示に時間がかかれば、LCPスコアは低くなるでしょう。
FIDを左右する要因
大量のJavaScript実行がFIDを左右する主な要因で、JavaScriptを実行している間ブラウザはユーザーの操作に応答できないため、FIDが低下しやすいのです。
CLSを左右する要因
CLSが低下する主な要因は、サイズ指定のない画像や動的に挿入されたコンテンツ、Webフォントの読み込み時間、widthやheightが指定されていないことです。
コアウェブバイタルを改善する方法
コアウェブバイタルを改善する具体的な方法は以下の7つです。
・サーバーの応答時間を速くする
・レンダリングをブロックするJavaScriptとCSSの改善
・リソースの読み込み時間を速くする
・Javascriptの最小化、実行にかかる時間の低減
・widthやheightを指定
・PHPのバージョンアップ
・次世代フォーマットでの画像の配信
サーバーの応答時間を速くする
LCPを含むすべてページの読み込み速度を改善するには、サーバーの最適化やユーザーを近くのコンテンツ配信ネットワークへのルーティングをし、サーバーの応答時間を速くしましょう。
レンダリングをブロックするJavaScriptとCSSの改善
レンダリングしやすいよう、ブラウザの読み込みに不要なJavaScriptとCSSのスペースやテキストを削除したり、重要ではないJavaScriptとCSSの読み込み延期やブロック時間を削減したりすることで、Webページの読み込み速度を改善します。
また、無料のAutoptimize + Async JavaScriptや有料のWP RocketといったWordpressのプラグインを活用するのも有効です。
他にも重要なJavaScriptを最小限に抑え、サーバー側レンダリングを使用することで改善できることもあります。
リソースの読み込み時間を速くする
テキストファイルや画像の圧縮や最適化を行い、リソースの読み込み時間を短縮します。
Javascriptの最小化、実行にかかる時間の低減
JavaScriptの実行中に、ブラウザはユーザー操作に応答できません。
JavaScriptに含まれる不要なスペースやコンテンツを削除しファイルサイズを最小化したり、プログラミング言語で書かれた文字列をコンピュータ上で実行できるよう変換する「コンパイル」を最適化することで、JavaScriptの実行時間を短縮します。
widthやheightを指定
縦横の表示サイズが指定されていない画像に対し、CSSでwidthやheightを記述し設定します。
他にも、元画像に対し40%未満に無理にリサイズされている画像を、40%未満にならないように元画像自体を調整するなど、CLSに関わる修正を行うのもひとつの方法です。
PHPのバージョンアップ
WordPressなど「PHP」というプログラミング言語で動いているWebサイトなら、PHPをバージョンアップすることで処理速度が速くなり、表示速度が改善されます。
次世代フォーマットでの画像の配信
画像をJPEG 2000やJPEG XR、WebPなどの次世代フォーマットに変更する方法がありますが、それぞれ以下のデメリットがあります。
・WebP IEとSafariが未対応のため、iPhoneユーザーの多い日本ではWebPを閲覧できるユーザーは35%程度しかいない
・JPEG 2000 現在のカバー率はおよそ14%で、Safariのみ対応しているためWindowsやAndroidユーザーを想定している場合、導入は好ましくない
・JPEG XR IEとEdgeのみ対応しているため、iPhoneユーザーを想定している場合、導入は好ましくない
上記に変わる方法にTinyPNGやiLoveIMGがあり、これらのサイトで画像を圧縮しファイル容量を小さくすれば、ダウンロードにかかる時間を短縮できます。
コアウェブバイタルを測定する多様なツールを紹介
Googleはコアウェブバイタルを計測できるさまざまなツールを提供しています。
Google提供のツールを含め、コアウェブバイタルが計測できるツールは主に以下の7つです。
・Lighthouse
・PageSpeed Insights
・Search ConsoleのCore Web Vitals report
・Chrome DevTools
・Web Vitals Chrome Extension(Chrome拡張機能)
・Test My Site
・GTmetrix
Lighthouse:5つの項目からリサーチ
Googleが提供するLighthouseは、開発者ツールであるChrome DevToolsで利用できるオープンソースの自動Webページ評価ツールです。
Chromeブラウザ使用時に「Ctrl(Commnd)+Shift(Option)+I」のショートカットキーでChrome DevToolsを起動し、[Lighthouse]から[Generate report]をクリックすれば、Lighthouseレポートが実行でき5つの項目からサイトの状態を評価します。
Lighthouseで確認できる5つの項目はUXをスコア化したもので、これらのスコアはWebサイトを改善するための具体的な施策を決めるのに役立つでしょう。
1)パフォーマンス:「ページの読み込み速度など、主にサイト内のスピードに関する評価が表示される。LCPとCLSについての項目がある。FID自体はないがTotal Blocking Time(TBT)を改善する最適化は、現場のFIDも改善する」とGoogleの開発者向けサイトに記載されている。
2)アクセシビリティ:Webサイトの訪問者や検索エンジンのロボットに対し、Webサイトが最適な作りになっているかどうかの評価が確認できる
3)プログレッシブウェブアプリ:モバイル対応したWebサイトをスマートフォンでも閲覧できるようにする仕組みである「PWA」のチェックリストを基にした評価が表示される
4)ベストパフォーマンス:モバイル対応したWebサイトの品質向上に向けたアドバイスなどが確認できる
5)SEO:canonicalが正しく設定されているかなどSEOの基本的な内容が確認できる
Page Speed Insights:100点満点で評価
Googleが提供しているPage Speed Insightsは、表示速度が最適化しているかどうかを評価する無料ツールです。
測定したいページのURLを入力するだけで、パソコンとモバイル端末ページの表示速度を測定します。また、パフォーマンスレポートと改善ポイントが確認できるため、改善しやすいでしょう。
Page Speed Insightsは具体的な表示速度を測定するのではなく、ページの表示速度や体感速度を100点満点の点数で表し3段階で評価され、100点に近いほど高評価となります。
Google Search ConsoleのCore Web Vitals report:3つの指標を表示
Google Search Consoleは、Googleが提供するユーザーのWebサイト訪問前のデータを取得したり解析したりできる無料のツールです、Core Web Vitals reportでは コア ウェブ バイタルの各指標を、以下の基準を元に判定します。
良好 | 改善が必要 | 低速 | |
LCP | 2.5 秒未満 | 4 秒以下 | 4 秒を超える |
FID | 100 ミリ秒未満 | 300 ミリ秒以下 | 300 ミリ秒を超える |
CLS | 0.1 未満 | 0.25 以下 | 0.25 を超える |
コア ウェブ バイタルの各指標の理想値は、LCP 2.5 秒未満、FID 100 ミリ秒未満、CLS 0.1 未満です。
また、どの指標の改善が必要なのか、問題が含まれる代表的なURLはどれかは知ることができるものの、具体的な問題点はわからないため、問題のページを調査・分析し改善する必要があります。
Chrome DevTools:詳細なデータと施策
Chromeのブラウザ使用時に「Ctrl(Commnd)+Shift(Option)+I」のショートカットキーでChrome DevToolsを起動したあと、[Lighthouse]から[Generate report]をクリックすれば、表示速度が診断できます。
正確な表示速度を計測するには、左上のリロードボタンをクリックしキャッシュを削除したあと、「Ctrl(Commnd)+R」のショートカットキーを使用し、再度ページを読み込みましょう。
Chrome DevToolsは表示速度の診断以外にも、ソースコードの確認やユーザーエージェント、位置情報を疑似的に変更するときにも利用できます。
また、[Performance]パネルの[Timings]セクションにはLCPマーカーが含まれており、[関連ノード]フィールドにカーソルを合わせるとLCPに関連付けられている要素を表示することが可能です。
[Timings]セクション内の[Experience]で色がついた箇所をクリックすると[Summary]が表示され[Layout Shift]が強調表示されます。
レコードの[概要]ビューの[Layout Shift]には、累積レイアウトシフトスコアと影響を受ける領域を示す長方形のオーバーレイが含まれるため、どのレイアウトがどのくらいずれたのかが確認できるでしょう。
Web Vitals Chrome Extension:Chrome拡張機能
Web VitalsはChromeの拡張機能のひとつで、Web Vitalsを使えばコア ウェブ バイタルの測定など時間をかけず手軽にサイト分析が可能です。
他のツールと異なり、Google提供ツールではなく、Web Vitals独自の指標を表示するため、他のデータと異なる場合があります。
Test My Siteであらゆる分析が可能
Test My SiteはGoogleが提供しているツールのひとつで、実際の表示速度の数値以外にも、ユーザーの離脱率や同一業界内サイトの平均速度との比較、ビジネスやWebサイトの費用対効果も直接確認できるツールです。
Googleが実際に使用している指標を利用し、サイトの表示速度が遅いために起こっているユーザーの離脱率を算出し、費用対効果を割り出すことが可能です。
Test My Siteスマートフォンページのみ計測可能で、計測したいページがスマートフォンに最適化されているかどうかかチェックできます。
Test My Siteを利用するにはメールアドレスを入力しなければならないため、チェックが完了するまで少し時間がかかるのがデメリットです。
GTmetrixで表示速度の履歴や問題のファイルを探す
GTmetrix(ジーティーメトリックス)は表示速度の表示以外にも役立つツールです。
表示が遅いファイルといった問題のあるファイルの特定や改善ポイントの提示など、速度改善に役立つ情報を取得できるだけでなく、無料の会員登録をすれば表示速度の履歴を確認することができます。
まとめ ページスピード高速化の依頼はDreamLabへ
Googleの理念はユーザー体験(UX)の向上であり、GoogleのSEO対策は常にアップデートし続けているものの根本は「ユーザーファースト」であることに変わりはありません。
優れたUXを提供するために定めているコアウェブバイタルを理解し、適切な改善を行なっていくことで、ユーザーが満足しGoogleから評価されるWebサイトとなるでしょう。
多くのWebサイトの改善を行ってきた弊社のノウハウを生かして、ページの表示速度だけでなくさまざまな視点から、効果的なアドバイスと改善を行います。
以下、詳細な案内ページです。ご確認ください。
AIがあなたにオススメの記事を表示しています
-
2022.01.31
サイテーションとは何か|SEO対策に貢献するその効果と獲得方法
-
2021.03.28
被リンク獲得のやり方9選!ホワイトな方法で獲得する方法
-
2021.11.02
被リンクとは?メリットや獲得方法、評価方法について
-
2021.06.12
Googleサーチコンソールの使い方を初心者向けに解説
-
2021.12.20
67語掲載!Webマーケティング用語集とSEO用語集まとめ