概況
在前端開發中，最常面對的一個問題就是性能優化，所以這裏整理了一部分的方法和工具，保證你的網站快速加載，以避免用戶下載。
當你構建現代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設置性能優化
這只是做目錄的整理，後續會更新相應的文章