Web Vitals進階
有什麼可以優化前端效能的方法？
前端效能優化總覽
效能優化可以沿著使用者感知到內容的三個階段思考：
- 載入（Loading）：資源多快能下載並可用。
- 渲染（Rendering）：瀏覽器多快能把畫面畫出來。
- 執行與互動（Runtime / Interaction）：JS 執行、互動是否流暢。
對應 Core Web Vitals：LCP（載入）、CLS（視覺穩定）、INP（互動）。
一、網路 / 資源載入
- 壓縮：啟用 Gzip / Brotli；圖片使用 WebP、AVIF；SVG 壓縮。
- HTTP/2、HTTP/3：多工、減少連線握手。
- CDN：就近提供靜態資源、邊緣快取。
- HTTP 快取：
Cache-Control、ETag、immutable檔名帶 hash。 - 預連線 / 預載：
<link rel="preconnect">提早建立連線<link rel="dns-prefetch">提早 DNS 查詢<link rel="preload">預先下載關鍵資源（字型、LCP 圖片）<link rel="prefetch">預抓下一頁資源
- 圖片優化：
- 使用
srcset/<picture>做 RWD loading="lazy"延遲載入decoding="async"- 指定
width/height避免 CLS
- 使用
二、JavaScript 最佳化
- Code Splitting：依路由 / 元件分割 chunk，只載入目前需要的程式碼。
- Tree Shaking：移除未使用的 export。
- Lazy Loading：
import()動態載入、Reactlazy/ VuedefineAsyncComponent。 - Minify / Compression：Terser、esbuild、SWC。
- 避免阻塞主執行緒：長任務拆分、使用
requestIdleCallback、Web Worker 處理重算。 async/defer：外部 script 不阻塞 HTML 解析。- 移除未使用的 polyfill / 函式庫。
三、CSS 最佳化
- **關鍵 CSS（Critical CSS）**內嵌於
<head>，非關鍵 CSS 延遲載入。 - 減少選擇器複雜度，避免深層後代選擇器。
- 使用
contain: layout / paint、content-visibility: auto縮小渲染範圍。 - 避免
@import（會阻塞下載）。
四、渲染效能
- 使用
transform/opacity做動畫（走 Composite，不觸發 Layout / Paint）。 - 避免 layout thrashing（讀寫交替）。
- 大列表使用虛擬滾動（react-window、vue-virtual-scroller）。
- Debounce / Throttle 高頻事件（input、scroll、resize）。
- 圖片、iframe 使用
loading="lazy"。 will-change提升合成層（但不可濫用）。
五、框架層（React / Vue）
React.memo、useMemo、useCallback避免不必要 re-render。- Vue 使用
v-showvsv-if依場景選擇；key正確設定。 - 長列表分頁 / 虛擬化。
- SSR / SSG（Next.js、Nuxt）降低首次 LCP。
- Islands Architecture / RSC 只水合需要互動的部分。
六、Web Vitals 各指標對應
| 指標 | 目標 | 主要手段 |
|---|---|---|
| LCP | ≤ 2.5s | 預載 LCP 圖、壓圖、SSR、減少阻塞資源 |
| CLS | ≤ 0.1 | 指定 width/height、預留空間、字型 font-display: optional |
| INP | ≤ 200ms | 分割長任務、減少 JS、使用 Web Worker |
| FCP | ≤ 1.8s | 關鍵 CSS 內嵌、減少 render-blocking |
| TTFB | ≤ 800ms | CDN、邊緣運算、HTTP/2、更快的後端 |
七、監測與工具
- Lighthouse / PageSpeed Insights
- Chrome DevTools Performance / Coverage Panel
- WebPageTest
web-vitalslibrary（RUM 真實使用者監測）
小結
效能優化是系統工程，從網路 → 解析 → 執行 → 渲染每一層都能優化；實務上應先用 Lighthouse / Web Vitals 找出最大瓶頸，再針對性優化，而不是一次全做。
✦ AI 模擬面試
輸入你的答案，AI 即時分析精準度與改進空間
登入後即可使用 AI 評分