速度就是金錢
Google 的研究數據清楚地說明了速度的商業價值：
- 頁面載入時間從 1 秒增加到 3 秒，跳出率提高 32%
- 載入時間達到 5 秒，跳出率提高 90%
- 每 100 毫秒的延遲，電商轉換率下降 1%
更重要的是，Google 自 2021 年起將 Core Web Vitals（核心網頁指標）納入搜尋排名因素。網站速度不僅影響使用者體驗，更直接影響你在搜尋結果中的能見度。
理解網頁載入的過程
在優化之前，先了解瀏覽器載入一個網頁時發生了什麼：
- DNS 查詢：將網域名稱轉換為 IP 位址
- 建立連線：與伺服器建立 TCP 連線（HTTPS 還需要 TLS 交握）
- 發送請求：瀏覽器向伺服器請求 HTML 文件
- 伺服器處理：伺服器產生回應內容
- 下載 HTML：瀏覽器接收 HTML 並開始解析
- 下載資源：解析到 CSS、JavaScript、圖片等資源時，發起額外的請求
- 渲染頁面：瀏覽器根據 HTML 和 CSS 繪製頁面
- 執行 JavaScript：運行互動功能的程式碼
關鍵認知：研究顯示，終端使用者 80% 到 90% 的等待時間花在下載頁面資源上，而非伺服器處理。這意味著前端優化的投資報酬率通常最高。
第一類：減少網路請求
每一個資源（CSS 檔案、JavaScript 檔案、圖片）都需要一次 HTTP 請求。減少請求次數是最直接的優化策略。
合併與精簡檔案
- 合併 CSS 檔案：將多個樣式表合併為一個，減少請求次數
- 合併 JavaScript：將多個腳本檔合併，注意依賴順序
- 精簡程式碼：移除空白、註解和不必要的字元，現代建置工具（如 Vite、Webpack）會自動處理
使用 CSS Sprites
將多個小圖示合併成一張大圖片，透過 CSS 的 background-position 顯示不同的圖示。一次請求取代數十次請求。不過在現代開發中，SVG 圖示和 Icon Font 已經是更好的替代方案。
延遲載入（Lazy Loading）
不在首屏顯示的圖片和影片，等使用者捲動到該區域時再載入：
- 使用原生的
loading="lazy"屬性（現代瀏覽器都支援） - 首屏的重要圖片不要設定延遲載入，避免影響 LCP 指標
避免不必要的請求
- 移除沒有使用到的 CSS 和 JavaScript
- 檢查第三方腳本（分析工具、社群按鈕、廣告代碼）是否都必要
- 避免產生 404 錯誤——每一個 404 都是浪費掉的請求
第二類：最佳化資源大小
減少每個資源的檔案大小，讓傳輸更快。
圖片最佳化
圖片通常佔網頁總大小的 50% 以上，是最值得優化的項目：
選擇正確的格式：
| 格式 | 適用情境 | 特點 |
|---|---|---|
| WebP | 通用圖片（推薦） | 比 JPEG 小 25-35%，支援透明 |
| AVIF | 高品質圖片 | 壓縮率最高，瀏覽器支援度漸增 |
| JPEG | 照片 | 相容性最好 |
| PNG | 需要透明背景 | 檔案較大，適合圖示 |
| SVG | 圖示、Logo | 向量格式，無限縮放不失真 |
壓縮策略：
- 使用適當的壓縮品質（JPEG 品質 75-85 通常是品質和檔案大小的最佳平衡點）
- 根據顯示尺寸提供對應大小的圖片（不要用 3000px 的圖片顯示在 300px 的區域）
- 使用
<picture>元素或srcset屬性提供多種尺寸和格式
設定圖片尺寸：
- 在 HTML 中明確指定圖片的
width和height - 這能避免圖片載入時造成版面位移（影響 CLS 指標）
文字壓縮
啟用伺服器端的 Gzip 或 Brotli 壓縮，能將 HTML、CSS、JavaScript 的傳輸大小減少 60-80%：
- Gzip：廣泛支援，壓縮效果好
- Brotli：Google 開發的新一代壓縮演算法，比 Gzip 再小 15-25%，現代瀏覽器都支援
精簡第三方資源
每一個第三方腳本都會增加頁面大小和載入時間：
- 評估每個第三方工具的必要性
- 使用
async或defer屬性非同步載入外部腳本 - 考慮是否能用更輕量的替代方案
第三類：善用快取機制
讓瀏覽器記住已經下載過的資源，避免重複下載。
瀏覽器快取
透過 HTTP 標頭控制瀏覽器如何快取資源：
- Cache-Control：設定資源的快取時間和行為
- ETag：讓伺服器和瀏覽器判斷資源是否有變更
- 靜態資源（CSS、JS、圖片）可以設定較長的快取時間（如一年）
- HTML 頁面則需要較短的快取時間或不快取，確保內容更新能即時反映
使用 CDN
內容傳遞網路（CDN）將你的靜態資源複製到全球各地的節點，讓使用者從最近的節點下載：
- 減少地理距離造成的延遲
- 分散主伺服器的流量壓力
- 大部分 CDN 提供自動的圖片最佳化和壓縮功能
預先連線與預先載入
告訴瀏覽器提前準備即將需要的資源：
- dns-prefetch：提前解析第三方網域的 DNS
- preconnect：提前建立與第三方伺服器的連線
- preload：提前下載當前頁面確定需要的關鍵資源（如首屏字型、主要 CSS）
第四類：優化渲染效能
資源下載完成後，瀏覽器還需要解析和渲染頁面。
CSS 放在前面，JavaScript 放在後面
這是一條歷久不衰的基本原則：
- CSS 放在
<head>：讓瀏覽器盡早開始渲染頁面，避免畫面閃爍 - JavaScript 放在
</body>前：避免腳本阻擋頁面渲染。或使用defer屬性讓腳本不阻擋 HTML 解析
減少 DOM 複雜度
DOM（文件物件模型）元素越多，瀏覽器渲染和 JavaScript 操作的成本越高：
- 避免不必要的巢狀層級
- 使用合適的 HTML 標籤而非大量的
<div>堆疊 - 對大量資料的列表考慮虛擬捲動（Virtual Scrolling）
避免版面位移
頁面載入過程中的版面跳動會讓使用者感到不舒適，也會影響 CLS 指標：
- 為圖片和影片設定明確的尺寸
- 避免在已渲染的內容上方動態插入元素
- 字型載入策略使用
font-display: swap避免隱形文字
減少主執行緒阻塞
長時間佔用主執行緒的 JavaScript 任務會讓頁面無法回應使用者的操作：
- 將大型任務拆分成小型任務
- 非緊急的 JavaScript 邏輯延後執行
- 使用 Web Worker 處理運算密集的工作
第五類：Cookie 與資料傳輸
精簡 Cookie
- 移除不必要的 Cookie
- 縮小 Cookie 的大小
- 為靜態資源使用無 Cookie 的網域（或 CDN）
使用高效的資料格式
- API 回應使用 JSON 格式（比 XML 更小、解析更快）
- 大量資料考慮分頁載入，而非一次載入全部
Core Web Vitals：Google 的效能標準
Google 定義了三個核心指標來衡量使用者體驗：
LCP（Largest Contentful Paint）— 最大內容繪製
衡量首屏最大元素（通常是主圖片或標題）的載入時間。
| 評等 | 時間 |
|---|---|
| 良好 | ≤ 2.5 秒 |
| 待改善 | ≤ 4.0 秒 |
| 差 | > 4.0 秒 |
優化重點：
- 最佳化首屏圖片的大小和格式
- 減少伺服器回應時間
- 預先載入 LCP 元素所需的資源
- 避免 CSS 和 JavaScript 阻擋渲染
INP（Interaction to Next Paint）— 互動延遲
衡量使用者操作（點擊、輸入）到頁面回應之間的延遲。
| 評等 | 時間 |
|---|---|
| 良好 | ≤ 200 毫秒 |
| 待改善 | ≤ 500 毫秒 |
| 差 | > 500 毫秒 |
優化重點：
- 減少 JavaScript 的執行量
- 拆分長時間的任務
- 避免主執行緒被阻塞
CLS（Cumulative Layout Shift）— 累積版面位移
衡量頁面載入過程中元素位置的跳動程度。
| 評等 | 分數 |
|---|---|
| 良好 | ≤ 0.1 |
| 待改善 | ≤ 0.25 |
| 差 | > 0.25 |
優化重點：
- 為所有圖片和影片元素設定尺寸
- 避免動態插入內容在已渲染的區域上方
- 使用
transform動畫取代會觸發版面重排的屬性
實用的效能檢測工具
Google PageSpeed Insights
輸入網址即可獲得行動版和桌面版的效能評分，並提供具體的改善建議。最重要的是它使用真實使用者資料（CrUX）來評估 Core Web Vitals。
Google Lighthouse
Chrome 瀏覽器內建的綜合評估工具，除了效能之外還涵蓋可訪問性、SEO 和最佳實踐。可以在開發過程中反覆使用，追蹤優化成效。
WebPageTest
進階的效能測試工具，支援從不同地理位置和網路條件測試，能產生詳細的瀑布圖（Waterfall Chart）幫助你定位效能瓶頸。
Chrome DevTools
瀏覽器開發者工具的 Network 和 Performance 面板，是日常開發中最實用的效能除錯工具。可以模擬慢速網路環境，觀察資源載入的時序。
效能優化的優先順序
不是所有優化都需要一次到位。建議依以下優先順序處理：
- 圖片最佳化 — 投入最少、效果最顯著
- 啟用壓縮和快取 — 伺服器端設定一次，長期受益
- 移除不必要的資源 — 不載入就是最快的載入
- 最佳化 CSS 和 JavaScript 的載入策略 — 改善首屏渲染速度
- 使用 CDN — 對全球使用者都有幫助
- 進階 JavaScript 最佳化 — 改善互動回應速度
結語：速度是一種態度
網站效能優化不是一次性的專案，而是持續的過程。隨著內容增加、功能擴展，效能可能逐漸下降。建議定期（至少每季一次）使用 PageSpeed Insights 檢測網站效能，並將 Core Web Vitals 的達標作為持續追蹤的指標。
記住：使用者不會等待。一個載入快速、操作流暢的網站，不僅讓訪客滿意，更是搜尋排名和商業轉換的堅實基礎。
