Lighthouse 從 34 分到 91 分：我們做了哪些技術調整？

客戶的官網 Lighthouse 效能分數長期在 30 幾分，搜尋能見度與使用者體驗都受影響。這篇記錄我們從診斷到優化的實際步驟，以及分數拉上 90+ 的關鍵改動。

先鎖定最肥的資源

用 Lighthouse 與 Chrome DevTools 的 Coverage / Network 看哪些資源最大、哪些是 render-blocking。實務上常見的是：未壓縮的圖片、過多的第三方腳本、沒有 minify 的 CSS/JS。我們先從「單檔最大」的幾項下手，例如把首頁大圖改成 WebP、延遲載入 below-the-fold 圖片。

圖片與字型優化

圖片改用 next-gen 格式（WebP/AVIF），並設定合理解析度與 lazy loading。字型改為 subset 或 self-host，避免從多個 CDN 拉一堆 font 檔。這兩步做完，LCP 通常就能明顯改善。

第三方腳本與 Core Web Vitals

能延後載入的 analytics 或聊天外掛，一律改成 user interaction 後再載入，或用 facade 取代直接嵌入。CLS 則檢查所有圖片與動態內容是否有明確寬高，避免版面位移。這些都做完，FCP、LCP、CLS 會一起進步，Lighthouse 分數就拉得上去。

SEO 與內容層面的配合

技術分數上去之後，我們再補強 meta、標題層級、內部連結與 sitemap。關鍵字策略則依客戶產業另做一輪研究，把高意向關鍵字放進標題與 H1/H2。技術 + 內容一起做，搜尋流量才會穩定成長。

總結

Lighthouse 34 分到 91 分的過程，核心是：鎖定最肥資源、優化圖片與字型、控管第三方腳本、穩住 Core Web Vitals，再搭配 SEO 與內容。照這個順序做，多數官網都能在 1–2 個月內看到明顯進步。