去年底，一位台南做批發的老客戶找我，說他的電商網站「開很慢，客人都跑掉了」。我打開 PageSpeed Insights 一看，行動版分數 23 分——幾乎是業界倒數水準。首頁 LCP（最大內容渲染）高達 8.4 秒，圖片全是未壓縮的 PNG，JS 檔案沒有任何分割，連快取都沒設定。花了三個禮拜優化後，行動版分數提升到 81 分，LCP 降至 2.1 秒，當月轉換率提升了 34%。

速度優化不是玄學，它是有系統、有步驟可以執行的工程問題。這篇文章會把我這幾年實戰累積的心法，完整整理給你。

什麼是 Core Web Vitals？Google 為何在意它

Google 在 2021 年正式把 Core Web Vitals（CWV）納入搜尋排名因素。這三個指標衡量的是「真實使用者體驗」，不只是技術數字，而是用戶實際感受到的快不快、穩不穩、順不順。

LCP — Largest Contentful Paint（最大內容渲染）

定義：頁面主要可視內容（通常是首屏最大的圖片或文字區塊）完成渲染的時間。

  • 優良：2.5 秒以內
  • 需要改善：2.5 ~ 4.0 秒
  • 差：超過 4.0 秒

LCP 最常見的罪魁禍首是未優化的首屏大圖，或是主要內容需要等 JS 執行完才能顯示（Server-Side Rendering 不足）。

FID → INP — Interaction to Next Paint（互動響應）

Google 已在 2024 年將 FID 替換為 INP（Interaction to Next Paint），衡量使用者點擊、鍵盤輸入等互動到畫面回應的時間。

  • 優良：200 毫秒以內
  • 需要改善：200 ~ 500 毫秒
  • 差：超過 500 毫秒

主執行緒被大型 JS 阻塞，是 INP 過高的主因。解法是拆分 JS、使用 Web Worker，或延遲非必要腳本載入。

CLS — Cumulative Layout Shift（累計版面位移）

衡量頁面元素在載入過程中意外位移的程度。廣告突然插入、圖片沒有設定尺寸、字型替換都是常見原因。

  • 優良：0.1 以下
  • 需要改善：0.1 ~ 0.25
  • 差：超過 0.25

實測工具：先量測才能優化

優化前一定要先有基準數據，我常用的工具有以下幾種：

PageSpeed Insights

Google 官方免費工具，網址：pagespeed.web.dev。輸入 URL 後可以看到行動版與桌面版的詳細報告，包含 Core Web Vitals 數值、改善建議，以及哪些資源拖慢了速度。建議每次優化後都測一次，追蹤進度。

GTmetrix

可以選擇測試伺服器地點（選新加坡最接近台灣），提供瀑布圖（Waterfall Chart）讓你看清楚每個資源的載入順序與時間。付費版可以設定定期監控，一有異常自動通知。

Chrome DevTools — Performance 面板

開啟 DevTools 的 Performance 頁籤，錄製頁面載入過程，可以看到哪段 JS 佔用主執行緒最久，是找出 INP 問題的利器。

圖片優化：最容易達到的速度提升

我的經驗是，80% 的未優化網站，光靠圖片優化就能讓 LCP 改善 30%～50%。以下是標準作業流程：

1. 改用 WebP 或 AVIF 格式

WebP 比 JPEG 小約 25%～35%，比 PNG 小約 26%。AVIF 更小，但支援度稍低。建議使用 <picture> 標籤做格式降級：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="產品圖" width="800" height="600">
</picture>

2. 實作 Lazy Load（延遲載入）

首屏以外的圖片不需要立刻載入。HTML 原生支援 lazy load：

<img src="photo.webp" loading="lazy" alt="..." width="800" height="450">

注意：首屏圖片不要加 lazy，反而會讓 LCP 變慢。首屏大圖應該加 fetchpriority="high"。

3. 指定圖片尺寸，解決 CLS

永遠在 <img> 上設定 width 和 height 屬性，瀏覽器才能預留空間，避免圖片載入後頁面跳動（CLS 問題）。

4. 壓縮工具推薦

  • Squoosh.app：Google 出品，瀏覽器內壓縮，支援 WebP/AVIF 轉換
  • ImageMagick：適合批次處理大量圖片的指令工具
  • WordPress 外掛：Smush、ShortPixel、Imagify

快取策略：讓回訪者秒開

快取是速度優化中投報率最高的策略之一。正確設定後，回訪者幾乎不需要重新下載靜態資源。

瀏覽器快取（HTTP Cache Headers）

在 Nginx 或 Apache 設定檔中，針對不同類型資源設定快取時間：

資源類型建議快取時間
圖片（jpg、png、webp）1 年（31536000 秒）
CSS / JavaScript1 年（搭配檔案指紋）
字型檔（woff2）1 年
HTML 頁面不快取 或 1 小時

注意：長期快取 CSS/JS 時，要搭配「檔案指紋」（Fingerprinting），例如 style.abc123.css，讓更新後的版本有不同的 URL。

服務端快取（Server-Side Cache）

對於動態網站（PHP/WordPress），使用全頁快取可以大幅降低伺服器負擔：

  • WordPress：WP Super Cache、W3 Total Cache、LiteSpeed Cache
  • Laravel：使用 Redis 或 Memcached 快取資料查詢結果
  • Nginx FastCGI Cache：在 Nginx 層直接快取 PHP 輸出

CDN：讓台灣用戶和國際訪客都快

CDN（內容傳遞網路）會把靜態資源複製到全球多個節點，用戶從最近的節點下載，大幅減少延遲。

推薦的 CDN 服務

  • Cloudflare（免費方案）：對台灣小型網站來說夠用，DNS 託管就能啟用，提供 DDoS 保護、SSL 憑證、基本快取。台灣節點在台北。
  • BunnyCDN：價格便宜（$0.01/GB），有亞洲節點，適合流量大的網站。
  • AWS CloudFront：適合已在 AWS 生態系的企業，與 S3、EC2 整合方便。

設定 CDN 後，記得確認靜態資源的 URL 已經指向 CDN 域名，並且快取規則正確。

JS / CSS 壓縮與優化

未優化的前端資源是阻塞渲染的大宗。以下是必做的項目：

移除未使用的 CSS（PurgeCSS）

如果你用了 Bootstrap 或 Tailwind，但只用了其中一小部分，剩下的 CSS 都是白白佔流量。PurgeCSS 可以掃描 HTML/JS，自動移除未使用的 CSS 選擇器，通常能將 CSS 體積縮小 70% 以上。

程式碼分割（Code Splitting）

不要把所有 JavaScript 打包成一個巨大的 bundle.js。使用 Webpack 或 Vite 的動態載入（Dynamic Import），讓首頁只載入首頁需要的程式碼，其他模組按需加載。

延遲第三方腳本

Google Analytics、Facebook Pixel、聊天機器人 SDK——這些第三方腳本通常對首屏渲染沒有幫助，應該加上 defer 或 async 屬性，或是等頁面互動後才載入。

<script src="analytics.js" defer></script>

defer：下載與 HTML 解析並行，HTML 解析完才執行
async：下載完立刻執行，可能打斷 HTML 解析

伺服器端優化：PHP-FPM 與 OPcache

前端優化做完了，別忘了後端也可能是瓶頸。對於 PHP 網站，這兩個設定幾乎是必裝的。

PHP-FPM 調效

PHP-FPM（FastCGI Process Manager）管理 PHP 進程池。預設設定通常過於保守。重點調整項目：

  • pm = dynamic：動態管理進程數量
  • pm.max_children：最大進程數，依伺服器 RAM 調整（每個 PHP 進程約 30～50MB）
  • pm.start_servers / pm.min_spare_servers：預先建立進程，減少啟動延遲

OPcache 設定

OPcache 將 PHP 腳本的編譯結果快取在記憶體中，避免每次請求都重新解析 PHP 檔案。正確設定後，PHP 執行速度可以提升 3～5 倍。

php.ini 關鍵設定：
opcache.enable=1
opcache.memory_consumption=256
opcache.max_accelerated_files=20000
opcache.revalidate_freq=60

真實案例：優化前後數據對比

以下是我在 2025 年幫客戶操作的三個案例（已去識別化）：

網站類型優化前（行動版）優化後（行動版）主要改善措施
製造業官網PageSpeed 18 / LCP 9.2sPageSpeed 79 / LCP 2.3sWebP 轉換、CDN、OPcache
電商平台PageSpeed 23 / LCP 8.4sPageSpeed 81 / LCP 2.1s圖片 lazy load、JS Code Splitting、Nginx 快取
餐飲品牌官網PageSpeed 44 / CLS 0.38PageSpeed 88 / CLS 0.04字型預載、圖片尺寸設定、移除無用 CSS

常見的 Q&A

Q：我的網站 PageSpeed 分數已經 70 分了，還需要繼續優化嗎？
A：70 分算是及格，但行動版如果低於 80 分，仍然有明顯的提升空間。特別是 LCP 若超過 2.5 秒，對 SEO 和用戶體驗都有實質負面影響。

Q：Cloudflare 免費版夠用嗎？
A：對流量低於每月 50 萬次請求的台灣中小型網站來說，Cloudflare 免費版完全夠用。它提供的 CDN、DDoS 防護和 SSL 憑證，已經能解決大多數問題。

Q：用 WordPress 的網站，優化有限制嗎？
A：WordPress 本身沒什麼限制，問題通常出在外掛太多或主題太肥。搭配 LiteSpeed Cache（需要 LiteSpeed 伺服器）或 WP Rocket，配合主機端的 Redis，效果非常好。