Smart Slider 首屏圖還是 lazy load，PageSpeed 卡在紅燈邊界

整理日期：2026-06-12

狀況

一個用 Elementor 做的廣告著陸頁，手機版 PageSpeed 分數一直卡在紅燈邊界。

頁面首屏是 Smart Slider。站上同時保留桌機版與手機版兩組 slider，而且追蹤碼不能動、輪播不能移除，也不想改原本 Elementor 裡的 slider 位置。

一開始先做了 WebP 和圖片 preload，分數有些起伏，但還是不穩。後來測到 49 分，差一點進黃燈。

先拆成幾層看

先確認 LCP 是不是首屏 slider 圖，而不是下方內容或 logo。
再看 Smart Slider 後台的 loading 設定是不是已經立即載入。
接著查前台 HTML，確認實際輸出的 <img> 標籤有沒有 loading="lazy"。
最後再判斷問題是圖片檔案太大，還是瀏覽器載入優先順序不對。

這類問題不能只看後台設定。

Smart Slider 後台顯示立即載入，不代表最後輸出的 HTML 一定沒有 lazy loading 屬性。

最後發現

首屏圖片本身已經是 WebP，檔案大小也不算誇張。

Smart Slider 的載入設定也已經是 instant，初始化資料裡的 lazy load 也關掉了。

真正卡住的是前台 HTML。首屏圖仍然被輸出成：

<img loading="lazy" ...>

對瀏覽器來說，這張圖明明是 LCP 候選，但標籤卻告訴它可以延後載入。這會拖慢首屏繪製，也讓 Lighthouse 的 LCP 和 Speed Index 不好看。

修正方式

這次沒有去移除 slider，也沒有碰 GTM 或第三方追蹤。

最後只做一個很窄的 PHP snippet：

在 <head> preload 桌機與手機首屏圖。
只找指定的兩張 hero 圖。
移除這兩張圖上的 loading="lazy"。
補上 loading="eager"。
補上 fetchpriority="high"。

去識別化後的範本如下。實作時要把 hero-desktop.webp 和 hero-mobile.webp 換成該站實際的首屏圖檔名。

<?php
/**
 * 首頁首屏圖片優先載入
 * 不移除 slider、不碰 GTM、不改其他圖片。
 */
if (!function_exists('site_perf_is_home')) {
    function site_perf_is_home() {
        if (is_admin()) {
            return false;
        }
        if (function_exists('wp_doing_ajax') && wp_doing_ajax()) {
            return false;
        }
        if (defined('REST_REQUEST') && REST_REQUEST) {
            return false;
        }
        if (is_feed()) {
            return false;
        }
        return is_front_page();
    }
}

if (!function_exists('site_perf_print_preload')) {
    function site_perf_print_preload() {
        if (!site_perf_is_home()) {
            return;
        }

        echo "\n<!-- site perf hero priority active -->\n";
        echo '<link rel="preload" as="image" href="https://example.com/wp-content/uploads/hero-desktop.webp" media="(min-width:701px)" fetchpriority="high">' . "\n";
        echo '<link rel="preload" as="image" href="https://example.com/wp-content/uploads/hero-mobile.webp" media="(max-width:700px)" fetchpriority="high">' . "\n";
    }
}
add_action('wp_head', 'site_perf_print_preload', 1);

if (!function_exists('site_perf_start_html_buffer')) {
    function site_perf_start_html_buffer() {
        if (!site_perf_is_home()) {
            return;
        }

        ob_start('site_perf_prioritize_hero_images');
    }
}
add_action('template_redirect', 'site_perf_start_html_buffer', 0);

if (!function_exists('site_perf_prioritize_hero_images')) {
    function site_perf_prioritize_hero_images($html) {
        if (!is_string($html) || $html === '') {
            return $html;
        }

        if (strpos($html, 'hero-desktop.webp') === false && strpos($html, 'hero-mobile.webp') === false) {
            return $html;
        }

        return preg_replace_callback(
            '~<img\b(?=[^>]*(?:hero-desktop|hero-mobile)\.webp)[^>]*>~i',
            'site_perf_prioritize_hero_img_tag',
            $html
        );
    }
}

if (!function_exists('site_perf_prioritize_hero_img_tag')) {
    function site_perf_prioritize_hero_img_tag($matches) {
        $tag = $matches[0];

        $tag = preg_replace('~\sloading=(["\'])lazy\1~i', '', $tag);
        $tag = preg_replace('~\sfetchpriority=(["\'])(high|low|auto)\1~i', '', $tag);

        if (stripos($tag, 'loading=') === false) {
            $tag = preg_replace('~<img\b~i', '<img loading="eager"', $tag, 1);
        }

        if (stripos($tag, 'fetchpriority=') === false) {
            $tag = preg_replace('~<img\b~i', '<img fetchpriority="high"', $tag, 1);
        }

        return $tag;
    }
}

貼上後，要反查前台原始碼，而不是只看後台設定。

要看到類似這樣：

<img fetchpriority="high" loading="eager" ...>

這次改完後，手機版 PageSpeed 從紅燈邊界進到 50 分以上。這代表方向有效。

不建議先做的事

不要一開始就用 PHP 大範圍移除另一組 slider。

那種做法看起來省 HTML，但太依賴 Elementor 和 Smart Slider 的輸出結構。外掛更新後，HTML 結構一變，snippet 就可能失效。

也不要看到 WebP 就繼續壓圖片。

如果圖片已經只有幾十 KB 到一百 KB 左右，分數卡住多半不是格式問題，而是 LCP 圖片載入優先順序、CSS/JS 阻塞，或主執行緒時間。

更不要把 GTM 和追蹤碼一起延後，除非已經確認轉換追蹤和廣告歸因都能承受。

下次遇到可以先整理什麼

PageSpeed mobile 的 LCP element 是哪一個。
該圖在後台是哪個 widget、slider 或區塊輸出。
前台 HTML 實際是不是 loading="lazy"。
圖片檔案大小和格式。
是否有 preload。
是否有 fetchpriority="high"。
桌機與手機是不是同時輸出不同 slider。
GTM、廣告追蹤、客服工具能不能動。
清快取後是否有等 5 到 10 分鐘再測。

測試時不要只跑一次 PageSpeed。

同一個頁面連續測三次，看中間值，比追單次分數可靠。