距離上篇文章已經有一段時間了，最近把本站更新成SSR渲染後，對於效能跑分的成績有很大的提升，應該會在近期把更新的內容做些紀錄，那麼回歸正題。


本次將4個效能指標合在一起介紹，部分原因是除了CLS以外的效能指標，其實都和網頁讀取速度有很大的關聯，導致其實只要能讓網頁速度提升，就能同時大幅提升這幾個指標的成績，這些分別是：

• FCP (First Contentful Paint)：
  頁面中第一個有意義的內容被渲染繪製的時間點，例如文字內容、圖片等等。
• LCP (Largest Contentful Paint)：
  頁面中最大的可見內容元素被渲染繪製的時間點。
• TBT / FID (Total Blocking Time/First Input Delay)：
  使用者第一次和頁面互動，直到瀏覽器開始可以對該互動做出反應所經過的時間。
• SI (Speed Index)：
  頁面可視內容的讀取速度指標，讀取過程中視窗內容逐漸顯示的速度，越低代表越快。
  (也有看到說法是說"從沒有到看到完整視覺頁面的時間")

簡言之，想辦法提升網頁讀取速度，是這幾項指標提升成績的主要方式，這部分就涉及非常廣泛了，這邊先列舉一些本站更新過程中所做的手法：

• 不重要的資源延遲載入，降低初期網頁渲染繪製的壓力
• 盡可能壓縮精簡code，將冗餘的程式碼進行整理
• 專案打包進行壓縮，可採用gzip, br等方式進行
• 採取SSR(伺服器渲染)，避免所有內容都交由客戶端渲染導致渲染時間過長
• 圖片、靜態資源大小盡可能減小，例如採用解析度剛好的圖片
• 預先加載資源(如google fonts)
• 動態import所使用的依賴包，按需引入
• 採用SSR的情況，採取delay hydration提升效能跑分(對使用者體感提升並不明顯)
• and more

這些內容在經過CSR->SSR升級後，本站都有做一定程度的修復，將在接下來的系列文提及，
最後附上本站在經過升級後的跑分差異

Before 🔗

After 🔗