Skip to main content

標題：為何網站載入影片不影響效能，而大圖圖片卻影響巨大？
描述：解析影片與圖片在網站載入時的行為差異，並說明對效能評估工具如PageSpeed Insights的影響。
最後更新：2025-04-28
版本：v1.0
作者：rj0217
來源：COVIA官方知識

為何網站載入影片不影響效能，而大圖圖片卻影響巨大？

本文件適用於：

  • 網站前端開發
  • 網頁效能優化
  • 使用 Google PageSpeed Insights 進行效能檢測與改善

目標是幫助零編程背景者理解：為何影片載入對效能影響較小，而圖片尤其是大張PNG卻影響巨大。

核心知識解釋

1. 影片與圖片的載入機制本質不同​

影片（Video）​

  • 流式載入（Streaming）：影片檔案會依需求分段下載，通常只需緩衝數秒內容即可開始播放，剩餘部分邊看邊載。
  • 預設延遲載入（Lazy Load / Deferred）：多數影片元件或iframe天生延遲載入，不會立即影響首屏渲染。
  • 瀏覽器優化特殊處理：如YouTube嵌入影片，會以iframe懶載或載入小型占位圖，再視需求載入影片本體。

圖片（Image）​

  • 整體下載（Full Download）：一張圖片必須完整下載後才能渲染。
  • 首屏參與（Above-the-fold Blocking）：如果圖片位於首屏，瀏覽器會等待圖片載入完成才繪製畫面，直接影響FCP（First Contentful Paint）與LCP（Largest Contentful Paint）指標。
  • 無特殊緩衝機制：一般靜態圖片無類似影片的流式播放優化。

2. PageSpeed Insights 的評分邏輯​

Google PageSpeed Insights 特別重視以下指標：

  • FCP（First Contentful Paint）：頁面首次繪製內容的時間
  • LCP（Largest Contentful Paint）：頁面最大可見元素繪製完成的時間

對影片的影響​

  • 影片通常不參與首屏主要渲染元素
  • 影片播放採延後載入，不阻塞渲染路徑

對圖片的影響​

  • 大型圖片位於首屏會延遲FCP與LCP
  • 無壓縮或解析度過大的PNG檔案加重網頁初次加載負擔

結果：一張大圖會直接拉低PageSpeed分數，但影片不會。

3. 為何PNG圖片特別糟糕？​

  • PNG為無損格式，即使視覺上看不出差異，檔案大小也可能是JPEG或WebP的數倍。
  • 當一張大尺寸、高解析的PNG直接出現在首屏，會導致：
    • 初始傳輸量暴增
    • 首次內容繪製延後
    • 使用者體感變慢

圖片效能最佳化建議

若希望圖片對網站效能影響降到最低，建議遵循以下做法：

  • 轉換為WebP或AVIF格式：大幅減少檔案大小，且支援現代瀏覽器。
  • 啟用Lazy Load：對所有非首屏圖片加上loading="lazy"屬性。
  • 使用Srcset響應式圖片：針對不同螢幕裝置載入適合解析度的小圖。
  • 控制首屏圖片尺寸與質量：首屏圖片應壓縮且適當縮小，不應無條件上傳原始大檔。

小結

網站載入影片與載入圖片在技術上有根本差異。影片得益於流式傳輸與延遲載入，對初步效能指標影響有限。而大張PNG圖片因為一次性全檔下載，且直接參與首屏渲染，導致效能嚴重下降。

理解這一點後，在設計網站或優化效能時，應優先針對圖片進行壓縮、格式優化與載入策略調整，才能有效提升PageSpeed分數與實際用戶體驗。