接上一篇介紹前端效能指標的內容，本文主要總結下一般使用的指標最佳化方案
載入相關：
FCP 最佳化 ：
- 降低伺服器響應時間：確保伺服器能迅速響應請求，這樣瀏覽器就能更快地開始處理並渲染頁面內容。可以透過最佳化服務端程式碼、改善靜態資源的提供方式（如將圖片部署到 CDN）來實現。
- 延遲載入非關鍵資源：對於非關鍵的指令碼和 CSS 樣式表，使用defer屬性或async屬性（對於指令碼）來延遲載入，這樣它們就不會阻塞頁面的初次渲染。
- 使用 code splitting 和 lazy loading 最佳化資源載入
- 移除不必要的資源：檢查頁面並移除那些未被使用的樣式表和JavaScript指令碼，這些不必要的資源會拖慢 FCP 的時間。
- 內聯關鍵樣式：雖然這種做法會受到質疑，但如內聯一些關鍵的 CSS 樣式確實可以減少瀏覽器解析外部資源所需的時間，從而加快渲染速度。
- 使用預渲染，將首屏內容預先渲染好。
- 最佳化圖片和影片的載入，使用 webp 格式的圖片和影片。
- 減少首次請求數量，合併檔案並使用 HTTP/2 的 server push。
- 使用瀏覽器快取，設定正確的Cache-Control和Expires頭。
- 最佳化 JavaScript 執行效能，減少首次渲染時間
TBT總阻塞時間最佳化
減少 TBT 時間的方式包括：
- 減輕第三方程式碼的影響
- 縮短JavaScript執行時間
- 減少主執行緒的工作量
- 控制請求數量和傳輸大小
理想情況下，TBT 在移動裝置上應低於 300 毫秒，在桌面 Web 上應低於 100 毫秒。
互動相關
CLS 最佳化
影響 CLS 分數的常見的原因主要有：
- 圖片、影片和 iframe 沒有預先設定尺寸，導致頁面載入時元素位置變化。
- 字型載入過程中可能產生文字短暫消失或樣式未載入的文字閃爍，影響佈局穩定性。
- 動態內容（如廣告、通知等）注入 DOM 後，尤其是網路請求之後，往往會導致頁面佈局發生突變
CLS 是由於佈局中的意外變化而發生的，因此在編寫 HTML 和 CSS 時，可以考慮以下原則：
-
避免佈局重疊：不要將新元素插入到現有元素之上，因為這可能導致頁面佈局發生意外的變化。尤其是當插入通知或警告框時，應該考慮使用不會干擾其他頁面元素的設計方法。
-
預留空間：為影像和影片元素指定尺寸屬性，以便瀏覽器在內容載入之前就能為它們預留出正確的空間。這有助於防止頁面在載入過程中發生不必要的佈局調整。
-
謹慎使用動畫：動畫和過渡效果可以提升使用者體驗，但應確保它們不會導致頁面佈局發生不必要的改變。選擇那些不會移動元素或改變佈局尺寸的過渡效果，以保持頁面的穩定性和一致性。
TTI：可互動時間最佳化
TTI 時間主要取決於以下因素：
-
頁面佈局穩定，所有可見的內容都已經被載入。
-
主執行緒空閒。如果還在載入指令碼或處理其他任務，那麼應用將不會處於互動狀態。使用者的點選和其他操作將被忽略（或排隊）直到執行緒空閒。
以下是一些最佳化策略： -
清除冗餘指令碼：移除所有未使用的指令碼，避免瀏覽器花費時間去解析不必要的程式碼，從而提升頁面載入速度。
-
分割指令碼檔案：將大型指令碼拆分成多個較小的檔案。這有助於瀏覽器更有效地載入和解析這些指令碼，減少阻塞時間。
-
動態載入指令碼：對於來自外部資源且無法直接分割或修改的指令碼，考慮採用動態載入的方式，以減少對頁面初始載入時間的影響。