客人點開網站，畫面白了好幾秒；好不容易出現了，正要點按鈕，版面又往下跳。這種網站不用等到客人抱怨，很多人早就按上一頁離開了。
網站變慢時，很多人第一個反應是「主機不夠力，要升級」。實際上，主機只是其中一個可能，而且常常不是第一個該動的地方。這篇整理網站速度怎麼檢測、三個核心指標怎麼看，以及一般建議的改善順序：先處理影響最大、花費最少的項目，最後才考慮主機。
網站慢不慢，先用數據確認
自己覺得網站慢，可能是當下網路不好；自己覺得很快，可能是因為瀏覽器已經存了快取。判斷網站速度，要看數據，而且要分手機和電腦看。
Google 的速度數據分成兩種：
- 實際使用者資料：來自真實造訪者的 Chrome 瀏覽器，反映過去 28 天的實際體驗。這是 Google 搜尋參考的數據，但網站要有一定的流量才會有。
- 實驗室資料：在模擬環境裡測一次的結果，數字每次會有些差異，適合用來找出問題在哪裡、修改後馬上驗證。
兩種數據都有用。實際使用者資料告訴你「客人實際感受如何」，實驗室資料告訴你「問題可能出在哪」。
看懂 3 個核心指標
Google 用 Core Web Vitals 衡量網頁體驗，包含三個指標：
| 指標 | 衡量什麼 | 良好 | 需要改善 | 不良 |
|---|---|---|---|---|
| LCP 最大內容繪製 | 主要內容多快出現 | 2.5 秒以下 | 4 秒以下 | 超過 4 秒 |
| INP | 點擊後多快有反應 | 200 毫秒以下 | 500 毫秒以下 | 超過 500 毫秒 |
| CLS 累計版面配置位移 | 畫面會不會亂跳 | 0.1 以下 | 0.25 以下 | 超過 0.25 |
用生活化的方式理解：
- LCP：點開網頁後，最大的那張圖或那段文字多久出現。品牌網站通常是首頁的主視覺。
- INP：點按鈕、開選單、加入購物車之後，畫面多快有反應。
- CLS：載入過程中，版面會不會突然移動。例如正要點「立即預約」，上面突然插進一張圖，結果點到別的東西。
三個指標都達到「良好」，才算通過 Core Web Vitals。
3 個免費的檢測方法
Google 的免費工具，輸入網址就能測。上方是實際使用者資料，下方是實驗室資料的效能分數（90 分以上為良好，50～89 分需要改善，50 分以下不良），以及具體的改善建議。記得切換「行動裝置」和「電腦」分開看。
2. Search Console 的 Core Web Vitals 報告
PageSpeed Insights 一次測一頁，Search Console 則是整站一起看，把體驗相似的網頁分成一組，標示良好、需要改善或不良。流量少的網站可能顯示沒有資料，這是正常的。報表怎麼看可以參考本批〈Google Search Console 教學〉。
3. 自己用手機實際走一遍
工具之外，拿自己的手機，關掉 Wi-Fi 用行動網路打開網站，從首頁點到服務頁、商品頁、聯絡表單。哪裡等最久、哪裡會跳，自己最有感覺。
建議一次測 3～5 頁就好：首頁、流量最多的頁面、最重要的服務或商品頁。不用每一頁都測。
改善順序：從影響大、花費少的開始
以下是一般建議的處理順序。每做完一步重新測一次，看數字有沒有改善，再決定要不要做下一步。
第 1 步：處理圖片
對大部分品牌網站來說，圖片是最常見、也最容易處理的速度問題。Google 的圖片 SEO 說明也提到，圖片通常佔網頁大部分的容量，可能拖慢載入速度。
- 尺寸不要過大：手機拍的照片或相機原檔，寬度常常是網頁需要的好幾倍。上傳前先縮到實際顯示需要的大小。
- 用新的圖片格式：WebP、AVIF 這類格式，在同樣畫質下檔案通常比 JPEG、PNG 小。Google 搜尋都有支援。
- 依螢幕提供不同大小：手機和電腦顯示不同尺寸的圖片，手機不用載入電腦版的大圖。
- 設定圖片的長寬：讓瀏覽器先留好位置，圖片載入時版面才不會跳動，這也會改善 CLS。
- 首屏主視覺不要延遲載入：畫面下方的圖片可以等捲到再載入，但第一屏的主視覺要優先載入，否則 LCP 反而變慢。
有些網站系統上傳時會自動壓縮、轉檔，有些不會。不確定自己的網站有沒有，可以問網站廠商，或上傳前自己先用免費工具壓縮。
第 2 步：精簡首屏
首屏是客人點開網站第一眼看到的畫面，LCP 量的通常就是這裡。常見拖慢首屏的設計：
- 全螢幕背景影片：影片檔案大，手機上特別明顯。如果影片不是品牌一定要的元素，可以改成一張好照片。
- 多張圖片的輪播：輪播的每一張圖都要載入，而且客人很少看到第三張以後。重要訊息放第一張，或改成單張主視覺。
- 太多種字型：每多一種字型、一種字重，就多一個要下載的檔案。中文字型檔特別大，全站用一到兩種就好。
- 進場動畫：主要內容要等動畫跑完才出現，客人就得多等。
這一步常常牽涉到設計取捨，可以和網站廠商討論：哪些效果真的有幫助，哪些可以拿掉。
第 3 步：清理外部程式碼
網站上除了自己的內容，常常還放了很多外部的程式碼：GA4、廣告追蹤碼、聊天視窗、IG 動態牆、嵌入的影片和地圖、彈出視窗。每一個都會佔用載入時間，也可能讓點擊後的反應變慢，影響 INP。
做法很簡單：列出網站上所有的外部工具，一個一個問「現在還有在用嗎？」
- 已經停掉的廣告，追蹤碼還在不在？
- 試用過、後來沒用的聊天工具，有沒有移除？
- 首頁的 IG 動態牆，能不能改成一張圖加一個連結？
- 嵌入的 YouTube 影片和 Google 地圖，能不能改成點了才載入？
這一步通常不用花錢，但效果常常很明顯。
第 4 步：修正版面跳動
CLS 不良時，常見原因有：
- 圖片、影片、嵌入內容沒有預留空間
- 頂部的公告列、優惠訊息載入後才插進來
- 字型載入後，文字大小改變，把下面的內容推開
修正方式大多是幫這些元素先保留固定的高度和比例，屬於技術調整，交給網站廠商處理即可。你要做的是在手機上實際操作時，注意哪裡會跳，告訴對方是哪一頁、哪個位置。
第 5 步：最後才看主機
前面幾步都做過了，網站還是慢，特別是點開網頁後要等很久才開始出現東西，這時才比較可能是主機或系統的問題。可以考慮的方向包括：使用 CDN（把網站內容放在離訪客比較近的伺服器）、啟用快取、升級主機方案。
用架站平台或代管系統的網站，主機通常由平台負責，自己能調整的空間有限，可以直接把測試結果交給平台或網站廠商評估。主機的種類和怎麼選，可以參考本批〈網站主機是什麼？〉。
如果網站架構本身太舊，例如不是響應式設計、手機版是另外拼湊的，速度問題可能只是其中一個症狀。這時可以一起評估〈舊網站該翻新還是重做？〉。
不用追求 100 分
Google 的網頁體驗說明提到，排名系統會使用 Core Web Vitals，但取得良好成效不代表一定會排在前面，也不建議為了 SEO 一味追求滿分。Google 會盡量顯示最相關的內容，即使網頁體驗不夠好。
所以合理的目標是：手機版三個指標都達到「良好」，或至少沒有「不良」。達到之後，把時間花在內容和轉換上，效果會比把 85 分拉到 98 分更好。
網站速度常見問題
PageSpeed Insights 每次測的分數都不一樣，該相信哪一次？
實驗室資料每次在模擬環境測一次，網路和伺服器狀況不同，分數會上下浮動。可以連測兩三次看大概的範圍，更重要的是上方的實際使用者資料，那是過去 28 天真實造訪者的體驗。
網站速度會影響 SEO 嗎？
會，但不是最重要的因素。Google 的排名系統會使用 Core Web Vitals，但內容是否相關、有沒有回答搜尋者的問題，影響更大。速度比較像是基本門檻：太慢會拖累體驗，很快也不代表排名一定會好。
手機版很慢、電腦版很快，正常嗎？
很常見。手機的處理速度和網路通常比電腦慢，同樣的大圖、影片和程式碼，在手機上的影響更明顯。所以檢測時要以手機版為主，設計時也要以手機優先，可以參考〈RWD 響應式網站是什麼？〉。
多久要測一次速度？
每月例行檢查時測一次首頁和流量最多的頁面就好。另外，換了首頁主視覺、加了新的外部工具、上傳了一大批商品圖之後，也建議測一次。每月的其他檢查項目可以參考〈網站上線後每個月要做什麼？〉。
結論：先測、再改，最後才花錢
網站慢的時候，先用 PageSpeed Insights 和 Search Console 確認問題在哪個指標、哪幾頁，再照順序處理：圖片、首屏、外部程式碼、版面跳動，最後才考慮主機。前面幾步大多不用花錢，卻常常能解決大部分的問題。
目標不是 100 分，而是讓手機上的客人點開網站後，很快看到重點、按得到按鈕、畫面不會亂跳。
有架設網站的需求，歡迎跟 basedot 網頁設計聯繫。
