Next.js 內置了對測量和報告性能指標的支持，我們可以通過 useReportWebVitals 鉤子自行管理報告。它會在應用的前端代碼開始之前運行，用于對應用進行全局分析、錯誤跟蹤以及性能監控。

本篇內容主要詳細介紹 6 個性能分析的指標，幫助我們更好的進行性能優化。

1. TTFB

定義

TTFB（Time to First Byte），是指從點擊鏈接到瀏覽器收到第一個數據字節的時間，它反映了服務器響應請求的效率。

目標

< 200 ms，為良好。

優化方法

• 使用 CDN 加速
• 優化服務器響應時間
• 減少重定向
• 啟用 http/2 或 http/3

2. FCP

定義

FCP（First Contentful Paint），也稱為首次內容繪制，是指用戶看到第一個內容元素（比如文本、圖片）的時間。

目標

< 1.8 秒，為良好。

優化方法

• 內聯關鍵 css
• 移除渲染阻塞資源
• 預加載關鍵資源
• 服務器端渲染（SSR）

3. LCP

定義

LCP（