網站速度優化完整指南：圖片壓縮、CDN、快取策略

一、圖片優化

圖片通常佔據網頁總載入量的 50-80%，是速度優化最重要的切入點。

1.1 選擇正確的圖片格式

• WebP：比 JPEG 小 25-35%，品質相當。現代瀏覽器支援率超過 97%，作為預設格式。
• AVIF：比 WebP 再小 20-30%，但編碼速度較慢。可作為新一代替代方案。
• SVG：適合圖標、插圖、logo 等向量圖形。檔案小且無限縮放。
• JPEG/PNG：作為舊瀏覽器的回退格式。

1.2 壓縮工具推薦

• Squoosh（Google）：免費線上工具，可即時比較壓縮效果。
• ImageOptim：Mac 桌面工具，批次壓縮效果優異。
• sharp（Node.js）：程式化壓縮，適合自動化流程。
• Cloudflare Image Resizing：邊緣伺服器自動壓縮與格式轉換。

1.3 響應式圖片

使用 <picture> 元素搭配 srcset 確保不同裝置下載適當尺寸的圖片：

<picture>
  <source srcset="hero-800.webp 800w, hero-1200.webp 1200w"
          type="image/webp" sizes="(max-width: 768px) 100vw, 50vw">
  <img src="hero-800.jpg" alt="首圖" width="1200" height="600"
       loading="lazy" decoding="async">
</picture>

二、CDN 內容傳遞網路

CDN 將你的靜態資源分散到全球邊緣節點，使用者從最近的節點載入資源，大幅減少延遲。

2.1 如何選擇 CDN

• Cloudflare（免費方案）：提供全球 CDN、DDoS 防護、免費 SSL。適合大多數中小型網站。
• Cloudflare Pro（$20/月）：額外提供圖片優化、WAF 規則、手機優化。
• AWS CloudFront：適合已有 AWS 基礎設施的企業。
• Fastly：即時清除快取，適合內容頻繁更新的網站。

2.2 CDN 設定要點

1. 啟用 Brotli 壓縮（比 Gzip 再小 15-20%）
2. 設定適當的快取標頭（Cache-Control）
3. 啟用 HTTP/2 或 HTTP/3（QUIC）
4. 設定 SSL/TLS 全域加密

三、快取策略

好的快取策略讓重複訪客幾乎零延遲載入網站。

3.1 瀏覽器快取

透過 HTTP 標頭控制瀏覽器的快取行為：

• Cache-Control: max-age=31536000：靜態資源（圖片、CSS、JS）設定 1 年快取。搭配檔名 hash（如 style.a3b2c1.css）確保更新時能正確失效。
• Cache-Control: no-cache：HTML 頁面每次都向伺服器確認是否有更新。
• ETag / Last-Modified：提供條件式請求，伺服器可回應 304 Not Modified。

3.2 伺服器端快取

• Redis / Memcached：將資料庫查詢結果快取到記憶體，適合動態網站。
• OPcache（PHP）：快取 PHP 編譯結果，減少重複編譯。
• 全頁快取（Varnish / Nginx FastCGI）：將完整的 HTML 響應快取，後續請求直接返回快取版本。

四、伺服器端優化

• 升級 HTTP 版本：HTTP/2 支援多路复用，HTTP/3 支援 0-RTT 連線。
• 選擇適當的主機：VPS（如 Vultr、Linode）通常比共享主機快 5-10 倍。
• 資料庫優化：為常用查詢添加索引、優化 SQL 語句、定期清理不必要的資料。
• Gzip/Brotli 壓縮：在伺服器層級啟用壓縮，通常可減少 60-80% 的傳輸大小。

五、前端優化

• 減少 HTTP 請求：合併 CSS/JS 檔案、使用 CSS Sprites 或 SVG Icons。
• 程式碼分割：使用 Dynamic Import 按需載入 JavaScript 模組。
• Tree Shaking：移除未使用的程式碼，減少 JS bundle 大小。
• CSS 優化：移除未使用的 CSS（使用 PurgeCSS）、壓縮 CSS。
• Preconnect：提前建立與第三方域名的連線。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

六、優化清單

1. ☐ 圖片轉換為 WebP/AVIF 格式
2. ☐ 所有圖片設定 lazy loading
3. ☐ 啟用 CDN
4. ☐ 靜態資源設定長期快取（Cache-Control: max-age=31536000）
5. ☐ HTML 設定 no-cache
6. ☐ 啟用 Brotli/Gzip 壓縮
7. ☐ 升級至 HTTP/2 或 HTTP/3
8. ☐ 移除未使用的 CSS/JS
9. ☐ 使用 Preconnect 預連線
10. ☐ PageSpeed Insights 分數達到 90+