網站流量優化七大絕技：Gzip、瀏覽器渲染、代碼壓縮、圖片優化、外部資源、移動端、HTML5 本地存儲全攻略

流量優化 = 降成本 + 提體驗 + 增轉化

每 100ms 延遲 ↓ → 轉化率 ↑ 1% (Amazon)；每 1MB 頁面體積 ↓ → 跳出率 ↓ 1.5% (Google)。流量優化是 ROI 最高的工程投資之一。

絕技一：開啟 HTTP 壓縮 (Gzip / Brotli) —— 立竿見影省 60%+

驗證：curl -H "Accept-Encoding: gzip, br" -I https://yoursite.com/ → content-encoding: gzip 或 br。
效果：HTML/CSS/JS 通常壓縮 70-85%，整站流量省 60%+。

絕技二：瀏覽器端渲染 (CSR/SSR/SSG) —— 省 30-80% HTML 傳輸

• 傳統 SSR：伺服器拼好完整 HTML 傳輸，含大量重複標籤 (<div class="col-md-3">...)。
• CSR (Vue/React/Angular)：傳輸極小 HTML + JSON 數據 + JS Bundle，瀏覽器組裝 DOM。
  　　- 頁面體積 ↓ 1/3 ~ 1/2。
  　　- 表格/列表重排版頁面 ↓ 80%+ (僅傳數據)。
• SSG (Next.js/Nuxt/Astro)：構建期生成靜態 HTML，部署到 CDN，零伺服器渲染開銷。
• 權衡：SEO 需 SSR/SSG；首屏速度需關注 JS Bundle 體積、代碼分割、預加載。

絕技三：JS/CSS 代碼壓縮與樹搖 —— 變 26% 體積

工具鏈整合：Webpack/Vite/Rollup/Parcel 內建 production mode 自動壓縮、Tree Shaking (移除未用代碼)、Scope Hoisting。
注意：保留 Source Map 供線上排錯，部署時上傳至錯誤追蹤平台 (Sentry/Fundebug)。

絕技四：圖片優化 —— 頭號流量大戶 (佔 90%+)

• 格式選擇：
  　　- WebP (有損/無損、透明、動畫) — 現代瀏覽器全支援，比 JPEG/PNG 小 25-35%。
  　　- AVIF (下一代) — 更小 20-30%，但編碼慢、Safari 16+ 才支援。
  　　- SVG — 圖標/插圖/簡單圖形，無限縮放、極小體積。
• 響應式圖片：<picture> + srcset + sizes，根據裝置像素比/視窗寬度下載最適規格。
• 延遲加載：loading="lazy" (原生) 或 IntersectionObserver + data-src，僅可視區載入，首屏速度 ↑ 50%+。
• 深度優化工具：
  　　- Smush.it / ImageOptim / Squoosh (無損/有損智能壓縮)。
  　　- Sharp / imagemin (構建期自動化)。
  　　- CDN 圖片處理 (阿里雲 OSS/圖片服務、Cloudinary、Imgix) — URL 參數即時縮放/裁剪/格式轉換/水印。

絕技五：巧借外部免費資源 (CDN/對象存儲/邊緣計算) —— 邊際成本趨近零

• 靜態資源上 CDN：JS/CSS/圖片/字體/視頻 → 對象存儲 (OSS/S3/COS) + CDN，源站只動態 API。
  　　- 阿里雲 OSS 免費額度：40GB 存儲 + 10GB 流量/月 (約 3.5 萬次 300KB 圖片)。
• 公共庫走公共 CDN：jQuery、Vue、React、Bootstrap、Font Awesome → cdnjs/unpkg/jsDelivr/BootCDN，利用用戶瀏覽器快取命中率。
• 邊緣計算 (Cloudflare Workers / 阿里雲邊緣函數)：在邊緣節點執行重導向、A/B 測試、認證驗證、HTML 重寫，減少回源流量。

絕技六：移動端專項優化 —— 2G/3G/弱網生存指南

• 視口適配：<meta name="viewport" content="width=device-width, initial-scale=1">，禁止雙指縮放 (除非必要)。
• 資源精簡：移動端 不載入 大圖、複雜動畫、重型 JS 庫 (如完整 Moment.js → dayjs/date-fns、完整 Lodash → 按需引入/原生 API)。
• 離線包 / PWA：Service Worker 快取靜態資源、API 響應，弱網/離線可用，二次訪問零流量。
• AMP / MIP：內容型站點可接入 Google AMP / 百度 MIP，極致精簡、預渲染、瞬間打開。

絕技七：HTML5 本地存儲 —— 消除重複 Cookie/Session 流量

• Cookie 痛點：每請求自動雙向傳輸 (Request + Response)，典型 200-500 bytes × 萬級 PV = 顯著頻寬。
• 方案：
  　　- localStorage (5MB、永久) — 存用戶偏好、草稿、Token (配合 HttpOnly Cookie 刷新)。
  　　- sessionStorage (5MB、標籤頁級) — 存表單暫存、多步驟向導數據。
  　　- IndexedDB (數百 MB) — 存結構化數據、離線搜尋索引、大型草稿。
  　　- Cache API (Service Worker) — 程式化控制快取策略。
• 實戰：登入 Token 存 localStorage，API 請求由 JS 讀取加入 Header，Cookie 僅存 HttpOnly; Secure; SameSite=Strict 的刷新 Token，請求體積 ↓ 90%。

終極武器：動態頻寬 / 按量付費雲資源

技術優化有上限，業務波動無上限。阿里雲/騰訊雲/華為雲/Cloudflare 等支援「按小時/按天調整頻寬上限」：
- 大促前調高至 1Gbps，大促後降回 100Mbps。
- 突發攻擊時緊急拉升清洗頻寬。
- 成本 = ∫(實際使用頻寬 × 單價) dt，而非 峰值頻寬 × 單價 × 30天。
這才是成本優化的終局：技術省流量 + 商業買流量，雙管齊下。

總結清單