Web 效能調優與 Core Web Vitals：LCP, FID 與內容加載優化的具體作法

在搜尋引擎眼裡，效能等同於排名；在使用者眼裡，效能等同於信任。對於 DueWise 這樣一款講求效率的 PWA 應用程式，任何超過 100ms 的延遲都是不可接受的。

這篇文章將揭示我們如何針對 Google 的 Core Web Vitals 進行精密的調優，將 DueWise 打造為一個運行極速的典範。

1. 理解 Core Web Vitals：三個核心指標

在進行優化前，我們先定義目標：

• LCP (Largest Contentful Paint): 最大內容繪製。測量頁面主要內容加載的時間。
• FID (First Input Delay): 首次輸入延遲。測量用戶第一次點擊按鈕後，App 回應的速度。
• CLS (Cumulative Layout Shift): 累計佈局偏移。衡量頁面加載時元素跳動的程度。

2. 針對 LCP 的突破：Astro Server Islands 與預渲染

DueWise 的首頁內容豐富，如果使用傳統的 SPA 模式，使用者必須等整個 JS Bundle 下載完才能看到頁面。

我們的做法：

1. 全面 SSG: 使用 Astro 對所有導陸頁執行預渲染。當使用者訪問時，伺服器直接給出完整的 HTML，不需要任何 JS 運算。
2. 圖片優化: 我們使用了 priority 標籤載入 Hero Section 的重點圖片，並強制執行 WebP 格式轉換。
3. 預先獲取 (Prefetching): 當使用者懸停在「開始使用」按鈕上時，我們會利用 <link rel="prefetch"> 偷偷加載下一個頁面的資源。

3. 消滅 FID 的元兇：過長的 JS 執行時間

PWA 最怕的是大量計算（如條碼解碼邏輯）阻塞了主執行緒 (Main Thread)，導致使用者點擊沒反應。

優化策略：

1. 動態載入 (Dynamic Imports): 除非使用者打開掃描視窗，否則我們絕不加載龐大的掃描庫（如 html5-qrcode）。
2. Web Workers 的應用: 我們正在實驗將繁重的數據排序與篩選邏輯移至 Web Worker 執行，確保 UI 始終保持 60fps 的流暢感。
3. 減少 Hydration: Astro 的「Islands Architecture」確保了只有必要的互動組件（如導航欄、清單切換）會被賦予 JavaScript 靈魂，其餘 HTML 都是靜態的，極大地減輕了瀏覽器的解析負擔。

4. 零跳動的體驗：控制 CLS

沒有什麼比「準備點按鈕，按鈕突然往下跳 10 公分」更讓人挫折了。

我們在 DueWise 中的規範：

• 容器具備寬高比: 所有圖片與動態加載的區塊，都使用了 CSS 的 aspect-ratio 屬性。
• 骨架屏 (Skeletons): 當我們在載入雲端 API 數據時，會先顯示與最終數據高度一致的 Skeleton。這樣當內容填入時，周圍的佈局完全不會發生位移。

5. 網路層的優化：Cloudflare Early Hints

除了前端代碼，我們還利用了 Cloudflare 的 Early Hints (103) 特性。

在伺服器還在產生 HTML 的空檔，雲端節點會先告訴瀏覽器：「喂！你待會一定會用到這幾個關鍵的 CSS 和 Font，現在就開始下載吧！」這讓我們在某些地區的 LCP 縮短了將近 200ms。

個人心得：效能優化是一場馬拉松

優效能不是做一次就結束的任務，它會隨著代碼增加而退化。因此在 DueWise 中，我們在 CI 流程中整合了 Lighthouse CI。每當有代碼合併，系統會自動跑一次性能測試，如果 Core Web Vitals 的分數低於 90 分，PR 將無法合併。

這種對數字的「執著」，才保證了 DueWise 長期的高水準表現。

結論

效能不需要奇蹟，它需要紀律。透過 Astro 的靜態優勢、精確的程式碼拆分以及雲端節點的協作，DueWise 為用戶提供了一個真正的「即時應用程式」。

下一篇文章，也是本系列的最後一章，我們將討論開發者最關心的課題：「安全審計與機密管理：在 Cloudflare 中保護你的 API 金鑰與環境變數」。