【新機能】Web Vitals Performance Issue

新しい種類の Performance Issue として、Web Vitals Performance Issues を導入しました。Web Vitals の指標が、パフォーマンスに関する当社の「meh」または「poor」のしきい値に下がった場合、アプリケーション内の改善余地が最も大きいページを対象に、これらの課題が作成されます。

これらの課題は Seer Issue Fix を念頭に置いて構築しました。私たちの目的は、Vitals スコアの低下を通知するだけではありません。スコアを改善するために取れる具体的な手順を提示し、可能な場合は問題の修正まで支援することです。

Web Vitalsとは？なぜ気にする必要があるのか

Web Vitals は、サイトのユーザー体験がパフォーマンスの基準値と比べてどの程度かを把握するための標準指標です。Vitals の良いスコアを持つウェブサイトが必ずしも素晴らしいユーザー体験を保証するわけではありませんが、Vitals の評価が悪いウェブサイトはほとんどの場合、ユーザー体験も悪いと言えます。

とはいえ、たとえユーザー体験の向上にはそこまで関心がないとしても、Web Vitals は Google の検索ランキングや Shopify でのリスティングにも影響します。要するに、ビジネスの成果に直結します 🤑。

中でも、最も重視すべき 3 つの Core Web Vitals は次のとおりです。

• Largest Contentful Paint (LCP)：ページ内で最も大きな要素が表示されるまでにどれくらい時間がかかるのかを測定します。読み込み速度の指標。
• Interaction to Next Paint (INP)：ページ要素を操作したとき、次のフレームが表示されるまでにかかる時間を測定します。インタラクティビティの指標。
• Cumulative Layout Shift (CLS)：ページ読み込み中に要素がどれだけずれるか。ページの安定性の指標。

Web VitalsとSentry

Sentry には、アプリケーション全体で Web Vitals メトリクスを測定するための素晴らしい標準ダッシュボード がすでに用意されています。この機能についてはこちら やこちら 、さらにはこちら でも紹介しています。

Sentry の既存の Web Vitals 機能を特に魅力的にしているポイントは以下の通りです。

• 実際のユーザーセッションからメトリクスを収集しています。開発者の皆さんもご存じの通り、自分のコンピュータ上ではだいたい完璧に動くものです。
• 認証が必要なページのメトリクスも追加の手間をかけることなく収集できます。
• Web Vitalsのパフォーマンスを他のテレメトリのコンテキストで確認できます。ページの読み込みが遅かった理由が例外の発生や操作の再試行によるものであるかもしれません。

2025年12月8日、Sentryの組み込み Web Vitals 機能に最新のスムーズなアップデートをリリースしました。その名も、Web Vitals Performance Issuesです。

Web Vitals Performance Issues のご紹介

Web Vitals Performance Issues は、新しいタイプの Performance Issue であり、アプリケーションの中でもトラフィックが最も多いページで、Web Vitals の指標が一定期間にわたって不良な状態が続いている場合にトリガーされます。

私の考えでは、最大の特長はここです。SentryのSeer Agent を使えば、これらの Issue は「数値が悪い」と警告するだけではありません。根本原因の特定を支援し、実際に根本の問題を修正するところまで後押しします。

なぜもっと早く行わなかったのでしょうか？

これまで、Web Vitalsのスコアが悪いことをユーザーにアラートを出さない判断をしてきました（Performance Issues 自体は新しいものではありません）。それでは、何が障害になっていたのでしょうか。

1. 開発者に余計な仕事を増やしたくありませんでした。Web Vitalsの計測は重要ですが、アプリケーション内のエラーのようなシグナルに比べると優先度が下がります。
2. ユーザーにアラートを送ることでスパムになってしまうことも懸念していました。悪いWeb Vitalsのメトリクスは、数十ページにわたって問題となる可能性があります。
3. 実行可能性のない Issue を作りたくありませんでした。「CLSスコアが悪いことはわかったが、それでどうする？」とユーザーが感じる状況を想定していました。

では、私たちが採ったアプローチが、これらの懸念にどう対処しているのかを説明します。

スパム化や不要な作業を避ける

エンジニアの皆さんが Web Vitals の Issue で埋め尽くされないよう、いくつかの対策を講じています。

• Issue は重大なエラーよりも優先度を低く設定しているため、Issue ストリームからフィルタリングできます。
• Issue を作成するのは、改善余地が最も大きい上位 5 ページに限定しています。
• Web Vitals のスコアは 2 週間ごとに再評価します。また、同じページに対して同じ種類の問題で新しい Issue は作成しません。
• Seer の根本原因分析を利用することで、Web Vitalsのスコアが悪い場合に、ただ警告するだけでなく、修正のお手伝いをしたいと考えています。

問題を対応可能なものにする

どうすればこれらの Issue が実際に対応可能なものになるのでしょうか。

そろそろまとめましょう…

私たちが行ったいくつかの設計上の決定を通じて、次のことを実現できるものを構築できたと願っています。

1. ウェブサイトのパフォーマンスに関する厄介な問題をより良く診断し、修正するのに本当に役立つこと。
2. エンジニアにとって面倒で厄介な新たな作業を増やさず、「もうノートPCを窓から投げ捨てたい……」と思わせないこと 😅 。
   ※もし何かを投げ出したくなった場合は、こちらで機能をオフにすることができます。