Google 演算法不開心？Core Web Vitals 實戰攻略：LCP 與 CLS 的除錯與優化手術

網站排名掉了，第一反應通常是「內容不夠好」，但很多時候兇手其實是那一片紅色的 PageSpeed 分數。Google 把使用者體驗量化成 Core Web Vitals，其中 LCP 與 CLS 是最常見的兩個紅字，也是可以動手術修好的。這篇就從除錯到優化，一步步把這兩個指標處理乾淨。

老實說，身為工程師，我有時候也覺得 Google 的要求像是一個永遠不會滿意的業主。但不得不承認，Core Web Vitals（網站核心使用體驗指標） 確實抓住了使用者體驗的痛點。沒人喜歡一個載入慢到像撥接（LCP 差）或者看到一半版面突然亂跳（CLS 差）的網站。

今天我不談空泛的理論，我們要像外科手術一樣，精準切入 解決 Core Web Vitals 效能瓶頸 的核心，特別是針對最讓開發者頭痛的 LCP (Largest Contentful Paint) 與 CLS (Cumulative Layout Shift)，提供可執行的優化指南與程式碼片段。

什麼是 Core Web Vitals？為什麼工程師要在此刻關注？

LCP 和 CLS 是 Core Web Vitals 分數低落的兩大元兇：LCP 要 2.5 秒內、CLS 要 0.1 以下。

簡單來說，這是 Google 用來衡量「網頁瀏覽體驗好不好」的三大支柱。雖然還有 INP (Interaction to Next Paint)，但根據我的實戰經驗，LCP 和 CLS 往往是造成分數低落的兩大元兇。

• LCP (最大內容繪製)：

  頁面上「最大塊」的內容（通常是 Banner 圖或 H1 標題）顯示出來要多久。標準是 2.5 秒內。

• CLS (累計版面配置轉移)：

  頁面載入過程中，元件有沒有「亂跳」。標準是 0.1 以下。

LCP 優化指南：讓你的網站「秒開」的關鍵

LCP 優化的核心是讓使用者最想看的東西優先出來：先顧好伺服器回應，再處理首圖。

很多工程師看到 LCP 紅字，直覺反應就是「裝快取外掛」。這沒錯，但治標不治本。LCP 的核心在於「讓使用者最想看的東西優先出來」。

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

如果你的伺服器光是回應第一個 Byte 就花了 1 秒，那 LCP 絕對不可能及格。這通常跟主機效能（Hosting）和資料庫查詢有關。

Eric 的碎碎念： 別再用那些一個月 5 美金的共享主機跑企業官網了，那是拿石頭砸自己的腳。至少用個 Cloudways 或是獨立 VPS，並確保你的 PHP 版本在 8.1 以上。

如果不想自己管主機，浪花科技的 RoamerHost 也提供 WordPress 代管方案，可以先免費試用。

2. 圖片優化：LCP 的頭號殺手

很多網站的 LCP 元素，就是那張巨大的 Hero Image（首圖）。我常看到客戶上傳一張 5MB 的 PNG 當首圖，這簡直是謀殺網速。

• 使用 WebP 格式： 依 Google 的壓縮研究，WebP 比同畫質的 JPEG 小 25% 到 34%。
• 適當的尺寸： 不要手機版載入桌機版 1920px 的圖。
• 千萬不要 Lazy Load 首圖： 這是最常見的錯誤！Lazy Load 會延遲圖片載入，這對 LCP 來說是災難。首圖應該要 Eager Load 或 Preload。

3. 程式碼實戰：排除首圖的 Lazy Load

如果你的 WordPress 主題或外掛強制對所有圖片 Lazy Load，請把這段程式碼加入你的子主題 functions.php，手動排除第一張圖片的延遲載入：

/**
 * Eric 的實戰筆記：停用第一張圖片的 Lazy Load 以提升 LCP
 * 適用於 WordPress 經典編輯器與大部分佈景主題
 */
function eric_disable_lazy_load_first_image( $attr, $attachment, $size ) {
    // 這裡我們標記一個靜態變數來計數
    static $counter = 0;
    
    // 如果是第一張圖片，移除 loading="lazy" 並加上 fetchpriority="high"
    if ( $counter === 0 ) {
        if ( isset( $attr['loading'] ) ) {
            unset( $attr['loading'] );
        }
        // 告訴瀏覽器這張圖超級重要，優先下載
        $attr['fetchpriority'] = 'high';
    }
    
    $counter++;
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'eric_disable_lazy_load_first_image', 10, 3 );

CLS 優化指南：拒絕版面「跳恰恰」

CLS 過高來自版面亂跳：圖片指定長寬、字型用 swap，動態插入的內容要預留空間。

你有沒有過這種經驗：正要點擊「取消」按鈕，結果突然彈出一個廣告，害你點成「購買」？這就是 CLS 過高造成的災難。對於 SEO 來說，這代表網站極不穩定。

• 圖片與 iframe 沒寫寬高，下載完瞬間撐開指定 width、height，CSS 用 aspect-ratio 預留空間
• 字型載入的閃爍（FOIT/FOUT）推擠版面在 @font-face 使用 font-display: swap;
• 用 JavaScript 動態插入通知條用 SSR 直接輸出 HTML，或預留固定的 CSS 高度

1. 圖片與 iframe 必須指定長寬

這是一個非常老派但極其重要的 HTML 規則。瀏覽器在圖片下載下來之前，不知道它多大。如果你沒寫 width 和 height，瀏覽器會先預留 0px 高度，等圖片下載完瞬間撐開，版面就「跳」了一下。

解決方案： 確保所有的 <img> 標籤都有明確的寬高屬性，CSS 中則使用 aspect-ratio 來預留空間。

/* CSS 範例：為響應式圖片預留空間 */
.custom-header-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* 瀏覽器會根據這個比例先佔位，不會亂跳 */
}

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

這也是工程師常忽略的細節。當網頁使用 Google Fonts 或自訂字型時，在字型檔案下載完成前，瀏覽器可能會先隱藏文字（FOIT）或顯示系統字（FOUT），等字型載入後文字突然「變胖」或「變瘦」，導致行高改變，推擠版面。

Eric 的實戰建議： 在 CSS 的 @font-face 中強制使用 font-display: swap;。這會讓瀏覽器先顯示系統字，等字型下載好再替換，雖然會有一點視覺變化，但可以避免大幅度的 CLS 扣分。

3. 動態插入內容（廣告、通知列）

如果你要在頁面頂端插入促銷通知條（Top Bar），請不要用 JavaScript 動態插入。這會把整個頁面往下推。請盡量用 Server Side Rendering (SSR) 直接輸出 HTML，或者為該區塊預留固定的 CSS 高度。

進階除錯工具：別只看 PageSpeed Insights

Core Web Vitals 除錯別只看 PageSpeed Insights，要用 Chrome DevTools 與 Web Vitals 外掛找出元兇。

PageSpeed Insights 給你的是「考試成績」，但要「抓作弊」，你需要更專業的工具。

• Chrome DevTools (Performance 面板)：

  勾選 "Web Vitals"，它會精確地在時間軸上標出 LCP 發生在哪一毫秒，以及哪個 DOM 元素造成了 CLS。

• Web Vitals Extension：

  安裝這個 Chrome 外掛，你可以即時在瀏覽器右上角看到當前頁面的指標狀態，非常適合除錯動態互動。

Eric 的總結：優化是一場持久戰

Core Web Vitals 優化是一場持久戰：LCP 考驗速度、CLS 考驗細心，優化後還要持續監控。

解決 Core Web Vitals 效能瓶頸，不是裝個快取外掛就能一勞永逸的。它需要我們從伺服器設定、前端程式碼、到圖片媒體進行全方位的檢視。LCP 考驗的是你的「速度」，CLS 考驗的是你的「細心」。

優化後，別忘了持續監控。SEO 是動態的，你的競爭對手也在進步。把這些技術細節打磨好，Google 演算法自然會給你應得的回報。

延伸閱讀：讓你的 WordPress 技能更上一層樓

如果你想進一步深入優化與除錯，我強烈推薦閱讀以下幾篇我整理的實戰文章：

• 圖片載入慢到讓人想砸電腦？WordPress 圖片終極優化聖經：從 Lazy Load 到 WebP 全攻略
• 網站卡頓？別只會裝快取！資深工程師教你用 Query Monitor 揪出效能殺手
• Cloudways 速度還能更快？資深工程師的終極調校聖經，榨乾每一滴主機效能！