網站速度與 CORE WEB VITALS。
緩慢或畫面跳動的網站，在顧客還沒讀到一個字前就把人趕走了。Google 用三項 Core Web Vitals 來衡量這種體驗。以下說明它們的意思、如何免費測試您的網站，以及對小商家網站通常最重要的改善方法。
最近的變動
- Google 把劫持返回按鈕視為垃圾行為 — 封鎖瀏覽器返回按鈕現已被列為一種垃圾內容手法。
本指南說明不會改變的原則。部落格則隨時追蹤最新變動。
三項指標
Google 將 Core Web Vitals 描述為一組衡量真實使用者在載入效能、互動性和視覺穩定性方面體驗的指標。2Interaction to Next Paint（INP）已於 2024 年取代 First Input Delay，成為 Core Web Vitals 之一。1
| 指標 | 測量內容 | 良好 |
|---|---|---|
| Largest Contentful Paint（LCP） | 載入：主要內容何時出現 [1] | 2.5 秒或以下 [1][3] |
| Interaction to Next Paint（INP） | 回應速度：網頁對點按、點擊和輸入的反應有多快 [1] | 200 毫秒或以下 [1][3] |
| Cumulative Layout Shift（CLS） | 視覺穩定性：網頁在載入時跳動的程度 [1] | 0.1 或以下 [1][3] |
web.dev 建議以頁面載入的第 75 百分位數測量，並分別測量手機和桌面電腦。1Search Console 將 LCP 不超過 4 秒、INP 不超過 500 毫秒、CLS 不超過 0.25 評為“需要改善”，超過則評為“不良”。3
會影響排名嗎？
Google 表示，良好的 Core Web Vitals 與其核心排名系統想要獎勵的方向一致，是整體網頁體驗的一部分。2這只是眾多考量因素之一。一個內容單薄或沒有幫助的快速網頁，不會排在更好的答案之前，所以請把速度當作留住已經爭取到的訪客的方法。
如何測試您的網站
| 工具 | 顯示內容 | 注意事項 |
|---|---|---|
| PageSpeed Insights | 來自真實 Chrome 使用者的實際資料（CrUX），加上 Lighthouse 的實驗室資料，分手機和桌面電腦 [4] | 實際資料涵蓋過去 28 天，所以修正後需要一段時間才會反映；實驗室和實際結果可能不一致 [4] |
| Search Console Core Web Vitals 報告 | 根據真實使用者資料，把相似網址分組，評為良好、需要改善或不良 [3] | CrUX 資料不足時，小型網站可能會看到“沒有可用資料” [3] |
還沒有實際資料？以 PageSpeed Insights 的實驗室結果作為參考，並測試最重要的頁面：首頁、服務和聯絡頁面。
小商家常見的改善方法
- 縮小圖片。壓縮照片並使用新式圖片格式。5直接從手機相機拿出來的照片，通常比螢幕需要的大得多。
- 主視覺圖片不要延遲載入。web.dev 表示絕不要延遲載入 LCP 圖片，而
fetchpriority屬性可以告訴瀏覽器哪些資源最重要。5 - 為圖片和嵌入內容指定尺寸。加入
width和height屬性，或用 CSSaspect-ratio預留空間，避免內容移位。6 - 規劃網頁字型。字型載入時的替換可能讓文字移動；請選擇相近的備用字型。6
- 減少第三方指令碼。聊天小工具、追蹤器和嵌入內容加起來負擔不小。web.dev 表示，如果指令碼沒有明確價值就移除，並以非同步方式載入第三方指令碼，除非它們必須在網頁顯示前執行。7
- 讓點擊處理程序保持輕量。針對 INP，web.dev 建議在事件回呼中盡量少做工作，並拆分長時間執行的工作。8
- 使用可靠的主機和 CDN。web.dev 建議使用內容傳遞網路，縮短檔案傳輸的距離。5
速度只是好用網站的一部分。我們的網站無障礙指南涵蓋另一半：使用鍵盤、螢幕閱讀器或縮放功能的人。
常見問題
我的 PageSpeed 分數很低，但 Search Console 顯示良好。哪個才對？
兩者都可能是對的。分數來自模擬的實驗室測試；Search Console 使用的是一段時間內真實訪客的資料。Google 說明實驗室資料和實際資料可能有差異。4
我需要拿到滿分 100 嗎？
不需要。讓重要頁面達到上述“良好”門檻，然後把時間花在內容和顧客身上。
網站更快就保證有更多潛在顧客嗎？
沒有人能保證。速度能減少阻力；真正促成生意的，仍然是您的方案、評價和跟進。
資料來源
- web.dev，Web Vitals。
- Google 搜尋中心，Understanding Core Web Vitals and Google search results（了解 Core Web Vitals 與 Google 搜尋結果）。
- Search Console 說明，Core Web Vitals report（Core Web Vitals 報告）。
- PageSpeed Insights 文件，About PageSpeed Insights（關於 PageSpeed Insights）。
- web.dev，Optimize Largest Contentful Paint（優化 LCP）。
- web.dev，Optimize Cumulative Layout Shift（優化 CLS）。
- web.dev，Efficiently load third-party JavaScript（有效率地載入第三方 JavaScript）。
- web.dev，Optimize Interaction to Next Paint（優化 INP）。
繼續閱讀
預約策略通話
不確定網站為什麼感覺很慢？把連結傳給我們，我們會和您一起看看是什麼拖慢了它。