網站速度優化：Core Web Vitals 怎麼過關
你有沒有過這種經驗：用手機點開一個連結，畫面卡了兩三秒還是一片空白，手指就直接按返回了。你會這樣，你的客人也會這樣。差別只在於，你跳掉的是別人的網站，他們跳掉的是你的網站。
網站速度這件事，老闆常常無感，因為自己的網站早就被瀏覽器快取了，每次打開都很快。但對第一次造訪的客人來說，那個漫長的空白畫面是真實存在的。Google 在 2021 年把 Core Web Vitals 正式納入排名因素之後，速度就不再只是「使用者體驗」的問題，而是直接牽動你能不能被搜尋到、能不能成交的生意問題。這篇我們把這三個聽起來很玄的指標拆開來講，告訴你怎麼測、卡在哪、怎麼一項一項救起來。
什麼是 Core Web Vitals？
Core Web Vitals 是 Google 用來衡量網頁實際體驗的三個核心指標，分別是 LCP（最大內容繪製）、INP（互動到下一次繪製）和 CLS（累計版面位移）。簡單講，它們各自回答三個問題：畫面多快出現、按下去多快有反應、畫面會不會亂跳。
這三個指標之所以重要，是因為它們不像「總載入時間」那種籠統的數字，而是貼著真實使用者的感受設計的。LCP（Largest Contentful Paint） 量的是頁面最大那塊內容（通常是主視覺圖或標題）多久才畫出來，標準是 2.5 秒以內算好。INP（Interaction to Next Paint） 量的是使用者點了按鈕、填了欄位之後，畫面多久才回應，200 毫秒以內算好——這個指標在 2024 年三月取代了原本的 FID，變得更嚴格。CLS（Cumulative Layout Shift） 量的是版面有沒有亂跳，比如你正要點按鈕，結果上面突然冒出一張廣告把內容往下擠，分數要在 0.1 以下才算過關。
要特別提醒的是，Google 看的是真實使用者的數據（也就是 CrUX，Chrome 使用者體驗報告），不是你在自己電腦上測一次的結果。所以就算你用桌機測起來飛快，只要多數客人是用網路較差的手機開，數據一樣會難看。
怎麼測自己的網站速度？
最直接的工具是 Google 官方的 PageSpeed Insights（pagespeed.web.dev），把網址貼進去，幾秒鐘就會給你手機版和桌機版的分數，以及三個 Core Web Vitals 指標的實測結果。它免費、不用裝任何東西，是檢測的第一站。
打開報告之後，你會看到上半部是「實際使用者體驗」（綠色代表過關、橘色要改進、紅色不及格），這一段抓的是真實訪客的 CrUX 數據；下半部是「實驗室數據」加上一份改善建議清單，會具體告訴你哪幾張圖太大、哪些 JavaScript 拖慢了速度、哪段 CSS 阻塞了渲染。我們的習慣是先看實際數據判斷嚴不嚴重，再照著下面的建議清單一項一項處理。
除了 PageSpeed Insights，還有幾個工具值得搭配使用：Google Search Console 裡有「網站使用體驗核心指標」報告，能看到整站哪些頁面群組不及格；Chrome 開發者工具的 Lighthouse 適合開發時邊改邊測；WebPageTest 則能模擬不同地區、不同網速的載入瀑布圖，找問題特別細。對中小企業來說，先把 PageSpeed Insights 和 Search Console 這兩個免費工具用熟，就足夠抓出八成的問題了。
網站變慢，通常卡在哪裡？
九成的速度問題都集中在四個地方：圖片太肥、JavaScript 太多太雜、沒有設快取、主機或字型載入拖後腿。先搞清楚自己卡在哪一塊，才不會瞎忙。
我們實際幫客戶做速度健檢，最常見的元兇排第一名永遠是圖片。很多老闆直接把單眼相機拍的、單張五六 MB 的原圖丟上網站，一個首頁堆了十幾張，光圖片就讓頁面胖到二三十 MB，手機族開起來當然慢如牛步。第二名是塞太多第三方腳本：客服小工具、五六個追蹤碼、社群外掛、廣告像素，每一個都要額外連線、額外下載，INP 就是被這些東西拖垮的。第三名是完全沒設快取，導致每個訪客每次來都要重新下載一整套資源。第四名比較隱性，是字型載入造成的——網頁等中文字型下載完才顯示文字，或是字型一換造成版面跳動，CLS 就爛在這裡。
知道瓶頸在哪之後，接下來就是對症下藥。下面我們從最有感的圖片開始，一項一項講怎麼救。
圖片要怎麼優化才有感？
圖片優化只有三招，但威力最大：壓縮、改用新格式、設定正確尺寸與延遲載入。光是把圖片處理好，很多網站的 LCP 就能從紅色直接跳到綠色。
第一招是壓縮並改用 WebP 或 AVIF 格式。傳統的 JPG、PNG 在同樣畫質下，檔案往往比 WebP 大上三到四成。我們處理過一個餐廳官網，把首頁那張橫幅大圖從 4.2 MB 的 JPG 轉成 WebP，瞬間降到 480 KB，畫質肉眼幾乎看不出差別，但 LCP 直接從 5.8 秒砍到 2.1 秒。第二招是給對尺寸：不要把 4000 像素寬的原圖塞進一個只有 800 像素寬的版位，瀏覽器還是會下載整張原圖。配合 srcset 讓不同裝置載入不同尺寸，手機就不用扛桌機才需要的大圖。第三招是延遲載入（lazy loading）：第一屏看得到的圖正常載入，下面捲動才看得到的圖等捲到再載，這樣首屏速度會明顯變快。
如果你用的是 WordPress 或建站平台，多數都有現成的圖片優化外掛或內建功能可以一鍵搞定，不一定要手動處理。但要記住一個原則：圖片永遠是速度優化的第一優先，因為它通常就是那個 LCP 元素本身。
快取、CDN 跟字型，怎麼設才對？
這三項是進階但效益很高的優化：快取讓回訪變快、CDN 讓遠地訪客變快、字型優化避免文字延遲和版面跳動。設定一次，長期受用。
瀏覽器快取的概念是，讓訪客第一次下載過的 CSS、JS、圖片這些不太會變的資源存在他的瀏覽器裡，下次再來就直接用本機的，不用重新下載。做法是在伺服器設定這些靜態檔案的快取有效期（例如一個月、甚至一年），通常透過 .htaccess、Nginx 設定或 CDN 後台就能開。我們幫一個內容型網站開啟快取後，回訪用戶的頁面載入時間平均縮短了 62%，因為大部分資源都不用再抓了。
CDN（內容傳遞網路） 解決的是「距離」問題。如果你的主機在台灣，但有客人從美國連進來，資料得繞半個地球，自然慢。CDN 會把你的網站資源複製到全球各地的節點，訪客就近抓取。像 Cloudflare 有免費方案，對中小企業來說很夠用，順便還能擋一些攻擊。字型優化則要注意兩件事：一是用 font-display: swap 讓文字先用系統字顯示、字型載入完再替換，避免一片空白；二是中文字型檔很大（動輒好幾 MB），盡量做子集化（只保留會用到的字）或乾脆優先用系統內建字型，能省下大量載入時間，也避免 CLS。
這些設定如果你不熟，動到伺服器層級確實有點門檻。要是網站速度長期卡關、自己又調不動，找一個懂效能優化的網站改版與優化服務團隊處理，通常比自己摸索半天有效率。
網站速度真的會影響生意嗎？
會，而且影響比多數人想的更大。速度直接牽動兩件事：搜尋排名和轉換率，兩者都跟你賺多少錢有關。
先講排名。Google 已經明確把 Core Web Vitals 列為排名訊號，雖然它不是唯一因素，但在內容品質相近的情況下，速度快的頁面就是更有機會排前面。更關鍵的是，現在 Google 是行動優先索引，它主要看你手機版的表現來決定排名，所以手機速度爛，整體排名都會受拖累。
再講轉換。Google 自己的研究指出，當行動網頁載入時間從 1 秒拉長到 3 秒，跳出率會提高 32%；拉到 5 秒，跳出率暴增超過 90%。換句話說，客人根本還沒看到你的產品就走了。我們手上有個電商客戶的實例特別有說服力：他們的商品頁原本 LCP 要 4.5 秒，我們花了兩週做圖片壓縮、開快取、上 CDN，把 LCP 壓到 1.9 秒，結果接下來一個月，加入購物車的比率提升了 18%、整體轉換率上升約 11%，而我們連一個字的文案都沒動。速度，有時候就是這麼直接的生意。
值得一提的是，速度優化跟其他基本功是互相加成的。把架構打好、把速度做快，這些都是讓網站能長期帶來流量的地基；速度與排名的技術細節，也可以延伸看 SEO 分類裡的Core Web Vitals 優化教學。
結語：速度是看不見的競爭力
網站速度這件事的尷尬在於——做好了沒人會誇你，因為快是理所當然；但做不好，客人不會跟你抱怨，他們只會默默離開，連解釋的機會都不給你。
所以與其等到流量掉了才回頭救火，不如把速度當成網站的基本體質來顧。建議的做法很簡單：先用 PageSpeed Insights 測一次現況，從最肥的圖片開始處理，再依序把快取、CDN、字型載入補齊，每改一項就回測一次，看著分數一格格轉綠，很有成就感。
速度只是好網站的其中一塊。如果你正準備從頭做一個網站，想搞清楚它在整條建站流程裡的位置，建議從網站架設完整指南看起；想讓網站從架構上就對搜尋引擎友善，再接著看SEO 友善的網站架構。把這些地基打穩，網站才跑得又快又遠。