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

嗨，我是 Eric，浪花科技的資深工程師。最近又到了 Google 演算法調整的季節，我的信箱也如預期般被客戶的焦慮信件塞爆。大家的疑問千篇一律：「Eric，為什麼我的網站排名掉了？」、「PageSpeed Insights 那個分數怎麼一片紅？」、「LCP 和 CLS 到底是什麼外星語言？」

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

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

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

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

• LCP (最大內容繪製)： 頁面上「最大塊」的內容（通常是 Banner 圖或 H1 標題）顯示出來要多久。標準是 2.5 秒內。
• CLS (累計版面配置轉移)： 頁面載入過程中，元件有沒有「亂跳」。標準是 0.1 以下。

如果你的網站這兩項指標不及格，Google 會認定你的網站「難用」，進而調降 SEO 權重。這不是威脅，這是演算法的鐵律。

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

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

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

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

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

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

90% 的 LCP 都是那張巨大的 Hero Image（首圖）。我常看到客戶上傳一張 5MB 的 PNG 當首圖，這簡直是謀殺網速。

• 使用 WebP 格式： 體積比 JPEG/PNG 小 30% 以上。
• 適當的尺寸： 不要手機版載入桌機版 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 過高造成的災難。對於 SEO 來說，這代表網站極不穩定。

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

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

• Chrome DevTools (Performance 面板)： 勾選 “Web Vitals”，它會精確地在時間軸上標出 LCP 發生在哪一毫秒，以及哪個 DOM 元素造成了 CLS。
• Web Vitals Extension： 安裝這個 Chrome 外掛，你可以即時在瀏覽器右上角看到當前頁面的指標狀態，非常適合除錯動態互動。

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

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

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

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

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

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