今晚，我想來點 Web 前端效能優化大補帖！

• 為什麼需要在前端做效能優化？

• Performance Analyzers：LightHouse, PageSpeed

• Core Web Vital

• Code Uglify

• Image Minimize、了解 jpg、png、 svg 的使用時機

• Critical Render Path 關鍵渲染路徑

• Code Splitting

• Dynamic Import

• Lazy Load

• Webpack Bundle Analyzer

• Virtualized List

• Tree Shaking

• Preload、Prefetch and others in <link> tag

• CDN & Cache

• Write Good Code

為什麼需要在前端做效能優化？

• SEO

• 使用者體驗

• 影響營收的重要指標

找出效能瓶頸

Performance Analyzers

Lighthouse、PageSpeed

Core Web Vital

• LCP (Largest Contentful Paint ) — 顯示最大內容元素所需時間 (速度)

• CLS — Cumulative Layout Shift 累計版面配置轉移 (穩定性)

• FID — First Input Delay 首次輸入延遲/封鎖時間總計 (互動性)

如何優化 LCP

減少伺服器回應時間

• 針對主機效能優化

• 使用較近的 CDN

• Cache

• 提早載入第三方資源

盡量避免 Blocking Time

• 降低 JavaScript blocking time

• 降低 CSS blocking time

加快資源載入的時間

• 圖片大小優化

• 預先載入重要資源

• 將文字檔案進行壓縮

• 根據使用者的網路狀態提供不同的內容

• 使用 service worker

避免使用客戶端渲染(CSR)

• 若必須使用 CSR ，建議優化 JavaScript ，避免渲染時使用太多資源

• 盡量在伺服器端完成頁面渲染，讓用戶端取得已渲染好的內容

如何優化 FID

• 減少 JavaScript 運作的時間

• 降低網站的 request 數並降低檔案大小

• 減少主執行序的工作

• 降低第三方程式碼的影響

如何避免 CLS

給予會比較慢載入的元素一個預設的寬度與高度

多參考其他成功的效能優化案例

• Netflix

• Tinder

• Pinterest