Google 的研究數據很殘酷：網站載入時間超過 3 秒，53% 的行動裝置訪客會直接離開。不是因為你的產品不好、價格不對，純粹是因為等太久。
更可怕的是，網站速度已經是 Google 排名的因素之一。速度慢不只流失客戶，連被找到的機會都在減少。
這篇文章，我們從 Google 的 Core Web Vitals 指標出發，一步步教你怎麼把網站速度優化到位。
一、Core Web Vitals：Google 在看什麼？
Core Web Vitals 是 Google 評估網站使用者體驗的三個核心指標：
- LCP（Largest Contentful Paint） — 最大內容繪製時間，也就是頁面主要內容顯示的速度。目標：2.5 秒以內
- INP（Interaction to Next Paint） — 互動到下一次繪製的時間，衡量網站回應使用者操作的速度。目標：200 毫秒以內
- CLS（Cumulative Layout Shift） — 累積版面位移，頁面載入時內容亂跳的程度。目標：低於 0.1
這三個指標直接影響 SEO 排名。在 HEY!BOSS 銀月數位顧問建置的每個網站，上線前都會確認這三個指標全部達標。
二、圖片優化：最容易得分的戰場
圖片通常占網頁總體積的 50-80%。如果你只能做一件速度優化的事，那就是優化圖片。
格式選擇
- WebP — 比 JPEG 小 25-35%，比 PNG 小 26%，畫質幾乎無差異。現代瀏覽器支援度已超過 97%
- AVIF — 比 WebP 更小，但瀏覽器支援度還在追趕中，建議搭配 fallback 使用
- SVG — Logo、圖示等向量圖形用 SVG，檔案小且放大不失真
尺寸控制
很多人直接把相機拍的 4000px 寬圖片放上網站。拜託不要。網站上的圖片寬度通常不超過 1200px，沒必要載入比螢幕大好幾倍的圖片。
Lazy Loading
首屏以下的圖片，使用 lazy loading（延遲載入）技術，等使用者捲動到可見範圍時才載入。HTML5 原生支援 loading="lazy" 屬性，連 JavaScript 都不用寫。
三、CDN：讓內容離使用者更近
CDN（Content Delivery Network，內容傳遞網路）把你的網站內容快取到全球各地的節點上。台北的使用者從台北的節點載入，紐約的使用者從紐約的節點載入，不用每次都跑回你的主機抓資料。
效果有多明顯？使用 CDN 後，頁面載入時間平均可以減少 40-60%。
常見的 CDN 服務：
- CloudFlare — 免費方案就很夠用，還附帶 DDoS 防護
- AWS CloudFront — 和 AWS 生態系無縫整合
- Fastly — 即時清除快取的能力特別強
四、程式碼層級的優化
圖片和 CDN 處理完之後，接下來看程式碼本身：
- CSS 壓縮與合併 — 移除空白、註解、未使用的樣式，減少檔案體積
- JavaScript 延遲載入 — 不是每個 JS 檔案都需要在頁面載入時立刻執行。用
defer或async延遲非關鍵腳本 - 減少 HTTP 請求 — 每一個 CSS、JS、圖片檔案都是一次 HTTP 請求。合併檔案、使用 CSS Sprites，能少一個請求就少一個
- 啟用 Gzip/Brotli 壓縮 — 伺服器端壓縮傳輸內容，文字類型資源可以壓縮 70-90%
五、HEY!BOSS 如何從第一天就確保速度
很多企業是網站做好了才開始想速度優化，那等於是房子蓋完了才想改地基。HEY!BOSS 的做法是從建站第一天就把速度優化寫進流程裡：
- 靜態優先 — 能用靜態 HTML/CSS 做的絕不用動態渲染，省掉伺服器運算時間
- 圖片自動處理 — 建站流程自動將圖片轉為 WebP、壓縮、設定 lazy loading
- 內建 CDN — 部署在 AWS 上的網站自動配置 CloudFront CDN
- 字型優化 — 使用
font-display: swap確保文字先用系統字型顯示，不會因為自訂字型載入慢而出現空白 - 自動化檢測 — 每次部署後自動跑 Lighthouse 評分，不達標就不上線
「速度不是功能，速度是生存條件。在 3 秒內打不開的網站，等於不存在。」
六、檢測你的網站速度
想知道你的網站現在速度如何？用這些免費工具自己測：
- Google PageSpeed Insights — 最權威的測速工具，直接顯示 Core Web Vitals 分數和改善建議
- GTmetrix — 提供瀑布圖（Waterfall），能看到每個資源的載入順序和時間
- WebPageTest — 可以選擇不同地區和裝置進行測試，最接近真實使用者體驗
如果你測出來的分數不理想，別慌。找到最大的瓶頸（通常是圖片），從那裡開始改，效果會最明顯。