Web Vitals(ウェブバイタル)とは、ウェブで優れたユーザー エクスペリエンスを実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組みのことです。
このブログは、Web VitalsについてGoogleから発表された情報を元に、個人の見解をまとめたものです。
※正式な情報については、引用部分やGoogle Developersなどをご覧ください。
Web Vitals(ウェブバイタル)の要点まとめ
Web Vitals(ウェブバイタル)とは、ページスピード改善について、よりシンプルに、よりユーザーファーストにまとめ直されたもの。
Web Vitals(ウェブバイタル)は、2020年5月にGoogleが導入した。
Web Vitals(ウェブバイタル)には、「Core Web Vitals」という重要指標がある。
Core Web Vitalsの重要指標は「LCP」「FID」「CLS」の3つ。
※詳しい説明はこちら「LCP」「FID」「CLS」はChrome拡張機能のツールで計測することができる。
※ツールの利用方法はこちら
【筆者の考察】Web Vitals(ウェブバイタル)とは?
Googleは、「LCP」「FID」「CLS」の3つの重要指標を改善させることによって、WEBページを閲覧しているユーザー体験が向上すると考えているようです。
その「ユーザーにとって良いかたち」というのを具体的な指針として表したのが、今回のWeb Vitals(ウェブバイタル)なのではないでしょうか。
以前からSEOやWEB制作の現場では、UX改善やSXOが重要だと言われており、ページの読み込み速度もユーザーエクスペリエンスの重要な要素と考えられてきました。
ページスピード改善から更にもう一歩踏み込んで、ユーザーファースト目線で取り組んでいく必要があるでしょう。
Web Vitalsの重要指標である「Core Web Vitals」コアウェブバイタルとは
Core Web Vitals(コアウェブバイタル)とは、Web Vitlesの中で特に重要な3つのサイトの健全性を示す重要指標のことです。
GoogleはCore Web Vitalsを、「ユーザー エクスペリエンスの核となるニーズ」と認識しています。
重要指標は下記の3つです。
読み込み時間
インタラクティブ性
ページコンテンツの視覚的な安定性
ユーザー エクスペリエンスの質の測定には、多くの側面があります。
そのほとんどはサイトやコンテキストに固有のものですが、すべてのウェブ エクスペリエンスにとって重要な共通シグナル、つまり「Core Web Vitals」が存在します。
このようなユーザー エクスペリエンスの核となるニーズには、読み込み時間、インタラクティブ性、ページ コンテンツの視覚的な安定性などが含まれ、これらを組み合わせたものが 2020 Core Web Vitals の土台になります。
https://developers-jp.googleblog.com/2020/05/web-vitals.html
それでは、3つの重要指標について詳しく解説します。
1.読み込み時間:「LCP」Largest Contentful Paint
Largest Contentful Paintとは、直訳すると「最大コンテンツの描画」となります。
もっと分かりやすく言うと、そのページ内の最も最も重要なコンテンツが読み込まれるまでにかかる時間のことです。
表示速度に関する指標で、数値が低い(読み込み時間が短い)方が良いです。
※LCPの技術的な詳細はこちらをご覧ください。
ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。
https://developers-jp.googleblog.com/2020/05/web-vitals.html
感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
LCPの3段階評価
LCPの指標は、下記の3つに評価が分類されます。
良好(GOOD):2.5秒以内
改善が必要(NEEDS IMPROVEMENT):4.0秒以内
悪い(POOR):4.0秒以上
LCPを向上させるには
画像、動画など、ページ構成の中でメインコンテンツに当たるものの読み込み速度を高めることが、LCP改善になります。
最初のコンテンツの描画を表す「First Contentful Paint(FCP)」や、最初のバイトを受け取るまでの時間を表す「Time to First Byte(TTFB)」を改善することも、LCPを向上させることに間接的に影響があります。
2.インタラクティブ性:「FID」First Input Delay
First Input Delayは、直訳すると「最初の入力遅延」となります。
ページを読み込んだときに、ユーザーがページ操作をできるようになるまでにかかる時間のことです。
ページ操作とは、リンクやボタンをクリック、タップ、ページスクロールなどのことです。
操作性に関する指標で、数値が低い(時間が短い)方が良いです。
※FIDの技術的な詳細はこちらをご覧ください。
最初の入力までの遅延を表します。
https://developers-jp.googleblog.com/2020/05/web-vitals.html
応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。
FIDの3段階評価
FIDの指標は、下記の3つに評価が分類されます。
良好(GOOD):0.1秒以内
改善が必要(NEEDS IMPROVEMENT):0.3秒以内
悪い(POOR):0.3秒以上
FIDを向上させるには
表示スピードを上げることとと並行して、読み込みを分割させることを検討しましょう。
ページ内のすべてのコンテンツの読み込みが完了してから操作がきくようになるかたちではなく、操作性がきくようになる部分を先行し、段階を分けてページ全体を読み込ませると良いでしょう。
3.ページコンテンツの視覚的な安定性:「CLS」Cumulative Layout Shift
Cumulative Layout Shiftとは、直訳すると「累積レイアウトシフト」になりますが、これだとちょっと意味がよく分からないですよね。
ここで言う「累積」とは、「ページの読み込みが進むにつれ」と言う解釈で良いと思います。
CLSは、「ページの読み込み進度によるレイアウトの入れ替わり」と考えてください。
操作性に関わる指標で、数値が低い(レイアウト移動が少ない)方が良いです。
クリックやタップをしようとした時に、ページの読み込み中が進んで表示ズレてしまったり、突然広告が出現したり、意図した操作ができななかった瞬間はありませんか?
CLSは、ユーザーが誤操作をせず快適にネットサーフィンするために、ページ読み込みによるレイアウト移動を数値化したものです。
デベロッパー向けのweb.devに公開されている、この動画がとても分かりやすかったので参考にしてみてください。
※CLSは2019年に作られた、比較的新しい指標です。技術的な詳細はこちらをご覧ください。
ページがどのくらい安定しているように感じられるかを表します。
https://developers-jp.googleblog.com/2020/05/web-vitals.html
視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。
CLSの3段階評価
CLSの指標は、下記の3つに評価が分類されます。
良好(GOOD):0.1以内
改善が必要(NEEDS IMPROVEMENT):0.25以内
悪い(POOR):2.5以上
CLSを向上させるには
どのような通信環境・デバイスのユーザーであってもユーザビリティを損なわないような読み込ませ方にしましょう。
LCPやFIDを改善していく時に、スピード・秒数だけを改善しようとすると、CLSが疎かになってしまいます。
Web Vitals「LCP」「FID」「CLS」を計測する方法
Core Web Vitalsの重要指標「LCP」「FID」「CLS」は、「Web Vitals」というツールをChrome機能拡張を入れることで測定することができます。
ここから「Chromeに追加」でインストールして、機能拡張を有効にしてください。
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
計測ツール「Web Vitals」の使い方
メニューバーに機能拡張の四角いアイコンが表示されます。
計測したいページを読み込むと、自動的に計測が始まります。
メニューバーの四角が、数値に問題なければ緑色、問題があれば赤色に変化します。
クリックすると、「LCP」「FID」「CLS」それぞれの指標を見ることができます。
読み込みは通信環境も影響しますので、同じページを何度か試してみると良いでしょう。
Web Vitalsは今度どうなっていくの?
ページスピード改善や数値の計測には、これまでLighthouse、Chrome DevTools、PageSpeed Insights、Search Console のスピード レポートなど、様々なツールや指標がありましたが、これらもいずれ、Core Web Vitalsを軸とした内容に刷新されていくようです。
Web Vitalsへの対策は必要なの?
個人ブロガーや、WordpressなどのCMSを使用している小規模なサイトなどでは、特に何か大きな対策をする必要はないと思います。
技術的な知識が必要になりますので、対策すること自体が難しい場合もあるでしょう。
ページスピードや重要指標を高めるというよりは、サイトに悪い部分があれば潰していく方が大事かと思います。
まとめ
これまでもページスピードが遅いことは検索順位にとってマイナス要因でした。
今まで通り、ページスピードは重要です。
そしてWeb Vitalsによって今までよりも、よりユーザーにとって使いやすい形でのスピード改善が望まれている、ということを理解してください。
Web Vitalsについて詳しく解説されている他のサイト
海外SEOブログ(鈴木謙一氏)
https://www.suzukikenichi.com/blog/google-introduces-web-vitals/
コメントを残す