Web Vital
ブラウザ内のSentry SDKは、ウェブバイタル情報を収集し(サポートされている場合)、その情報をフロントエンドのトランザクションに追加します。これらのウェブバイタルは、パフォーマンス > ウェブバイタルページに要約され、各ページがユーザーに対してどのようなパフォーマンスをしているかを素早く概観することができます。
https://scrapbox.io/files/65f3fdc7a39c2b00252b6187.png
Largest Contentful Paint (LCP)は、ビューポートで最大のピクセル領域をカバーするコンテンツがレンダリングされるまでの時間、言い換えれば、ユーザーがページのメインコンテンツを見るまでの時間を測定します。このコンテンツは、画像、SVG、テキストブロックなど、ドキュメント・オブジェクト・モデル(DOM)から任意の形式を取ることができます。
インタラクション・トゥ・ネクスト・ペイント(INP) Interaction to Next Paint (INP)は、ユーザーがページとインタラクション(クリック、タップ、キーボード入力)を行ってから、次のペイント(画面上のコンテンツのレンダリング)が行われるまでの時間を測定します。INPは、ユーザーがアクションを起こした後、ウェブサイトからのレスポンスがどれだけ早く表示されるかを評価することを目的としており、スムーズでレスポンスの良いユーザー体験を提供するために非常に重要です。
累積レイアウトシフト(CLS)は、レンダリングプロセス中に発生する予期せぬ要素のシフトごとに、個々のレイアウトシフトスコアの合計です。この例としては、読み込みが完了していないページでリンクをクリックしようとして、画像レンダリングの問題でクリックする前にリンクが下にずれてしまった場合などが挙げられます。CLS の Web バイタルスコアは、継続時間に基づいているわけではありません。中断的で視覚的に不安定なシフトの程度を表しています。
ファーストペイント(FP)は、最初のピクセルがビューポートに表示され、それまで表示されていたものから視覚的な変化がレンダリングされるまでの時間を測定します。これは、背景色、キャンバス、画像など、ドキュメント オブジェクト モデル(DOM)から任意の形式で指定できます。FP は、ページをレンダリングする際に予期しないことが起きていないかどうかを開発者が把握するのに役立ちます。
First Contentful Paint (FCP)ビューポートに最初のコンテンツがレンダリングされるまでの時間を計測する。これは、画像、SVG、テキストブロックなど、ドキュメントオブジェクトモデル(DOM)のどの形式でもよい。FCPはFirst Paint(FP)と重複することが多い。FCPは、ユーザーがページ上のコンテンツの変化を見るまでにかかる時間を開発者が理解するのに役立ちます。
Time To First Byte (TTFB)は、ユーザーのブラウザがページコンテンツの最初のバイトを受信するまでの時間を測定します。TTFBは、その遅さが最初のレスポンスによるものなのか、それともレンダーブロッキングコンテンツによるものなのかを開発者が理解するのに役立ちます。
First Input Delay (FID)は、ユーザーがボタンやリンク、その他のカスタムJavaScriptコントローラをクリックして、ビューポートとインタラクションしようとしたときのレスポンスタイムを測定します。FIDデータはアプリケーションページ上のインタラクションが成功したかどうかを理解するために重要です。