はい、どうも、安立です。
はじめに
今回は、Core Web Vitals（コア ウェブ バイタル）のことについてです。
この記事で扱う内容
この記事で扱うのは以下の2点です。
今回は実際の改善手法までには触れないため、その辺りを知りたい人はまたその内に。
それでは行ってみましょう！
Core Web Vitalsとは？
Core Web VitalsはGoogleが定めたWebページのユーザー体験を測定する指標のことです。
Web Vitals(ウェブバイタル)というウェブサイトの健全性を測る指標群があり、その中でも特に重要な以下の3つがCore Web Vitalsとなっています。
- LCP (Largest Contentful Paint)：読み込み速度。ページの最も大きなコンテンツ（画像やテキストブロック）が表示されるまでの時間を測る指標、
- FID (First Input Delay)：反応速度。ユーザーが最初にページを操作（クリックやタップ）してから、ブラウザが反応するまでの遅延時間を測る指標。
- CLS (Cumulative Layout Shift)：視覚的安定性。ページ読み込み中に起こるレイアウトのずれ（コンテンツが予期せず動く量）を数値化した指標。
読み込みが速かったり、クリックしてからの反応が速かったりする・・・つまり、ユーザー体験が向上することで、離脱を防いで、サイトの目的の達成につながります。
ビジネスに直結してくる数値なのですよね。
Core Web VitalsのSEOへの影響
Googleが以下の記事で、Core Web Vitalsが検索結果に影響を及ぼすと言っているため、指標をクリアしているページが検索結果上部に表示されやすくなるものと思われます。
UXに加えSEOも向上するのであれば、やるっきゃないですよね！！！
さて・・・とはいえ、じゃあどうすれば？？？となりますね。
まずは、そもそもどうやって計測するのかを押さえておきましょう。
基本のきですね。
計測の仕方
Core Web Vitalsを測る代表的なものとしては以下のようなものがあります。
- PageSpeed Insights
- Chrome DevTools
- Google Search Console
- その他サービス利用
計測にあたっては当社のコーポレートサイトを例に出しましょうね〜。
1. PageSpeed Insights
これが一番お手軽だと思います。
PageSpeed Insightsのサイトに遷移して、調べたいページのURLを入れるだけ！！！
簡単！！！
下図のようなレポートが出ます。
ただし、FIDはユーザーのクリックなどの操作に紐づくものなので、トラフィック量が多い場合でしか表示されなかったりするなど制限があります。
サイトの問題点に気付く第一歩として最もお手軽なので、まずはここから始めてみれば良いと思います！
2. Chrome DevTools
2-1. Lighthouseを使った計測
- 計測したいページをChromeで開き、DevToolsを開きます。
- Lighthouseタブを開き以下の設定をする
- Mode: Navigation
- Device: Mobile または Desktop
- Categories: Performance にチェック
- 「Analyze page load」をクリック
これで計測結果が出ます（下図参照）
FIDはユーザーのクリックなどの操作に紐づくものなので、計測できないので注意が必要です。
また、実際のユーザーのデータではないため、LCPのデータがよく出る傾向にあります。
2-2. Performanceパネルでの計測
- 計測したいページをChromeで開き、DevToolsを開きます。
- Performanceタブを開く
- 設定アイコン（歯車アイコン）をクリックし以下の設定をする
- Network: 3GやFast4Gなどお好みの設定で
- CPU: 4x slowdownがおすすめのようです
- 録画ボタンをクリック
- ページをリロードする
- 読み込み完了したら停止ボタンを押す
これで計測結果が出ます（下図参照）
この方法が一番詳細に分析できます。
3. Google Search Console
Google Search Consoleにサイトを登録しておくと、Core Web Vitalsのレポートを見ることができます。
サイト登録した上で、Google Search Consoleの左ナビの「ウェブに関する主な指標」から見ることができます（下図参照）
モバイルとPCでそれぞれレポートが出ていて、問題がある場合は「改善が必要」「不良」という形で表示されます。
4. その他サービス利用
Sentryなどのパフォーマンス計測ツールは、レポーティングに優れているため、Core Web Vitalの改善の大きな助けとなります。
Sentryは当社でも取り入れていて、リアルタイムにユーザーの動向を測ったりなどに優れています。
Sentryの詳細に関しては、また別の誰かが別の記事で紹介してくれると思います。
まとめ
Core Web Vitalsはユーザー体験だけではなく、SEOにおいても重要な指標です。
今回は計測方法までとなってますが、改善手法も書く予定です。
Performanceパネルでのより詳細な数値の見方とその改善方法になりますかね、きっと。
気長にお待ちください。
Core Web Vitalsの数値を分析・改善、Webサイトのパフォーマンスを向上していきましょう〜！！！
ユーザー体験の良いサイトが増えていけば、自分にとっても良い世界が訪れますよ！！！
♨️♨️それではまたーーーー！♨️♨️
Discussion