網頁速度優化怎麼做？5 個步驟改善載入表現與 Core Web Vitals

網頁速度優化是指透過一連串調整，讓頁面更快載入、更快回應操作、畫面更穩定。讀者不會等一個載入緩慢的頁面，搜尋引擎也會參考頁面體驗。今篇文章會帶你了解如何先量度、再按優先順序一步步改善。

網頁速度為什麼和 SEO 有關

Google 的排名系統會參考頁面體驗，其中包括 Core Web Vitals 這類量度載入、互動與穩定性的指標。不過要先說清楚：速度只是眾多訊號之一，內容是否符合搜尋意圖仍然更重要，速度快也不能保證排名第一。真正的好處在於使用者體驗：頁面翻開得快，讀者更願意繼續瀏覽，也能降低跳出率，對網店的結帳流程或服務頁的詢問表單尤其明顯。

先看懂三個核心指標

Google 建議網站在頁面載入的第 75 百分位達到以下「良好」標準：

• LCP（最大內容繪製）：主要內容出現的時間，應在 2.5 秒內。
• INP（互動至下一次繪製）：頁面對點擊、輸入的回應速度，應在 200 毫秒內。
• CLS（累積版面位移）：頁面載入時元素跳動的程度，應低於 0.1。

量度時要分清楚兩種資料：實地資料（真實使用者的體驗）與實驗室資料（工具在固定條件下模擬）。實地資料更能反映實際情況，實驗室資料則適合用來找出問題與測試改動。

第一步：建立基準並找出瓶頸

先用 PageSpeed Insights 檢查重要頁面，並在 Google Search Console 的 Core Web Vitals 報表找出整組表現較差的頁面。建議挑選最重要的三類頁面：首頁、流量最高的內容頁，以及與收入直接相關的頁面（例如產品頁或服務頁），記錄現有數值，作為日後比較的基準。

第二步：優化圖片與影片

圖片通常是頁面中最大的資源，也常常是 LCP 的來源。先壓縮圖片、選用 WebP 或 AVIF 等較新格式、按實際顯示尺寸提供圖片，並在 HTML 指定 width 與 height 預留空間以減少跳動。首屏主圖不要延遲載入，頁面下方的圖片則可以延遲載入。更完整的做法可參考圖片 SEO 教學。影片則應避免自動下載大型檔案，可以先顯示封面圖，等讀者按下播放再載入。

第三步：減少與延後 JavaScript 和 CSS

瀏覽器在處理完必要的 CSS 和 JavaScript 之前，往往無法畫出完整頁面，而過多的指令碼也會拖慢互動回應。可以從這些方向著手：

• 移除沒有用到的外掛程式、佈局元件與舊程式碼。
• 對非首屏必須的 JavaScript 使用 defer 或 async，避免阻擋頁面顯示。
• 壓縮並合併適合的檔案，並將首屏所需的 CSS 優先載入。
• 把耗時的長任務拆開，改善 INP。

第四步：改善伺服器回應與快取

如果伺服器回應很慢，前端再怎麼調整也有限。可以從啟用壓縮（例如 Brotli 或 gzip）、設定快取規則、使用內容傳遞網路（CDN）、為資料庫查詢加上快取等方向改善。對以 CMS 建立的網站，整頁快取通常能帶來明顯改善。

第五步：控制第三方指令碼與字型

廣告、追蹤碼、即時聊天工具和社群嵌入元件，往往是頁面變慢的隱藏原因。定期檢視哪些工具仍在使用，不再需要的就移除，其餘的延後載入。字型方面，只載入實際用到的字重，並使用 font-display 設定，避免文字長時間不顯示。廣告與嵌入元件也要預留固定空間，避免內容突然被推開。

常見錯誤

• 只看工具分數，忽略真實使用者的實地資料。
• 一次改動太多，無法判斷哪個調整真正有效。
• 為了速度刪掉對讀者有價值的內容或圖片。
• 把首屏主圖也設為延遲載入，反而拖慢 LCP。
• 改版後沒有再次檢查，結果新的模板又帶來新的問題。

實際例子：一間網店的優先順序

一間網店發現產品頁的 LCP 偏慢。檢查後，原因是主圖未經壓縮，且頁面載入了多個已不再使用的追蹤腳本。網店先壓縮並改用 WebP 主圖，再移除不再需要的腳本，每次改動後重新量度。以影響最大、最容易做到的項目為先，比起一次重建整個網站更有效率。

總結

網頁速度優化的順序是：先量度、再處理圖片、精簡指令碼、改善伺服器，最後控制第三方工具，並持續追蹤數值。如果想一併檢查抓取、索引與速度問題，可以配合技術 SEO 審核；發佈新文章前，也可以用站內 SEO 檢查清單確認基本項目。