一、網站速度為什麼是 SEO 排名的隱形殺手
Google 在 2021 年正式將 Core Web Vitals（核心網頁指標）納入排名因素，這意味著網站載入速度不再只是「使用者體驗」的問題，而是直接影響搜尋排名的硬指標。根據 Google 官方數據，當頁面載入時間從 1 秒增加到 3 秒，跳出率會上升 32%；從 1 秒增加到 5 秒，跳出率更飆升至 90%。
在實務上，許多企業花了大量預算在 SEO 關鍵字優化和內容行銷上，卻忽略了網站速度這個基礎環節。結果就是：內容品質明明不差，排名卻始終上不去。這篇文章將從 Core Web Vitals 三大指標出發，一步步拆解網站速度優化的實操方法，並點出企業最常犯的錯誤。
二、Core Web Vitals 三大指標完整拆解
Core Web Vitals 是 Google 用來衡量網頁使用者體驗的三個核心指標，每個指標都有明確的數值門檻。理解這三個指標的意義和計算方式，是進行速度優化的第一步。
1. LCP（Largest Contentful Paint）最大內容繪製
LCP 衡量的是頁面主要內容載入完成所需的時間。具體來說，它計算的是從使用者點擊連結到頁面上最大的可見元素（通常是主圖片或標題區塊）完成渲染的時間。Google 的標準是 LCP 應在 2.5 秒以內，超過 4 秒則被視為「差」。影響 LCP 的常見因素包括：伺服器回應時間過慢、圖片檔案過大、CSS 和 JavaScript 阻擋渲染等。
2. INP（Interaction to Next Paint）互動延遲
INP 在 2024 年 3 月正式取代了 FID（First Input Delay），成為衡量網頁互動回應速度的新指標。INP 計算的是使用者與頁面互動（點擊按鈕、選擇選單、輸入文字等）後，頁面做出視覺回應所需的時間。Google 的標準是 INP 應在 200 毫秒以內。與 FID 只測量第一次互動不同，INP 會追蹤整個瀏覽過程中所有互動的延遲，取最差的那次作為最終分數。
3. CLS（Cumulative Layout Shift）累計版面位移
CLS 衡量的是頁面載入過程中，元素意外移動的程度。最常見的情境是：你正準備點擊某個按鈕，結果頁面上方突然跳出一張圖片或廣告，把按鈕往下推，導致你點到了錯誤的位置。Google 的標準是 CLS 應低於 0.1。造成 CLS 的常見原因包括：圖片和影片沒有設定固定尺寸、動態載入的廣告區塊、以及 Web Font 載入時的文字閃動。
| 指標 | 衡量內容 | 良好標準 | 需改善 | 差 |
|---|---|---|---|---|
| LCP | 主要內容載入時間 | ≤ 2.5 秒 | 2.5 – 4 秒 | > 4 秒 |
| INP | 互動回應延遲 | ≤ 200 毫秒 | 200 – 500 毫秒 | > 500 毫秒 |
| CLS | 版面位移程度 | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
三、網站速度檢測工具實測比較
在動手優化之前，先用工具測出目前的基準數據是必要的步驟。以下是四款最常用的免費速度檢測工具，各有不同的適用場景。
1. Google PageSpeed Insights
這是 Google 官方提供的檢測工具，也是最具權威性的參考依據。它會同時顯示「實驗室數據」（模擬環境測試）和「實際使用者數據」（來自 Chrome 使用者的真實數據），並針對每個問題提供具體的改善建議。網址：pagespeed.web.dev。
2. GTmetrix
GTmetrix 提供更詳細的瀑布圖（Waterfall Chart），可以清楚看到每個資源的載入順序和時間。它還允許選擇不同的測試地點和瀏覽器，對於有海外客群的企業特別實用。免費版每天可測試有限次數。
3. WebPageTest
WebPageTest 是進階使用者的首選，它提供影片錄製功能，可以逐幀回放頁面載入過程，精確找出造成延遲的元素。它也支援多步驟測試，可以模擬使用者從首頁到結帳的完整流程。
4. Chrome DevTools（Lighthouse）
Chrome 瀏覽器內建的開發者工具中就包含 Lighthouse 審核功能，可以在本機環境直接測試。優點是不需要將網站公開就能測試，適合開發階段使用。按 F12 開啟 DevTools，切換到 Lighthouse 分頁即可執行。
四、圖片優化：最容易見效的速度提升手段
根據 HTTP Archive 的統計，圖片平均佔網頁總大小的 40% 以上。這意味著只要把圖片優化做好，就能立即感受到明顯的速度提升。
1. 選擇正確的圖片格式
WebP 格式在相同畫質下，檔案大小比 JPEG 小 25-35%，比 PNG 小 26%。目前所有主流瀏覽器都已支援 WebP。如果需要支援更舊的瀏覽器，可以使用 <picture> 標籤提供 WebP 和 JPEG 的雙重選項。AVIF 是更新的格式，壓縮率比 WebP 再高 20%，但瀏覽器支援度仍在擴展中。
2. 實施響應式圖片
使用 srcset 屬性為不同螢幕尺寸提供不同解析度的圖片。手機螢幕寬度通常只有 375-428 像素，沒有必要載入 1920 像素寬的桌面版圖片。透過 srcset，瀏覽器會自動選擇最適合當前裝置的圖片尺寸，大幅減少不必要的資料傳輸。
3. 啟用延遲載入（Lazy Loading）
對於首屏以下的圖片，加上 loading=”lazy” 屬性即可啟用瀏覽器原生的延遲載入功能。這樣瀏覽器只會在使用者捲動到圖片附近時才開始載入，避免一次性載入頁面上所有圖片。注意：首屏的主要圖片（LCP 元素）不應使用延遲載入，否則會拖慢 LCP 分數。
4. 設定圖片尺寸屬性
在 HTML 的 <img> 標籤中明確設定 width 和 height 屬性，讓瀏覽器在圖片載入前就能預留正確的空間，避免圖片載入後造成版面位移（影響 CLS 分數）。
五、前端效能優化六大關鍵步驟
除了圖片之外，CSS、JavaScript 和 HTML 的載入方式也會顯著影響網站速度。以下是六個前端優化的關鍵步驟。
1. 壓縮與合併 CSS/JS 檔案
使用工具（如 Terser、CSSNano）壓縮 CSS 和 JavaScript 檔案，移除空白、註解和不必要的字元。同時，將多個小檔案合併為較少的檔案，減少 HTTP 請求數量。
2. 移除未使用的 CSS 和 JavaScript
許多網站使用了大型的 CSS 框架（如 Bootstrap）或 JavaScript 函式庫，但實際上只用到其中一小部分功能。使用 Chrome DevTools 的 Coverage 工具可以找出未使用的程式碼，然後透過 Tree Shaking 或手動移除來減少檔案大小。
3. 延遲載入非關鍵 JavaScript
在 <script> 標籤中加上 defer 或 async 屬性，讓非關鍵的 JavaScript 不會阻擋頁面渲染。defer 會在 HTML 解析完成後才執行腳本，async 則會在下載完成後立即執行。一般建議對分析工具、社群分享按鈕等非核心功能使用 defer。
4. 啟用瀏覽器快取
透過設定 HTTP 標頭中的 Cache-Control，讓瀏覽器在使用者再次造訪時直接使用本地快取的資源，而不需要重新從伺服器下載。靜態資源（圖片、CSS、JS）通常可以設定較長的快取時間（如 1 年），搭配檔名中的版本號來處理更新。
5. 使用 CDN 加速
CDN（Content Delivery Network）會將網站的靜態資源複製到全球各地的節點伺服器上，讓使用者從最近的節點載入資源。對於有海外客群的台灣企業，CDN 的效果特別明顯。常見的 CDN 服務包括 Cloudflare（有免費方案）、AWS CloudFront 和 Google Cloud CDN。
6. 預先連線與預先載入
使用 <link rel=”preconnect”> 提前建立與第三方網域的連線（如 Google Fonts、分析工具），使用 <link rel=”preload”> 提前載入關鍵資源（如首屏字型和主要 CSS），可以有效縮短資源載入的等待時間。
六、伺服器端優化：容易被忽略的效能瓶頸
前端優化做得再好，如果伺服器回應時間（TTFB，Time to First Byte）過長，整體速度還是會受限。以下是伺服器端的優化重點。
1. 選擇適合的主機方案
共享主機的價格最低，但效能也最不穩定，因為多個網站共用同一台伺服器的資源。VPS（虛擬專用伺服器）提供獨立的運算資源，是中小企業的平衡選擇。雲端主機（如 AWS、GCP）則提供最高的彈性和擴展性。
2. 啟用伺服器端快取
對於使用 WordPress 的網站，安裝快取外掛（如 WP Rocket、W3 Total Cache）可以將動態生成的頁面轉換為靜態 HTML 快取，大幅減少伺服器的運算負擔。搭配 Object Cache（如 Redis）可以進一步加速資料庫查詢。
3. 啟用 Gzip 或 Brotli 壓縮
在伺服器端啟用 Gzip 或 Brotli 壓縮，可以將 HTML、CSS、JavaScript 等文字類型的資源壓縮 60-80%。Brotli 是 Google 開發的壓縮演算法，壓縮率比 Gzip 高 15-25%，目前所有主流瀏覽器都已支援。
七、WordPress 網站速度優化專屬建議
WordPress 是台灣中小企業最常使用的網站架設平台，但也因為外掛和佈景主題的濫用，成為速度問題的重災區。以下是針對 WordPress 的專屬優化建議。
首先，定期審查已安裝的外掛數量。根據經驗，每多安裝一個外掛，頁面載入時間平均增加 0.05 到 0.1 秒。建議將外掛數量控制在 20 個以內，並停用和刪除不再使用的外掛。其次，選擇輕量級的佈景主題。許多「多功能」佈景主題為了提供豐富的設計選項，內建了大量的 CSS 和 JavaScript，即使你只用到其中 10% 的功能，其餘 90% 的程式碼仍然會被載入。GeneratePress、Astra 和 Kadence 是目前公認效能最佳的 WordPress 佈景主題。
最後，將 WordPress、外掛和 PHP 版本保持在最新狀態。PHP 8.x 的執行速度比 PHP 7.x 快約 20-30%，這是不需要任何技術調整就能獲得的效能提升。
常見問題 FAQ
1. 網站速度優化需要花多少預算？
基礎的圖片壓縮和快取設定幾乎不需要額外費用，使用免費工具和外掛就能完成。如果需要專業的技術 SEO 優化（包含伺服器調校、程式碼重構），費用通常在每月 15,000 到 50,000 元之間，視網站規模和複雜度而定。
2. 網站速度優化多久能看到效果？
技術面的優化（如圖片壓縮、快取設定）通常在部署後立即見效。但 Google 重新爬取和更新 Core Web Vitals 數據需要 28 天的觀察期，因此對搜尋排名的影響通常在 1 到 3 個月後才會反映出來。
3. 行動版和桌面版的速度分數不同，該以哪個為準？
Google 目前採用行動優先索引（Mobile-First Indexing），因此行動版的速度分數更為重要。如果資源有限，應優先優化行動版的載入速度。
4. PageSpeed Insights 的分數一定要達到 100 分嗎？
不需要。PageSpeed Insights 的分數是參考指標，真正影響排名的是 Core Web Vitals 的三個指標是否達到「良好」門檻。許多排名第一的網站分數也只有 70-80 分，重要的是三個核心指標都在綠色範圍內。
5. 使用 CDN 會影響 SEO 嗎？
正確設定的 CDN 不會對 SEO 產生負面影響，反而會因為提升載入速度而有正面效果。關鍵是確保 CDN 的快取設定正確，不會導致舊版內容被長期快取。同時，確保 CDN 沒有改變網站的 URL 結構。
讓網站速度成為你的 SEO 競爭優勢
網站速度優化不是一次性的工作，而是需要持續監控和調整的長期任務。隨著網站內容增加、功能擴充，速度問題會不斷浮現。建議至少每季度用 PageSpeed Insights 做一次全面檢測，及時發現和處理新出現的效能瓶頸。
戰國策集團深耕數位行銷超過 26 年，在技術 SEO 領域累積了豐富的實戰經驗。從 Core Web Vitals 優化、SEO 整體策略規劃到AEO 內容優化，協助企業打造速度快、排名高、轉換好的網站。
選擇戰國策的五大優勢
- SEO關鍵字優化規劃 → 找出高潛力、高轉換率的詞庫，避免無效操作
- AI內容行銷優化 → 打造能被 Google 與 AI（ChatGPT、Perplexity）引用的結構化內容
- 技術 SEO → Schema、網站速度、行動體驗全面提升
- 外部連結建設 → 提升網站權重，建立長期穩定流量
- 跨國 SEO 佈局 → 不只台灣，包含美國SEO、馬來西亞SEO、新加坡SEO、印尼SEO，多語系全方位部署
