錯誤案例檢討：圖片很多的電商分類頁，為什麼越優化載入越慢

圖片很多的電商頁要載得快，順序是先讓第一屏的主圖最早出現，再讓看不到的圖晚點載。常見的錯是做反了：把所有圖片一律延遲載入、圖片不設尺寸、手機下載桌機大圖。以下用一個示範情境，拆解五個錯誤與修正順序。

先說明：本文的情境是示範用的，綜合我在電商客戶網站上看過的狀況改寫，不是單一客戶的紀錄，也不提供成效數字。店名、商品數與流程都是為了說明而設定。

情境：分類頁壓了圖、裝了外掛，反而更慢

一家賣居家收納用品的示範電商，分類頁每頁排列四十八件商品，每件一張主圖，滑過去會換成第二張。商品頁有一張大主圖、八張細節圖，下面還有一段使用情境的長圖。

老闆收到客人反映：「手機打開分類頁，要等很久才看到商品。」團隊做了三件事。把所有圖片丟進壓縮工具重存一次。安裝一個懶載入外掛，讓全站圖片都延遲載入。把首頁和分類頁頂端換成一個效果更多的輪播套件。

兩週後，客人的反映沒有減少。手機上反而出現新問題：商品圖先是一片灰，接著一張一張跳出來，畫面上下晃。客人想點某件商品，手指按下去時那個位置已經換成另一件。

這不是任何一個人的錯。每一個動作單獨看都有道理，放在一起卻互相抵銷。下面一個一個拆。

錯誤一：連第一屏的主圖也延遲載入

懶載入的用意是讓看不到的圖晚點載，省下頻寬。外掛為了省事，把全站所有圖片都設成延遲。結果分類頁第一排商品圖、商品頁的大主圖，也要等腳本判斷「它在畫面裡」之後才開始下載。

使用者打開頁面，最想看的就是這幾張圖。它們被排到最後，頁面看起來就是慢。壓縮省下的時間，被延遲吃掉了。

修正方式：第一屏可見的圖片正常載入，不加延遲。分類頁通常是第一排或前兩排，視手機版版面而定。商品頁是主圖。其餘往下捲才會出現的，才延遲載入。

錯誤二：圖片沒寫寬高，版面一路跳

當圖片沒有事先宣告寬度與高度，瀏覽器不知道要留多少位置。文字先排好，圖片載進來後把下面的東西往下推。四十八張圖，就推四十八次。這就是客人點錯商品的原因。

修正方式：每一張圖片都設定寬高或長寬比，讓瀏覽器先留好位置。商品主圖最好統一比例，例如全部正方形。比例統一後，版面穩定，也比較好看。這件事和圖片資產的命名、壓縮、標註與歸檔流程可以一起規範，上架時就確定尺寸。

錯誤三：手機下載的是桌機尺寸的圖

團隊壓縮了檔案，但沒有改尺寸。桌機分類頁一張圖顯示寬度可能數百像素，手機上一排兩張，顯示寬度更小，可是手機下載的仍是同一張大圖。壓縮再多，像素還是那麼多。

修正方式：準備幾種寬度的版本，讓瀏覽器依螢幕大小挑適合的一張。多數電商平台與內容管理系統都有這個功能，只是預設不一定開，或主題沒有正確設定顯示寬度。請工程或平台客服確認目前輸出的圖片寬度是否隨裝置改變。

錯誤四：用外掛和輪播取代瀏覽器原生功能

現在的瀏覽器已經支援原生的延遲載入屬性。很多外掛仍用自己的腳本：先放一張灰色佔位圖，真正的圖片網址藏在其他屬性裡，等腳本跑完才換上去。

這有兩個代價。第一，腳本本身要下載與執行，在手機上會佔掉時間。第二，如果實作不當，搜尋引擎讀到的可能只有佔位圖。Google 在搜尋引擎最佳化入門指南中談到圖片時，建議使用高品質圖片、放在相關文字附近，並寫上描述性的替代文字。這些前提都建立在圖片能被正常讀到。

頂端的輪播也是同樣的問題。效果越多，腳本越重，而且輪播的第一張常常就是第一屏最大的元素。修正方式是先問一個問題：這個輪播真的帶來點擊嗎？如果沒有，換成一張靜態主圖。

錯誤五：只看測速分數，沒看真實使用者

團隊每改一次就跑一次測速工具，分數有起有落，大家看分數決定下一步。問題是測速工具的實驗室數據，和真實客人用各種手機、各種網路的體驗，可能差很多。這部分在PageSpeed 分數高、核心網頁指標仍不及格的七個誤判有更完整的說明。

修正方式：分開看手機與桌機，分開看分類頁與商品頁。實驗室數據用來找問題，真實使用者數據用來確認問題是否真的影響客人。每次只改一項，記下日期，觀察幾週的趨勢。

商品頁的細節圖與長圖另外處理

分類頁修好之後，商品頁還有兩個常被忽略的地方。

• 細節圖：八張細節圖不需要一進頁面就全部下載。主圖正常載入，其餘縮圖可以延遲，點開大圖時再載入高解析版本
• 情境長圖：很多店家把整段商品說明做成一張很長的圖片。這張圖檔案大、手機上要放大才看得清，文字也讀不到。建議把規格、尺寸、材質、保養方式改成頁面文字，長圖只保留真正需要視覺呈現的部分
• 替代文字：每張圖寫清楚這張圖拍的是什麼，例如「收納箱正面，蓋子打開」，不要整頁都寫商品名稱

長圖改成文字這一步，效益常常比壓縮更明顯。它同時減輕載入負擔，也讓商品資訊可以被搜尋引擎與讀者直接讀到。

為什麼這五個錯誤常常一起出現？

因為大家把「圖片多」直接等同於「圖片太大」。解法就只剩壓縮與延遲。真正的問題通常是載入順序：哪張圖先、哪張圖後、要留多少位置、手機該拿哪一個尺寸。這是排程問題，不是檔案大小問題。

另一個原因是分工。上架的人管圖片，工程或外包管主題，行銷管輪播。三方都做了優化，沒有人看整頁的載入順序。網站速度的瓶頸不一定在圖片，可以先讀網站速度的四個真實瓶頸，確認自家的狀況。

修正順序表

下表是我建議的修正順序。排序依據是影響範圍與風險：先修影響第一眼與版面穩定的，再修需要改主題或平台設定的。

順序	動作	負責人	怎麼驗證
1	第一屏圖片取消延遲載入，其餘保留	工程或外包	手機開分類頁，第一排商品圖是否先出現
2	所有商品圖設定寬高或固定比例	工程與上架人員	捲動時版面是否還會跳
3	確認圖片依裝置輸出不同寬度	工程或平台客服	手機與桌機下載的檔案寬度是否不同
4	評估移除懶載入外掛，改用原生屬性	工程或外包	原始碼中圖片網址是否直接可見
5	檢討頂端輪播是否換成靜態主圖	行銷與老闆	輪播點擊紀錄與頁面載入感受
6	建立手機、桌機分頁型的追蹤表	行銷或分析人員	連續數週的真實使用者數據趨勢

每一步完成後再進下一步。一次全部上，出問題時就不知道是哪一項造成的。

適用與不適用的情況

這份檢討適用於商品數量多、分類頁一頁排列數十件商品、商品頁有多張細節圖的電商。使用 WordPress 電商外掛、開店平台或自建主題的網站都可以參考，差別只在每一步要找誰改。

不適用的情況：商品少於十幾件、頁面圖片本來就不多的品牌官網，速度瓶頸更可能在第三方腳本或主機。完全使用開店平台預設主題、無法修改程式碼的店家，能做的是圖片尺寸統一與輪播取捨，其餘要向平台確認。另外，載入快不保證排名或轉換提升，它解決的是客人因為等待與誤點而離開的問題。Google 在建立實用內容的說明裡，也把網頁體驗放在整體內容品質的脈絡裡看，而不是單獨的加分項目。

如果想讓專人一次看完整頁的載入順序，可以參考冠誠數位行銷的技術 SEO 健檢服務。