圖片會拖慢網站嗎？怎麼檢查

圖片影響網站速度的程度，取決於三件事：單張檔案多大、首屏載入了幾張、以及圖片有沒有在程式碼裡設定寬高。三者的症狀完全不一樣——檔案太大讓畫面等很久，首屏塞太多張讓手機用戶先看到一片空白，沒設寬高則讓版面在載入到一半時突然跳動。搞清楚自己屬於哪一種，比整批壓圖有用得多。

先講一個做之前必須知道的陷阱，不然整批會白做：很多網站慢跟圖片一點關係都沒有，是佈景主題塞了太多外掛腳本、或主機回應本身就要一秒以上。這種情況你把圖片全部壓完，速度只會進步不到半秒，然後得出「壓圖沒用」的錯誤結論。所以第一題永遠是確認元凶，不是動手。

我的網站很慢，怎麼確定是不是圖片害的？

確認方法是打開 PageSpeed Insights 輸入網址，看報告裡 LCP 對應的元素是什麼——它會直接告訴你畫面上最大、最慢載入的那個東西是圖片還是文字區塊。

報告裡那個叫 LCP 的秒數，量的就是「使用者等多久才看到主要內容」。Core Web Vitals 的官方門檻是 2.5 秒以內算良好、超過 4 秒算差，而且判定取的是真實使用者資料的第 75 百分位，不是你自己測那一次的數字。如果報告顯示 LCP 元素是一張首圖，而且時間超過 4 秒，那就是圖片的責任。如果 LCP 元素是一段標題文字、時間卻還是很久，問題在腳本或主機，壓圖不會救你。

手機與電腦要分開看，兩者的分數常常差一倍以上——多數中小企業網站有六成以上的流量來自手機，所以手機那一份才是你該處理的那份。

同一頁最好跑兩次、間隔一小時，取比較差的那次當基準。這個工具每次量到的網路狀況都不同，單次結果的浮動可以到一秒以上，拿單次分數去回答「圖片影響網站速度有多嚴重」這個問題，很容易得到相反的結論。

圖片多大才算太大？

實用門檻是單張超過 300KB 就該處理，首屏所有圖片加起來超過 1MB 就一定要處理。這不是官方標準，是從「用 4G 連線大約要等幾秒」回推出來的落點。

最常見的情況是原圖直接上傳：手機拍的照片動輒 3 到 5MB、單邊 4000 像素以上。而網站上實際顯示的區塊，桌機大約 1200 像素寬、手機大約 390 像素寬。你上傳一張 4000 像素的圖，瀏覽器仍然要把整張下載完，再縮小顯示——多下載的那 90% 是純浪費。

所以第一步不是換格式，是改尺寸：內容區的圖片上傳前縮到 1600 像素寬以內，橫幅大圖 2000 像素也夠用。光是這一步，通常就能把單張從 3MB 降到 200KB 上下。

一定要換成 WebP 嗎？

不一定。Google WebP 的官方比較數據是：同等品質下，有損 WebP 比 JPEG 小 25% 到 34%，無損 WebP 比 PNG 小約 26%。值得換，但它的效益排在「縮尺寸」跟「壓縮品質」後面。

換格式之前先確認兩件事：你的網站系統支不支援上傳 WebP（有些較舊的版本會擋副檔名），以及原始檔有沒有留著。原始檔一定要留一份在自己的電腦或雲端，因為 WebP 是壓過的成品，將來要印型錄、要放大用，回頭找不到原圖會很麻煩。

如果系統不支援也沒關係：一張縮到 1600 像素、品質 80 的 JPEG，通常已經落在 150 到 250KB，這個大小不會是你網站慢的原因。順序上，先做尺寸、再做品質、最後才考慮格式。

壓縮會不會讓產品照或工程照變糊？

品質參數設在 75 到 85 之間，肉眼在螢幕上幾乎分不出來與原圖的差別，這個區間是安全的。低於 70 才會開始在漸層和邊緣看到雜訊。

真正需要例外處理的是三種圖：需要放大檢視細節的產品特寫、含有細小文字的規格表或圖面、以及顏色本身就是賣點的樣品照。這三種建議用品質 90 單獨處理，或者做成「縮圖用壓縮版、點開看原圖」的兩段式。

反過來說，網站上大部分圖片其實不需要那麼好：團隊照、廠房外觀、流程示意，這些壓到 75 完全沒有問題。把力氣花在該精緻的那幾張，比整站統一設定有效。

圖片慢會不會影響排名？

會，但影響比多數人以為的小。Core Web Vitals（包含 LCP）是 Google 明確承認的排名訊號之一，可是在內容相關性面前，它的權重相當有限——一個載入很快但答非所問的頁面，不會贏過一個慢一點卻真正回答問題的頁面。

真正的損失在成交端：使用者等待時的耐性有限，手機上等超過三秒，離開的比例會明顯上升。同樣一批曝光，你在圖片上省下的兩秒，換來的是實際多留下來的人。這條帳比排名那條帳清楚得多，也快得多。

換個角度看這件事：圖片影響網站速度所造成的損失，是均勻分佈在每一個訪客身上的，不像排名只影響你有沒有被看到。一頁載入慢兩秒，代表你花錢買的廣告點擊、業務發出去的名片網址、客戶轉傳的連結，全部都要付這個代價。

還有一個容易被忽略的副作用：圖片沒有在程式碼裡設定寬高的時候，圖片載入完成的瞬間會把下面的內容往下推，使用者正要按的按鈕會突然跑掉。這個現象叫版面位移，它跟檔案大小無關，是設定問題，改一次就永久解決。圖片與速度在整份健檢裡只佔一格，前面還有幾項比它更該先修；七項的先後關係列在 網站健檢是什麼？七個檢查項目與判讀標準，架構層面的三項自我檢查則在 網站架構有沒有問題。

什麼情況不該自己動手？

當圖片是由系統自動輸出的時候就不該自己處理——例如電商的商品圖、型錄站的規格圖，這些是後台一鍵產生的，你手動壓完，下次上架又會冒出一批新的原圖。

另外兩種情況也建議找人：網站已經掛了 CDN 或圖片最佳化外掛，但速度沒有改善（多半是設定互相打架，需要有人把設定攤開來看）；以及延遲載入設錯，把首屏的主圖也一起延後，結果 LCP 反而更慢——這是自行安裝最佳化外掛最常見的反效果。順帶一提，延遲載入自 Google Chrome 76 起就是瀏覽器原生支援的功能，不需要外掛也做得到；會出事的多半是外掛把它一視同仁地套到了首屏那一張。

如果三題問下來你還是不確定自己屬於哪一種，最快的方式是把網址丟進 PageSpeed Insights 跑一次，把手機版那份報告的截圖傳給我們，我們可以先告訴你是圖片、腳本還是主機的問題，再談要不要處理。服務內容裡的技術修正就是在做這件事，而 怎麼驗收 SEO 成果 那篇則說明改完之後該盯哪些數字。要問也可以直接來 LINE @APM168 或撥 02-2601-8918。