Article by: Anton Bjorkman, Sergiy Dybskiy
開発者が求めているのは、「ツールを実行して、数字を見つめて、落ち込むだけ」のウェブサイトではありません。なので、私たちは、まったく違うものを作りました。
WebVitals は、サイトの分析・最適化・高速化を、ひとつの場所でまとめて行えるサービスです。スタックトレースや遅いクエリに日々向き合っているメンバーが作ったこのツールは、パフォーマンス指標と、実際にユーザー体験を遅くしている原因とのつながりを浮かび上がらせます。
この 1 つの場所で、次のことができます。
- 実際のユーザーがあなたのサイトをどう体験しているかを把握する
- 最大の遅延要因をすぐに見つけ出す
- 専門用語や勘に頼ることなく、「次に何をすべきか」がはっきり分かる
webvitals.com の仕組み
ドメインを入力して「Go」を押せば、あとは WebVitals にお任せです。
裏側では、WebVitals が Vercel AI SDK を使って、いくつかのツールコールを実行します。
- 1つは Google の PageSpeed API：過去28日間の実ユーザーのパフォーマンスデータ、いわゆる CrUX データを取得します。
- もう1つは Cloudflare の URL Scanner：サイトで使われている技術スタックを検出します。
これらの結果を組み合わせて分析し、本当に重要なポイントだけが浮かび上がるようにしています。
何がうまくいっていて、どこに改善余地があるのかが一目でわかります。各レポートでは、CrUX データを踏まえながら、指標を改善するための具体的でコンテキストのある次のステップを提示します。
なお、CrUX データは「実ユーザーの実際の利用データに基づく各指標の 75 パーセンタイル値」です。
Core Web Vitals レポート
Core Web Vitals について、実際にアクションにつなげられるインサイトを得ることができます。
- Largest Contentful Paint（LCP）：メインコンテンツがどのくらい早く表示されるか。
- Interaction to Next Paint（INP）：ユーザーが操作したとき、ページの反応がどの程度スムーズに感じられるか。
- First Contentful Paint（FCP）：ページ上に「何かしらのコンテンツ」が最初に表示されるまでの時間。
- Time to First Byte（TTFB）：サーバーから最初の 1 バイトが返ってくるまでにかかる時間。
- Cumulative Layout Shift（CLS）：レイアウトがどれくらい安定しているか（あるいは不安定か）。スクロール中にコンテンツがガタガタ動くあの現象です。
Core Web Vitals が重要な理由
Core Web Vitals は、「ユーザーがあなたのサイトを使ったときに何を感じているか」をそのまま反映する指標です。
ページの描画に時間がかかる、読み込み中にレイアウトがガタガタ動く、ボタンを押しても反応がもたつく。こういったことは、ユーザーにはっきり伝わりますし、多くの場合そのまま離脱につながります。遅いサイトは、単に CWV のスコアを悪化させるだけではありません。検索エンジンでの順位やコンバージョン率、そして長期的には売上にも影響します。
これらの指標は、「なんとなく遅く感じる」といったあいまいなフィードバックを、測定可能できちんと対処できる問題に変えてくれます。パフォーマンスグラフとユーザーが感じているフラストレーションとのあいだに、共通言語をつくるような役割を果たします。
Sentry でもっと深く掘り下げる
Google の PageSpeed Insights や Lighthouse のようなツールは、一般公開されているページを見るにはとても便利ですが、それだけですべてをカバーできるわけではありません。ログインの裏側にあるページ（認証済みダッシュボード、管理画面、社内向けツールなど）は、別の手段で計測・分析する必要があることが多く、そこで登場するのが Sentry です。
Sentry の Web Vitals ダッシュボードを使えば、公開ページだけでなく、アプリ内のあらゆるページについてパフォーマンスをトラッキングできます。Sentry には、ほぼすべての主要な言語・フレームワーク向けの SDK が用意されています。実際のユーザーから得られたデータに基づく詳細な内訳を確認できるため、「何がボトルネックになっているのか」をきちんと理解し、的確に改善していくことができます。
たとえば、次の Next.js 製の画像ギャラリーアプリには、いくつかパフォーマンス上の問題があります。
このアプリは読み込みが遅く、画像データの取得中はページが空白のまま表示されてしまいます。さらに、ヒーロー画像が Cumulative Layout Shift（CLS）も引き起こしています。
これらの問題を解決するには、Next.js アプリケーションに Sentry を素早く導入してパフォーマンス問題の取得を始めるのがおすすめです。プロジェクト内でnpx @sentry/wizard@latest -i nextjsを実行し、表示されるインストールウィザードに従って進めれば、セットアップ全体を通して案内してもらえます。
セットアップが完了したら、Sentry の Web Vitals ページが、Web Vitals の悪化要因を調査し、どのページがパフォーマンスを最も悪化させているかを把握するための出発点として非常に役立ちます。
Opportunity は、その指標における現在のスコアと、最大スコア（100）との「差」を表しています。
Performance Score の右側に表示される Score Breakdown では、Performance Score の推移をエリアチャートで確認できます。これにより、Core Web Vitals を時間経過とともに追跡し、リグレッションを素早く見つけることができます。エリアチャート上部のフィルターからは、環境、期間、ブラウザの種類で絞り込みが可能です。
Performance Score の下には、各 Core Web Vitals が表示されます。メトリクスの値は秒またはミリ秒で示されます。また、それぞれのパフォーマンススコアも表示され、色分けされています。Good は 90 以上、Meh は 50〜90、Bad は 50 未満です。ページ下部のテーブルには、ページごとの Core Web Vitals が一覧で表示されます。
テーブル内の行にあるページルートをクリックすると、そのページの Web Vitals の詳細を確認できます。
ホームページのページサマリーに移動し、Web Vital のドロップダウンから TTFB スコアを基準にトレースを表示するように切り替えます。そこから、対象のリンクをクリックして個別のトレースを開けば、詳細を確認できます。
この例では、どのサンプルを見ても、不自然なほど一貫して 2 秒の遅延が発生していることが分かります。これは、サンプルの Web アプリに対して setTimeout() を使い、意図的なスローダウンを加えているためです。本番環境では、Web サーバーのレスポンスが遅くなる理由はさまざまに考えられるため、ここまで分かりやすくはないかもしれませんが、トレーシングを行うことで「どこに最適化の焦点を当てるべきか」の見当をつけることができます。
この人工的な遅延を取り除けば TTFB の問題は解消されますが、画像ギャラリーアプリのパフォーマンスをさらに向上させるには、追加の対策が必要です。まず Tinify を使ってヒーロー画像を圧縮し、そのうえで <img> 要素を Next.js の Image コンポーネントに置き換え、Cumulative Layout Shift（CLS）を防ぐために width と height を指定します。
Image コンポーネントは、ギャラリー内の画像にも使うことができます。これにより画像が遅延読み込みされるようになり、ユーザーのビューポートに入るタイミング、あるいはその直前になって初めて取得・描画されます。
また、このページ自体をクライアントコンポーネントからサーバーコンポーネントに変更することで、データフェッチがレンダリングのブロッキング要因になるのを避けることもできます。
これらの修正を適用すると、Core Web Vitals の各指標は以前と比べて大きく改善されます。
WebVitals の次の一手として、Sentry を考えてみてください。Web 系のツールは、現状を素早く俯瞰するにはとても便利ですが、Sentry はその「下にあるもの」、どこで、何が、なぜ起きているのかをすべて見せてくれます。
WebVitals を試してみましょう
まずは webvitals.com にアクセスして、あなたのサイトをテストしてみてください。どの程度のパフォーマンスなのかがすぐに分かり、次のデプロイまでに手を入れておきたいポイントも見えてくるはずです。
そして、表面的な指標を見るだけでは物足りなくなったら、Sentry の出番です。「サイトが遅い」と分かるだけでも悪くはありませんが、「なぜ遅いのか、どう直せばよいのか」まで分かったほうが、ずっと良いですよね。
FAQ
■Webvitals.com とは何ですか？
WebVitals は、実際のユーザーにとってあなたのサイトが「どのくらい速く感じられるか」を可視化する、Sentry 提供の無料ツールです。Core Web Vitals のスコアに基づいて、主要なパフォーマンス課題を洗い出し、まずどこから手を付ければよいかをシンプルに案内してくれます。
■WebVitals を使うには、何かインストールする必要はありますか？
いいえ、必要ありません。公開されている URL を入力するだけで、ツール側がデータを収集してくれます。ただし、ログイン後ダッシュボードなどのページ単位でもっと詳しく見たい場合は、Sentry SDK の導入が必要になります。
■WebVitals は Sentry のパフォーマンスモニタリングと同じものですか？
厳密には違います。webvitals.com は「公開ページのパフォーマンス」のスナップショットを上位レイヤーで見せるツールです。一方で Sentry のパフォーマンス機能は、どのスパン・クエリ・コードパスがボトルネックになっているかまで掘り下げて確認できます。
■Core Web Vitals を改善することに本当に意味はありますか？
はい、あります。Web Vitals の改善は、ページの高速化、rage click（イライラしての連打）の減少、ユーザー体験の向上につながります。また、検索順位やコンバージョン率にも影響し、長期的にはビジネスの成果にも関わってきます。
■WebVitals はどこからデータを取得しているのですか？
WebVitals は、実利用に基づくパフォーマンスデータとして Google の Chrome User Experience Report（CrUX）を利用し、さらに Cloudflare の URL Scanner を使ってサイトの技術スタックを特定しています。この 2 つのデータソースを組み合わせることで、「なぜそのページが速く（または遅く）感じられるのか」をよりクリアに描き出します。
■Core Web Vitals はなぜ重要なのですか？
Core Web Vitals は、「ユーザーがどれくらい早くサイトを見て・触って操作できるか」を測る指標であり、サイトがどれだけ「速く感じられるか」と直結しています。これらの指標が健全な状態であれば、ユーザーは長く滞在し、離脱率は下がり、本来の目的（購入・申込み・閲覧など）をスムーズに達成しやすくなります。
Original Page: Introducing webvitals.com: Find out what’s slowing down your site
IchizokuはSentryと提携し、日本でSentry製品の導入支援、テクニカルサポート、ベストプラクティスの共有を行なっています。Ichizokuが提供するSentryの日本語サイトについてはこちらをご覧ください。またご導入についての相談はこちらのフォームからお気軽にお問い合わせください。
