概況

在前端開發中，最常面對的一個問題就是效能優化，所以這裡整理了一部分的方法和工具，保證你的網站快速載入，以避免使用者下載。

當你構建現代Web網站時，包括pc端和移動H5，如果你要快速並保持快速，那麼衡量，優化和監控是非常重要的。效能在任何線上網頁能否成功中起著重要作用，因為高效能網站比表現不佳的網站更好地吸引和留住使用者。

網站應專注於優化使用者體驗。像Lighthouse這樣的工具會突出顯示這些指標，並幫助你採取正確的步驟來提高效能。要“保持快速”，請設定並執行效能優化，以幫助你的團隊在你的網站啟動後繼續快速載入和讓使用者滿意所需的約束條件下工作。

衡量網站的效果

• 探索Lighthouse的表演機會

優化圖片

• 使用Imagemin壓縮影象
• 用視訊替換動畫GIF以加快頁面載入速度
• 使用lazysizes延遲載入影象
• 提供響應式影象
• 提供正確尺寸的影象
• 使用WebP影象

優化JavaScript

• 使用PRPL模式應用即時載入
• 預載入關鍵資產以提高載入速度
• 通過程式碼分割減少JavaScript有效負載
• 刪除未使用的程式碼
• 縮小並壓縮網路負載
• 為現代瀏覽器提供現代程式碼，以加快頁面載入速度

優化Web字型

• 在字型載入期間避免隱藏文字

測量現場效能

使用Chrome UX報告檢視欄位中的效果 在Data Studio上使用CrUX Dashboard 在PageSpeed Insights上使用Chrome UX報告 在BigQuery上使用Chrome UX報表

實施效能優化

• 效能優化101
• 將效能優化合併到專案構建過程中
• 使用Lighthouse CI設定效能優化

這只是做目錄的整理，後續會更新相應的文章