邊緣運算（Edge）與影像優化：圖片飛快、網站更穩

先說結論

• Edge 就像把倉庫搬到你家附近——資料從近的地方送，更快。

• 網頁最重的常是圖片。把圖片變輕（格式/尺寸）、聰明載入（先後順序），整個網站就跟著快。

• 做到：對的格式（WebP/AVIF）＋對的尺寸（srcset/sizes）＋對的時機（hero 先載、其它 lazy）＋保留空間（避免位移）。

為什麼要管「邊緣」和「圖片」？

• 使用者多在手機上網；網速有好有壞。

• 圖片如果太大、太慢，使用者沒耐心，轉換就流失。

• 把檔案放到 Edge/CDN，讓最近的伺服器服務；再把圖片處理好，體感直接提升。

什麼是 Edge？（超白話）

• 想像在台北買東西，台北倉庫出貨，當然比美國倉庫快。

• Edge 就是把網站的檔案放到很多城市的節點，誰離使用者近，就用誰。

• 這樣首頁、圖片、字體都能更快送達。

圖片優化 4 招（關鍵就這些）

1. 格式要對：

   • 先用 AVIF（最省）、不行就 WebP，再回退到 JPEG/PNG。

2. 尺寸要對：

   • 不要用 3000px 圖片塞到 300px 小框；用 srcset + sizes 給瀏覽器自己挑最適合的檔。

3. 載入時機要對：

   • 首屏主圖（Hero）優先載入。其它圖lazy（滑到才載）。

4. 避免版面亂跳（CLS）：

   • 在 <img> 寫死寬高或用 aspect-ratio，先保留空間，載入就不會抖。

可以直接抄的寫法（HTML 範例）

首屏主圖（Hero）—優先載入

<link rel="preload" as="image" href="/hero-1200.avif" imagesrcset="/hero-800.avif 800w, /hero-1200.avif 1200w" imagesizes="(max-width: 768px) 100vw, 1200px">
<picture>
  <source type="image/avif" srcset="/hero-800.avif 800w, /hero-1200.avif 1200w" sizes="(max-width:768px)100vw,1200px">
  <source type="image/webp" srcset="/hero-800.webp 800w, /hero-1200.webp 1200w" sizes="(max-width:768px)100vw,1200px">
  <img src="/hero-1200.jpg" width="1200" height="700" alt="品牌主視覺與重點標語">
</picture>

內文圖片—延遲載入

<picture>
  <source type="image/avif" srcset="/post-600.avif 600w, /post-1200.avif 1200w" sizes="(max-width:768px)100vw,700px">
  <img src="/post-1200.jpg" width="700" height="420" loading="lazy" alt="示意圖：步驟流程">
</picture>

重點：

• preload 只給首屏關鍵圖；別全部 preload。

• 一定要有 width/height（或 CSS aspect-ratio）避免 CLS。

• alt 要寫重點，對可存取性與圖片搜尋都有幫助。

Edge 配置 3 步（概念就好）

1. 開 CDN/Edge：把網站托管到有全球節點的服務（例：有台北/東京/新加坡節點）。

2. 快取策略：靜態檔（圖片/CSS/JS）設長快取；內容更新時做版本號或自動失效。

3. 邊緣處理影像：在節點就即時壓縮、裁切、多尺寸輸出，靠近使用者再傳，省時間。

常見坑位（避開就加速）

• 把所有圖都原尺寸上傳：流量爆、速度慢。→ 先壓、再多尺寸。

• 首屏也 lazy：首屏空一片白。→ Hero 請優先載入。

• 沒寫寬高：圖片載入時整頁亂跳。→ 寬高必填或設 aspect-ratio。

• 上傳 PNG 當照片：照片用 AVIF/WebP/JPG，PNG 留給透明圖/圖示。

• SVG 太肥：匯出時清除 metadata，避免不必要的屬性。

應該看到的數字（KPI）

• LCP < 2.5s（首屏主內容載入）

• CLS < 0.1（版面穩定）

• INP < 200ms（互動順暢）

• 首頁圖片總量 < 1MB（行動）

• 圖片命中率（Edge 快取）逐月提升

檢查清單（上線前勾一下就好）

• 首屏主圖 preload / 非首屏 lazy

• <picture> + srcset/sizes 給多尺寸

• AVIF/WebP 先走，回退到 JPEG/PNG

• <img> 有 width/height 或 CSS aspect-ratio

• 圖片 ALT 描述清楚（10–16 字）

• Edge/CDN 已開啟，快取規則OK

• Lighthouse／PSI 手機分數 ≥ 90

30 / 60 / 90 天行動

30 天

• 首屏主圖改成 preload + picture，全站圖片上傳走自動壓縮。

• 啟用 Edge/CDN，設好快取與自動版本號。

60 天

• 文章模板加 srcset/sizes、width/height；補齊 ALT。

• 建儀表板追蹤 LCP/CLS 與快取命中率。

90 天

• 對高流量頁做圖片「多尺寸 AB」測試（尺寸/壓縮率/格式）。

• 針對慢頁查影像體積與第三方腳本，逐一清理。

一句話總結

**Edge 提供近、圖片變輕、載入有順序，**使用者自然覺得快。
速度上來，不只分數好看，轉換也會跟著上來。

✅ 想把網站速度推到 Core Web Vitals 綠燈嗎？

• 取得《圖片與 Edge 優化檢查清單》（Notion）

• 預約 30 分鐘諮詢，免費盤點：圖片策略／Edge 佈署／CWV 指標