網頁效能指標

你的商品頁 SEO 做得再好、Meta Tags 寫得再漂亮，但如果頁面要 8 秒才載完——Google 會把你的排名往後丟。2021 年起，Google 把「網頁效能」正式納入排名因素。頁面太慢，不只使用者跑掉，排名也會掉。

Core Web Vitals — Google 的三大效能指標

Google 用三個指標來衡量使用者體驗：

指標	全名	衡量什麼	好的標準
LCP	Largest Contentful Paint	最大內容元素載入時間	≤ 2.5 秒
INP	Interaction to Next Paint	互動回應延遲	≤ 200 毫秒
CLS	Cumulative Layout Shift	版面位移累計分數	≤ 0.1

LCP — 最大內容多快出現

LCP 測量的是「頁面上最大的那個東西」什麼時候顯示出來。對電商來說，通常是商品主圖。

常見拖慢 LCP 的原因：

• 商品圖片太大（3MB 的 JPG 直接上傳）
• 伺服器回應太慢
• CSS / JS 檔案阻擋渲染

INP — 點了之後多快回應

INP（取代了舊版的 FID）測量使用者互動（點擊、輸入）後，頁面回應的速度。

電商常見問題：

• 點「加入購物車」按鈕後要等 1 秒才有反應
• 下拉篩選器卡住

CLS — 頁面有沒有亂跳

你有沒有遇過：正要點某個按鈕，突然上面冒出一個廣告，結果點到別的地方？那就是 CLS 高。

電商常見問題：

• 圖片沒設定寬高，載入後版面突然撐開
• 動態載入的廣告或推薦商品把內容擠下去

圖片優化 — 電商效能的最大戰場

電商網站最大的效能殺手通常是圖片。一個商品頁可能有 10 張以上的圖片。

Lazy Loading — 延遲載入

「看到才載入」— 使用者還沒滑到的圖片，先不下載：

Lazy Loading 重點：

• 加上 loading="lazy" 就好，瀏覽器會自動處理
• 首屏圖片不要 lazy（例如商品主圖），否則 LCP 反而變慢
• 一定要設定 width 和 height，避免 CLS

srcset — 不同裝置給不同大小的圖片

手機螢幕只有 375px 寬，何必下載 2000px 的大圖？

srcset 怎麼運作：

• 400w / 800w / 1200w — 告訴瀏覽器每張圖的實際寬度
• sizes — 告訴瀏覽器在不同螢幕寬度下，圖片會佔多大
• 瀏覽器會自動選最合適的圖片下載

圖片格式選擇

格式	特色	適用場景
JPG	檔案小、不支援透明	商品實拍照
PNG	支援透明、檔案較大	Logo、Icon
WebP	比 JPG 小 25-35%、支援透明	幾乎所有場景（推薦）
AVIF	比 WebP 更小，但支援度較低	進階優化

用 <picture> 提供 WebP 和 fallback

其他常見的效能殺手

問題	影響	解法
太多第三方 script（追蹤碼、聊天插件）	拖慢整體載入	延遲載入非必要 script
CSS/JS 沒壓縮	傳輸量大	使用 minify 工具
沒用瀏覽器快取	每次都重新下載	設定 Cache-Control header
字型檔太大	文字閃爍	用 font-display: swap
沒用 CDN	距離遠的使用者載入慢	透過 CDN 分發靜態資源

AI 協作：學了這個，跟 AI 怎麼配合？

效能優化涉及很多技術細節，AI 可以幫你快速生成最佳化的 HTML。但你需要知道「什麼該優化」才能正確下指令。

你的人類優勢：

• 你知道哪些圖片是首屏（不該 lazy）、哪些在下面（要 lazy）
• 你知道哪些第三方 script 是必要的、哪些可以延後
• 你能用 PageSpeed Insights 看報告，判斷哪項指標需要改善

可以這樣跟 AI 說：

幫我把這個商品頁的圖片標籤優化：第一張是商品主圖不要 lazy，其餘四張用 lazy loading。所有圖片都要加 width/height 避免 CLS，並用 srcset 提供三種尺寸。

練習題