Google 在 2021 年正式把 Core Web Vitals 納入排名因素。
這代表一件事：網站速度不再只是用戶體驗問題，而是直接影響你在搜尋結果頁面排名的技術指標。
兩篇內容品質相近的文章，速度快的那個在其他條件相同時會排得更前面。速度慢不只讓讀者等待，也讓 Google 降低你的排名優先級。
這篇文章給你一份技術檢查清單，不需要工程師背景也能執行大部分項目，從診斷問題到具體優化動作，逐步拆解。
先診斷，再優化
在做任何改動之前，先用工具確認你的網站目前的狀況和問題所在。沒有診斷就開始優化，很可能花了時間處理不是最影響你排名的問題。
Google PageSpeed Insights
免費，直接輸入網址，會分別給出手機版和桌機版的速度分數，以及具體的問題清單和優化建議。
重點看兩個分數：手機版分數和桌機版分數。手機版通常比桌機版低，因為行動裝置的處理能力和網路速度限制更多。Google 的排名演算法以手機版為主要評估依據，手機版速度的優先級高於桌機版。
分數的參考標準：90 分以上是良好，50 到 89 分需要改善，50 分以下需要立刻處理。
Google Search Console 的 Core Web Vitals 報告
如果你的網站已經有一定流量，Search Console 裡的 Core Web Vitals 報告會顯示哪些頁面有速度問題，以及問題的嚴重程度。
這個報告的好處是基於真實用戶數據，而不是模擬測試，更能反映實際使用情況。
GTmetrix
提供比 PageSpeed Insights 更詳細的瀑布圖分析，可以看到每個資源的載入時間，找出哪個檔案是速度瓶頸。免費版夠用。
Core Web Vitals 三個核心指標
Google 用三個指標評估網站速度和使用體驗，理解這三個指標是做速度優化的基礎。
LCP（Largest Contentful Paint）：最大內容繪製
衡量頁面主要內容載入完成的時間。通常是主要圖片或最大的文字區塊。
目標：2.5 秒以內為良好，超過 4 秒為差。
LCP 差的常見原因：主要圖片檔案太大、伺服器回應速度慢、重要資源被其他資源阻擋載入。
FID（First Input Delay）：首次輸入延遲 / INP（Interaction to Next Paint）
衡量用戶第一次和頁面互動（例如點擊按鈕）到頁面回應的時間。Google 在 2024 年用 INP 取代 FID，INP 衡量的是整個使用過程中所有互動的反應速度，不只是第一次。
目標：INP 200 毫秒以內為良好，超過 500 毫秒為差。
INP 差的常見原因：JavaScript 執行時間太長、第三方腳本影響主線程。
CLS（Cumulative Layout Shift）：累計版面配置位移
衡量頁面載入過程中元素移動的程度。你一定有過這種體驗：準備點一個按鈕，頁面突然跳動，點到了別的東西。CLS 衡量的就是這種不穩定性。
目標：0.1 以內為良好，超過 0.25 為差。
CLS 差的常見原因：圖片沒有設定尺寸、廣告或嵌入內容動態載入推擠版面、字體載入前後的版面跳動。
第一類：圖片優化
圖片通常是網頁檔案大小的最大來源，也是速度優化效果最明顯的切入點。
格式轉換
把圖片從 JPG 或 PNG 轉換成 WebP 格式。WebP 是 Google 開發的圖片格式，同樣的視覺品質下，檔案大小比 JPG 小 25% 到 35%，比 PNG 小更多。
大多數現代瀏覽器都支援 WebP。如果你用 WordPress，安裝 ShortPixel 或 Smush 等外掛可以自動轉換。
尺寸壓縮
上傳圖片之前，先把尺寸縮小到實際顯示大小。一張 3000×2000 像素的照片，顯示在文章裡只需要 800×600 像素，上傳原始尺寸是在浪費頻寬。
壓縮工具：TinyPNG（免費線上工具）、Squoosh（Google 開發的免費工具，可以比較壓縮前後的品質）。
延遲載入（Lazy Loading）
頁面裡在螢幕以外的圖片，不需要在頁面載入時就全部載入，等用戶滾動到那個位置才載入就好。
HTML 的做法：在 img 標籤加上 loading="lazy"。WordPress 用戶大多數主題已經預設開啟，確認一下設定。
設定圖片尺寸屬性
每張圖片都要在 HTML 裡明確設定 width 和 height 屬性，告訴瀏覽器這張圖片佔多少空間，這樣頁面可以在圖片載入完成之前就預留位置，避免版面跳動，改善 CLS 分數。
第二類：程式碼優化
壓縮 HTML、CSS、JavaScript
程式碼檔案裡有很多對電腦來說不必要的空白、換行、和注釋。壓縮（Minify）就是把這些去掉，讓檔案更小。
WordPress 用戶：WP Rocket 或 LiteSpeed Cache 等快取外掛通常包含這個功能。靜態網站用戶：大多數建站工具（Webflow、Hugo 等）在部署時會自動壓縮。
移除阻擋渲染的資源
瀏覽器在載入頁面時，如果遇到 CSS 或 JavaScript 檔案，會暫停渲染頁面，等這些檔案下載完成才繼續。這叫做「阻擋渲染」，會直接推高 LCP。
處理方式：把非必要的 JavaScript 設定為延遲載入（defer 或 async），讓頁面的主要內容先呈現給用戶，不需要的腳本等後面再執行。
減少第三方腳本
每個你加到網站上的第三方工具（聊天機器人、熱圖工具、廣告代碼、社群分享按鈕）都會增加 HTTP 請求和 JavaScript 執行時間。
定期審查你的網站上有哪些第三方腳本，移除不再使用的，把必要的腳本設定為延遲載入。
第三類：伺服器和快取優化
選擇合適的主機
共享主機的伺服器回應速度通常比較慢，因為多個網站共用同一台伺服器的資源。如果你的網站已經有一定流量，考慮升級到 VPS 或使用專門的 WordPress 主機（例如 Kinsta、WP Engine）。
開啟瀏覽器快取
讓瀏覽器把你的網站資源（CSS、JavaScript、圖片）存在本地快取，下次訪客回來時不需要重新下載，可以直接從快取讀取，速度明顯更快。
WordPress 用戶：快取外掛（WP Rocket、W3 Total Cache）可以設定。其他平台：在伺服器設定或 .htaccess 檔案裡加入快取規則。
使用 CDN（內容傳遞網路）
CDN 把你的網站靜態資源複製到全球各地的伺服器，訪客從最近的伺服器節點取得資源，減少傳輸距離，速度更快。
對台灣網站來說，如果你的讀者主要在台灣，但主機在美國，使用 CDN 可以明顯改善台灣用戶的載入速度。Cloudflare 有免費方案，是最容易入門的選擇。
開啟 GZIP 壓縮
GZIP 是一種伺服器端的壓縮技術，在傳輸 HTML、CSS、JavaScript 檔案時把它們壓縮，到了瀏覽器再解壓縮，可以減少傳輸的資料量。
確認你的主機有沒有開啟 GZIP：用 GTmetrix 跑一次測試，報告裡會顯示是否已經啟用。
第四類：手機版的特別注意事項
Google 以手機版為主要排名依據，手機版的速度優化有幾個特別需要注意的地方。
Viewport 設定
確認你的網站有正確設定 viewport meta 標籤：<meta name="viewport" content="width=device-width, initial-scale=1">。沒有這個設定，手機瀏覽器不知道應該以手機螢幕寬度顯示頁面。
觸控目標大小
按鈕和連結的點擊區域要足夠大，建議至少 48×48 像素。太小的觸控目標讓手機用戶容易點錯，影響使用體驗，Google 在手機版評分裡也會考量這個因素。
字體大小
手機版的內文字體大小建議至少 16px，低於這個大小用戶需要縮放才能閱讀，Google 會在手機版評分裡扣分。
優化的優先順序
如果你現在面對一長串的速度問題，不知道從哪裡開始，用這個優先順序：
第一優先：圖片優化。效果最明顯、技術門檻最低、幾乎所有網站都有改善空間。
第二優先：快取設定。開啟瀏覽器快取和伺服器快取，對回訪者的速度改善效果顯著。
第三優先：移除不必要的第三方腳本。找出你其實沒在用的工具，移除它們的腳本。
第四優先：主機升級和 CDN。如果前三步做完速度還是不理想，才考慮基礎建設的升級。
程式碼層面的優化（壓縮、阻擋渲染）通常需要工程師協助或對建站平台有一定熟悉度，放在最後處理。
持續監控，不只是一次性優化
速度優化不是做一次就結束的工作。每次你在網站上加入新的外掛、新的第三方工具、或新的圖片，速度都可能受到影響。
建議每季用 PageSpeed Insights 跑一次測試，確認分數沒有明顯退步。如果 Search Console 的 Core Web Vitals 報告出現新的警告，立刻處理，不要等到累積成嚴重問題。
網站速度改善之後，下一步是內部連結架構的優化，參考：內部連結 SEO 策略：權重分配與主題集群的架構設計
SEO 文章發布前的完整檢查，參考：SEO 文章優化：標題、H2、內部連結的檢查清單