網站跑分一片紅？工程師教你暴力破解 Core Web Vitals：LCP 與 CLS 終極優化指南

嗨，我是 Eric，浪花科技的資深工程師。每天打開 PageSpeed Insights 看到那堆紅色的數字，是不是讓你血壓升高？特別是那些剛做完、設計師覺得「美到不行」的網站，往往也是效能的災難現場。

客戶總愛問：「為什麼我的網站不能像 Apple 官網那樣有很多酷炫動畫，分數又要 100 分？」這時候我通常只能深吸一口氣，心想：Apple 的開發團隊預算可能是你的幾百倍。但在 WordPress 的世界裡，我們還是有辦法透過技術手段，把分數救回來。

今天不談虛的，我們來直球對決 Google 演算法最在意的兩大指標：LCP (Largest Contentful Paint) 和 CLS (Cumulative Layout Shift)。雖然 FID 已經被 INP (Interaction to Next Paint) 取代，但 LCP 和 CLS 依然是影響排名和使用者體驗的重中之重。

什麼是 Core Web Vitals？為什麼工程師要把它當聖經？

簡單說，Core Web Vitals (網站核心使用體驗) 是 Google 用來衡量「使用者用得爽不爽」的三個指標。如果你的網站載入慢（LCP 差）、畫面一直跳來跳去（CLS 差），Google 就會認為這是一個「爛網站」，進而在搜尋結果中把你降權。

• LCP (最大內容繪製)： 頁面上「最大塊」的內容（通常是 Banner 圖或 H1 標題）出現要多久？標準是 2.5 秒內。
• CLS (累計版面配置轉移)： 網頁載入時，元素有沒有亂跳？（例如想點按鈕，結果廣告突然跳出來害你點錯）。標準是 0.1 以下。
• INP (互動到下一次繪製)： 用戶點擊後，瀏覽器要多久才有反應？（這是 2024 年 3 月後取代 FID 的新指標，但今天我們先專注在前兩者）。

LCP 優化實戰：讓你的 Hero Image 秒速出現

LCP 通常是工程師最頭痛的指標，因為它牽涉到伺服器回應速度 (TTFB)、資源加載順序和渲染機制。很多時候，LCP 分數低是因為你的主題在載入一大堆不必要的 CSS/JS 之後，才慢吞吞地去載入那張最大的圖片。

1. 伺服器回應時間 (TTFB) 是地基

如果你的伺服器光是回應第一個 byte 就要 1 秒，那你的 LCP 絕對不可能及格。這就像起跑槍響了，你還在綁鞋帶。

解決方案：

別省那點錢用共享主機 (Shared Hosting)。使用 Cloudways 或 VPS，並開啟 Object Cache (Redis) 和 Page Cache。如果你的 WordPress 還在每次讀取都去 Query 資料庫，神仙也救不了你。

2. 圖片優化：WebP 與延遲載入 (Lazy Load) 的陷阱

大家都知道要開 Lazy Load，但這裡有個老鳥才知道的坑：千萬不要對 LCP 元素（通常是首圖）使用 Lazy Load！

Lazy Load 的原理是「等到圖片進入視窗才載入」，這會讓瀏覽器以為這張圖不重要，導致 LCP 延遲。對於首屏的 Hero Image，我們不僅不該 Lazy Load，反而要「預加載 (Preload)」。

我們可以在 `header.php` 或透過 `wp_head` hook 加入以下程式碼：

// 在 functions.php 中加入 LCP 預加載機制
function roam_preload_lcp_image() {
    if ( is_front_page() ) {
        // 替換成你的首圖 URL
        echo '';
    }
}
add_action( 'wp_head', 'roam_preload_lcp_image', 1 );

注意那個 fetchpriority="high"，這是告訴瀏覽器：「這張圖超級重要，放下手邊的工作先載入它！」這招通常能讓 LCP 提升 10-20%。

3. 消除 Render-Blocking (轉譯阻擋) 資源

很多 WordPress 外掛會塞一堆 CSS 和 JS 到 `` 裡。瀏覽器在下載並解析完這些檔案之前，是不會渲染畫面的。這就是所謂的「轉譯阻擋」。

工程師的解法：

使用像 WP Rocket 或 Perfmatters 這類外掛，將不關鍵的 CSS/JS 設定為「延遲執行 (Defer)」或「延遲載入 (Delay JavaScript Execution)」。如果你是手刻主題，請務必將非必要的 Script 放在 `footer` 或加上 `defer` 屬性。

CLS 優化實戰：別讓版面像過動兒一樣亂跳

CLS 雖然不影響速度感，但極度影響「質感」。想像你在看文章，正要讀下一行，結果一張圖片載入進來，把文字往下推了 500px，你是不是會想砸電腦？這就是 CLS。

1. 圖片必須指定寬高 (Aspect Ratio)

這是最常見的錯誤。現在的 RWD 網頁設計，CSS 通常寫 `width: 100%; height: auto;`。如果 HTML 標籤上沒有標註 `width` 和 `height`，瀏覽器在下載完圖片之前，不知道它佔多少空間，就會先顯示高度為 0，等圖片載入完再瞬間撐開，造成位移。

正確寫法：

現代瀏覽器會根據這兩個數值計算出 Aspect Ratio (長寬比)，並預先保留空間。

2. 字型載入造成的閃爍 (FOIT/FOUT)

使用了 Google Fonts 或自訂字型嗎？當網頁載入時，瀏覽器會先用系統字型顯示文字，等 Web Font 下載完後再替換成新字型。這瞬間，字體大小、行高可能會改變，導致排版位移。

解決方案：

在 CSS 的 `@font-face` 中加入 `font-display: swap;` 或者是 `optional`。雖然 `swap` 還是會有字型替換的過程，但它保證文字會立即顯示，避免空白畫面。

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* 關鍵屬性 */
}

如果你極度在意 CLS，甚至可以預先載入字型檔：

3. 動態內容與廣告

如果你的網站有 AdSense 廣告，或者用 Ajax 動態載入內容，請務必用 CSS 為這些容器「預留高度 (min-height)」。不要期待內容載入後再撐開，那時候已經來不及了，CLS 分數已經扣下去了。

工程師的效能調教心法

處理 Core Web Vitals 不是裝一個快取外掛就能解決的。它需要我們對瀏覽器的渲染機制有深入的理解。很多時候，我看到客戶為了追求分數，把所有功能都關掉，網站變成純文字，那也不對。真正的優化是在「豐富的體驗」與「極致的效能」之間取得平衡。

如果你發現用了所有方法，分數還是拉不起來，可能要回頭檢視你的 WordPress 主題是不是本身就寫得太爛（例如包了整套 Bootstrap 卻只用了一個按鈕），或者是外掛衝突。

記住，LCP 靠快取與預加載，CLS 靠預留空間與尺寸定義。這兩招練好，綠燈不是夢。

推薦閱讀：

• 圖片載入慢到讓人想砸電腦？WordPress 圖片終極優化聖經：從 Lazy Load 到 WebP 全攻略
• 網站慢到連訪客都想關分頁？WordPress 快取終極解剖學：從 Page Cache 到 Object Cache 一次搞懂！
• 你的官網是數位名片還是路障？WordPress 企業網站速度優化終極實戰，從體質診斷到效能飛升