這次檢查客戶官網發現，主視覺被設定成 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 輸出方式、快取機制，還要能處理部署後的錯誤。
歡迎聯絡我們申請 AISEO 成效系統免費試用
如果你想知道自己的網站目前在 Google、AI 搜尋與 SEO 技術面有哪些問題，
歡迎聯絡益盛科技申請免費試用。
https://des13.com/news/seo/1705-aiseo2.html
網站速度優化不是把圖片壓小而已。
真正要看的是資源出現的時間點。
一張banner圖，瀏覽器太晚才知道它重要，再小也可能拖慢 LCP。
網站速度或 Core Web Vitals 有問題，歡迎直接聊
益盛科技提供網站技術健診、LCP 優化、AI SEO 技術稽核與規劃服務。
LINE 諮詢 查看 AI SEO 服務 查看 網頁設計 服務 查看 品牌電商 服務
