階段 6 效能與品質

上線只是開始,前端部署工程師要讓網站「快、安全、搜得到」:這一階段練的是拿指標當依據的持續優化能力。

這一階段學什麼

• Core Web Vitals:Google 的三大體驗指標 — LCP(載入)、INP(互動)、CLS(視覺穩定),是效能優化與 SEO 的共同語言。
• 快取策略:HTTP 快取標頭、CDN 快取與檔名雜湊版本化,讓回訪者幾乎秒開,又不會拿到舊檔案。
• 前端安全:防範 XSS(輸入輸出都要處理)、設定內容安全政策(CSP)、不把金鑰打包進前端 — 這是部署工程師的守門責任。
• SEO:語意化標籤、meta 資訊、sitemap 與社群分享預覽,讓網站被搜尋引擎正確理解。

為什麼是現在學

有了階段 5 的流水線,你才敢頻繁部署優化實驗。反過來說,沒有這一階段,網站上線了卻慢、不安全、搜不到 — 下一階段作品集要拿出手,這些分數就是證據。

怎麼練(具體行動)

1. 用 Lighthouse 跑一次自己的網站,把報告裡每個紅字查懂。
2. 針對最大瓶頸動手:壓縮圖片、拆分程式碼、延遲載入非關鍵資源,前後對照分數。
3. 設定快取標頭與 CSP,用開發者工具驗證有生效。
4. 產出一份效能/SEO 優化報告:改了什麼、指標變化多少。

完成標準

• Lighthouse 的效能、無障礙、最佳實踐、SEO 全數綠燈。
• 對任一個指標,能說出「它量什麼、我做了什麼讓它變好」。

⚠️ 常見誤區:優化只跑一次 — 沒進 CI 持續監測,三個版本後分數就悄悄掉回去。