前言

Day9鐵人賽文章 有提到可以使用 Suspense 來切分 server component 的 chunk，達到流式渲染(streaming)的效果，讓使用者體驗 upup。

但只用感覺不好量化使用者體驗究竟好了多少，Google 提出了網站指標(web vitals)來檢測網頁的使用者體驗好不好。

接下來會以 web vitals 的角度來看 streaming 對於使用者體驗具體有哪些方面的提升。

小剛

• web vitals 指標
• 過去的 SSR 與 web vitals
• 使用 streaming 後的 web vitals

web vitals

web vitals 是由 Google 提出的，用於量化網頁上使用者體驗的指標。開發者可以藉由這些指標有一個明確的改善方向，比較常見的方式可以用 lighthouse 查看，按下 F12 也可以看到一個 lighthouse 的頁籤，這裡可以讓我們查看網頁的 web vitals，獲得一些網頁的改善建議。

主要的 web vitals

• Largest Contentful Paint(LCP)： 網頁最大區塊的繪製時間，用來測量網頁加載的速度，正常狀況下應該會在訪問網頁後 2.5 內繪製完成。
• First Input Delay(FID)：測量使用者與網頁互動後，到瀏覽器真的開始處理的這段時間。這段時間應小於 0.1 秒，甚至更短。
• Cumulative Layout Shift(CLS)：計算佈局的偏移量，常見的就是照片載入時如果沒有預先給一個寬高，那載入後就會造成網頁的區塊位移，這就會影響到 CLS 的分數。

其他 web vitals

其他的 web vitals 通常也可以當成主要 web vitals 的代理指標，這些其他的指標當中，也可以看出特定的問題。

web vitals 的區間為：好、普通、差。

如果以下的 web vitals 指標不影響到主要的 web vitals，那也不一定要將這些 web vitals 調整到「好」這個區間。

• Time to First Byte(TTFB)：網頁發送請求後，收到回應，並且開始執行的這段等待時間。通常要在 0.8 毫秒以內，最慢不能超過 1.8 秒，否則就代表載入太慢啦～要看看 server 端發生了什麼奇怪的事。
• First Contentful Paint(FCP)：載入網頁後，直到網頁上任何非白色的區塊渲染完成，這段時間就是 FCP。與 LCP 最大的不同在於它不需要是最大塊的內容，只要是個內容就可以。
• Time to Interactive(TTI)：頁面載入後，多久可以交互的時間。需要滿足幾項條件：
  • 畫面已經渲染完成
  • 頁面上的事件都已註冊完畢
  • 這些事件必須要在觸發後 50ms 內開始執行（俗稱靜窗時間）

過去的 SSR 與 web vitals

講完了 web vitals，接下來聊聊過去的 SSR 與 web vitals 有什麼關係。

過去的 SSR 會在 server fetch 完所有的資料，才會把內容回傳到 client 端，對應的 web vitals 如下圖所示。

A：在 server fetch data 的時間
B：接收到資料後，在 server 把 html build 好

(B 的結果傳送到 client 才算 TTFB)

C：傳送 html 與 react component 到 client

(C 將整塊 html 渲染出來時算 FCP)

D：執行 react component，並且與 html 進行 hydration 的期間

(hydration 完成後才能開始互動 TTI)

我們必須要在 server fetch 完所有資料才能進行渲染，這導致所有流程非常的 waterfall，A 全部執行完成才到 B，然後接著下去。

畫面也會從空白直接跳到顯示所有內容，最後再一起 hytrating。瀏覽器在等待的時間完全沒事做，直到 TTFB 才一次執行完整個頁面所需的 code，屬實有點浪費瀏覽器的這段空窗期。

使用 streaming 後的 web vitals

使用 streaming 的方式渲染頁面就可以大大的改善上面的問題，因為渲染的區塊被我們切割，分段式的傳給瀏覽器執行上面講到的 ABCD 這四個動作。

這可以大大改善 TTFB, FCP, TTI 這三個指標。

上面這三段就相當於切分了三個 chunk(還不知道 chunk 的可以看 Day9鐵人賽的內容)，這三個 chunk 分別執行了 ABCD 這四個動作，而 web vitals 這三個輔助指標主要是看第一個渲染的 chunk，所以這大大的提高了 web vitals 的分數。

當然實際的 LCP 指標還是要看渲染最大區塊的 chunk 何時完成，在優化時也可以減少 LCP chunck 的渲染時間，這就看自己想怎麼優化了～

參考資料

• Next - what is streaming
• google - web vital
• web.dev - ttfb
• web.dev - tti
• 我自己的鐵人賽文章XD