這次檢查客戶官網發現，主視覺被設定成 lazy loading，導致瀏覽器太晚下載 LCP 圖片。
文章整理實際排查過程，包含 preload、fetchpriority、CSS/JS 資源過重與伺服器回應時間，
說明網站速度優化真正該看什麼。
最近檢查一個客戶官網的 Template，PageSpeed 一直抓到首頁 LCP 很慢。
一開始以為是圖片太肥。
查下去才發現，真正的問題是 Template 把最重要的首屏圖排到很後面才載入。
首頁第一眼會看到的主視覺，卻被設定成 loading="lazy"。
lazy loading 本身沒問題，適合用在使用者還沒滑到的圖片、下方內容、內頁圖片。
但主視覺不能 lazy，瀏覽器一開始就需要知道這張圖很重要，要優先下載。
問題一：首屏圖被排到最後才載入
Template 原本的補救方式是用 JavaScript 延遲 2 秒後，把首張圖改成高優先權。
等 2 秒才補救，對 LCP 來說已經太晚。
瀏覽器的 preload scanner 一開始看不到這張圖的重要性，
等 JS 後來才加 fetchPriority，效果打折很多。
調整方式很明確，分兩步：
在
加入 preload圖片本身的屬性
讓瀏覽器從 HTML 一開始解析就知道，這張圖是重點資源。
問題二：Template 本身太重
首頁載入的資源：
PageSpeed 提示未使用 CSS 約 220 KB、未使用 JS 約 29 KB。
畫面還沒穩定顯示前，瀏覽器已經在處理一堆暫時用不到的東西。
問題三、四：隱藏內容與伺服器回應
頁尾隱藏內容
Template 頁尾塞了一段 inline SVG / base64 filter。畫面看不到，但瀏覽器仍要下載、解析、建立 DOM，對手機版 LCP 很不友善。
TTFB 2.3 秒
這不是 Template 能解決的問題，要從伺服器、快取、主機回應時間一起處理。
實際修改 template/index.php
調整做了三件事：
改的過程遇到兩個 bug。
第一個：PHP 字串裡的 querySelector 雙引號沒有正確跳脫，語法錯誤。
修掉後，遇到第二個：
Call to a member function appendChild() on nullscript 執行時 document.body 還沒建立。最後改成：
(document.body || document.head || document.documentElement) .appendChild(s);現場改 Template 就是這樣。
不是改一行就結束，中間要處理瀏覽器載入順序、Joomla Template 結構、PHP 輸出方式、快取機制，還要能處理部署後的錯誤。
網站速度優化不是把圖片壓小而已。
真正要看的是資源出現的時間點。
一張banner圖，瀏覽器太晚才知道它重要，再小也可能拖慢 LCP。
網站速度或 Core Web Vitals 有問題，歡迎直接聊
益盛科技提供網站技術健診、LCP 優化、AI SEO 技術稽核與規劃服務。
LINE 諮詢 查看 AI SEO 服務 查看 網頁設計 服務 查看 品牌電商 服務
