網路架站

首頁該放背景影片嗎?效能、流量與電量代價一次算

只有 62%——這是行動裝置網站的最大內容繪製(LCP,Largest Contentful Paint)時間,落在「良好」門檻(2.5 秒以內)的比例,而且這還只是單純放一張靜態主視覺圖片的情況。換成一支自動播放的背景影片,等於在一個本來就沒打好的地基上,再往上加蓋一層。

首頁放大影片確實好看,氛圍、動態感、質感一次到位,這也是為什麼它幾乎變成每次改版提案的固定選項。不過這支影片背後真正在換的,是載入速度、行動用戶的流量與電量,還有讀者能不能自己喊停這支影片——這幾件事很少被放進同一張評估表裡一起算過。

值得追問的不是「影片背景好不好看」,而是它換走了什麼、什麼情況換得划算、什麼情況根本不該放。

全螢幕影片背景已經是多數首頁改版的預設選項

全螢幕背景影片會被一改再改,不是因為流行,而是因為純圖片和純文字都傳達不出動態感與氛圍,這正是它想解決的問題。一張精修過的主視覺圖片能定格出一個瞬間,卻很難把品牌氛圍這種流動的感受傳達出來,影片能做到讓畫面自己說話,不需要文案硬撐,這也是設計端傾向一次把氛圍、質感、動態感全部到位的原因。

但這裡要先把立場講清楚:背景影片不是加分項,是一筆要拿效能、行動流量、甚至使用者控制權去換的代價,而且這筆代價比一般主視覺圖片更重。原因要從最大內容繪製(LCP,Largest Contentful Paint)講起,這是 Google 用來衡量「使用者開始載入頁面」到「畫面中最大的圖片或文字區塊完成顯示」所花時間的核心指標,Google 建議至少 75% 的頁面載入要落在 2.5 秒以內才算及格。根據 HTTP Archive《2025 Web Almanac》的統計,桌機有 85.3%、行動裝置有 76% 的頁面,LCP 元素本身就是一張圖片,可見主視覺圖片幾乎是效能表現的關鍵先決條件。

問題是,連這個先決條件多數網站都還沒做好。即使只是最單純的靜態主視覺圖片,目前也只有 74%(桌機)與 62%(行動裝置)的網站,LCP 落在良好的 2.5 秒門檻內;行動裝置落入差等級的比例是 13%,幾乎是桌機 7% 的兩倍。這代表大部分網站在換成影片背景之前,連圖片這關都還沒打好地基。而影片跟圖片在瀏覽器眼中的待遇並不平等,圖片有機會被瀏覽器提早發現、提早搶跑下載,影片沒有這種待遇,下一節就拆開講這個機制上的落差。

靜態主視覺圖片下,桌機有 74%、行動裝置只有 62% 的網站 LCP 落在良好門檻,行動落入差等級的比例約為桌機的兩倍。
連只放靜態圖片,行動裝置也只有 62% 的網站 LCP 達到良好門檻,比桌機低了一截(資料來源:HTTP Archive《2025 Web Almanac》)。

影片當首頁主視覺,多半會直接拖累 LCP 分數

LCP 幾乎一定會落在頁面上最顯眼的視覺元素上,使用者眼睛先看到哪裡,瀏覽器的計算邏輯也跟著往那裡對焦。首頁放大影片背景時,這支影片(或它前面墊的那張海報圖)幾乎注定成為 LCP 元素,它跑得快不快,直接決定整頁的效能分數好不好看。

真正的落差在瀏覽器怎麼發現這個元素。根據 web.dev 針對瀏覽器「預先載入掃描器」(preload scanner)機制的說明,這套機制只會讀取網頁最初回應的原始 HTML,能直接認出並提早開始下載的資源包括:帶 src 或 srcset 屬性的 img 元素,以及用 link rel=”preload” 明確標記的資源(例如 CSS 背景圖、網頁字型);凡是要等 CSS 套用完、或等 JavaScript 執行完才會「現身」的資源,都得晚一步才開始下載。多數全螢幕背景影片是靠 CSS 或 JavaScript 疊加呈現,不會像 img 那樣以可被預先掃描的形式直接寫進最初的 HTML,這代表就算影片檔案本身壓縮得再好,瀏覽器光是要發現它,天生就比圖片慢一截。

圖片能被瀏覽器的預先載入掃描器直接從最初 HTML 讀到、提早下載,背景影片多靠 CSS 或 JavaScript 疊加,要晚一步才開始載入。
圖片寫進最初的 HTML 就能被提早搶跑下載,背景影片得等樣式或腳本執行完才現身,天生慢一截。

而且這不是執行細節沒做好的問題,是多數網站現在連圖片這個相對簡單的優化都還沒做完。《2025 Web Almanac》的數字很直白,目前只有 2.1% 到 2.2% 的網站,會對 LCP 圖片做 preload;行動裝置網站裡,只有 17.3% 對 LCP 圖片設定 fetchpriority=”high”(告訴瀏覽器優先抓這個資源);仍有 16% 到 17% 的網站,誤把 LCP 圖片設成延遲載入,反而讓最該優先出現的內容更晚才顯示。連圖片格式都還停在舊時代,LCP 圖片有 57% 是 JPEG、26% 是 PNG,只有 11% 用 WebP 這種更有效率的格式,採用 AVIF 的網站不到 1%。把背景換成影片,等於是在這一整批基本功都還沒做完的基礎上,再疊上一層天生更慢的媒材。

行動用戶承擔的流量電量成本,還可能連效果都沒換到

台灣的網路使用者,其實多數時間本來就是用手機上網。根據財團法人台灣網路資訊中心(TWNIC)委託國立陽明交通大學執行的《2025 年台灣網路報告》,台灣整體上網率達 88.75%,其中行動上網率高達 87.12%,5G 行動上網率也攀升到 40.76%。換句話說,設計一支首頁背景影片時,大多數人第一眼看到它的裝置是手機,而不是設計稿裡那台大螢幕電腦。

自動播放背景影片在行動網路情境下的成本,不只是慢,還有實際的流量與電量負擔。Wistia(國際影音平台)的技術部落格估算過,一支 30 秒的全螢幕自動播放影片,大約會讓一個原本以圖文為主的頁面,資料量暴增到原本的 4 倍左右,多增加約 10MB 的下載量。如果使用者當下是用行動數據、或連在訊號不穩的公共 Wi-Fi,這 10MB 足以再拖慢頁面好幾秒,也直接吃掉使用者的行動網路流量。

更麻煩的是,這支影片能不能順利播放,設計端其實管不到最後一步。多數行動瀏覽器基於省電、省流量的考量,對自動播放內容原本就有限制,多半只有影片被靜音才會放行自動播放,一旦影片帶聲音,系統會直接擋下來,改成要使用者手動點擊才播放。這代表設計稿看起來的樣子,跟多數使用者實際看到的樣子經常對不起來。設計端以為畫面會自動動起來,實際到了使用者手上,可能只看到影片的第一格畫面靜止在那裡,等於白白背了效能與流量的代價,卻沒換到當初想要的動態效果。

背景影片不保證轉換率會跟著變好

真正該問的問題不是背景影片好不好看,而是轉換率會不會因此變好,這兩件事經常被混為一談,而 Wistia 自己拿掉首頁自動播放影片後的實測結果,恰好把兩者的落差攤在眼前。

Wistia(國際影音平台)在自家部落格公開過一組對照數字:把首頁的自動播放影片拿掉、改成傳統文字為主的版面之後,自然流量成長 53%,註冊率提升 7%,跳出率(exit rate)也改善 4%。文章分析,可能的原因有兩個:一是影片版首頁的文字量太少,搜尋引擎判斷這頁有沒有內容的訊號因此偏弱,連帶影響搜尋排名的能見度;二是原本的主要行動呼籲是先看完影片,拿掉影片後改成直接引導使用者前往註冊頁,少了一步轉換路徑裡多餘的環節,轉換自然更順。

這個結果不代表背景影片一定扣分,不過它點出真正的判準在哪裡。Unbounce(國際到著陸頁與轉換優化平台)資深轉換優化專家 Michael Aagaard 的第一手經驗是:影片背景在想傳達某種氛圍或感受的頁面上表現較好,例如研討會、表演活動、餐廳這類情境,靠文字或靜態圖片很難把那種臨場感講清楚;但在銷售提案本身比較複雜、需要大量文案說明的頁面上,影片背景反而容易變成干擾,這種情況該把資源放在把文案寫清楚,而不是加一支影片進去分散注意力。

網路上流傳已久、看起來很誘人的「影片能大幅提升轉換率」這類數字,值得多留一個心眼,很多來自涵蓋開箱、教學、推薦見證等各種影片形式與拍攝位置的舊研究,跟首頁全螢幕自動播放背景影片這種特定用法並不是同一件事,不能直接套用到自己的首頁決策上。

自動播放超過 5 秒,無障礙規範早已要求可以暫停

效能與轉換率之外,還有一件常被輕描淡寫的事,也就是讀者有沒有權利喊停這支影片。這不是主觀感受的問題,而是國際無障礙規範早就寫進條文裡的基本要求。

W3C(全球資訊網協會)《無障礙網頁內容指南》(WCAG)第 2.2.2 條「暫停、停止、隱藏」規定得很明確,任何自動開始、持續超過 5 秒、並與頁面上其他內容同時呈現的動態、閃爍、捲動或自動更新內容,除非這個動態本身是某項活動不可或缺的一部分,否則網站必須提供機制,讓使用者能夠暫停、停止或隱藏它。首頁的自動播放背景影片,幾乎都符合這條規則描述的情境,自動開始、持續遠超過 5 秒,又跟頁面上的標題、按鈕同時出現。

更值得留意的是,這條規則屬於 WCAG 3 個等級(A、AA、AAA)裡最基本的 Level A,等同網站的最低合格門檻,不是進階或加分項。這代表多數放了自動播放背景影片、卻沒提供暫停機制的首頁,連無障礙的入門標準都還沒跨過。

除了合規本身,自動播放的動態畫面也會直接增加使用者要處理的認知負荷,眼睛很難忽略持續變動的畫面,注意力被影片吸走的同時,原本該落在標題或按鈕上的視線就被分散掉。對本來就想直接完成某個動作的讀者來說,這支影片不是幫他更快理解頁面,而是多一個要先過濾掉的干擾。

頁面目的才是背景影片去留的判準

背景影片要不要留在首頁,答案不是「看情況」這種空話,而是有一套可以直接拿去用的判準。

背景影片去留看頁面核心任務:傳達品牌氛圍的頁面影片站得住腳,促成註冊或結帳的頁面則該拿掉,行動版至少關閉自動播放。
背景影片該留該換,先看這頁的核心任務是傳達氛圍還是促成轉換,決定後再補上技術與行動版的底線。
  1. 先問這個頁面的核心任務是什麼。如果任務是傳達品牌氛圍或情境感受,像展演活動、精品品牌、旅宿空間這類靠感覺說服的頁面,背景影片比較站得住腳,能做到文案很難做到的事;但如果任務是直接促成表單填寫、註冊或結帳,需要靠文案把提案講清楚,拿掉背景影片、把資源放在文案與更快的載入速度上,通常是更穩妥的選擇。
  2. 如果評估後仍決定要放影片,技術上至少要做到 3 件事才算合格:讓一張靜態海報圖成為真正的 LCP 元素,而不是讓影片本身背這個效能分數;影片延後在背景載入,不搶頁面第一波資源;影片本身要能被使用者自己暫停或停止。這 3 件事分別對應前面拆過的效能落差與無障礙規則,少做任何一件,前面付出的代價都拿不到對應的回報。
  3. 在手機是多數流量來源的現實下,至少要讓行動版關閉自動播放,或整個換成靜態圖片,不要讓自動播放在不同瀏覽器、不同網路環境下表現不一致,變成一種賭運氣的體驗。

首頁要不要放大影片,不是美學問題,而是一筆代價划不划算的問題。氛圍換得到,效能、流量與使用者的控制權就得先讓出去一部分;這筆帳算得清楚,影片才值得留在那裡,算不清楚,先把主視覺換回一張夠好的靜態圖片,通常比賭一支影片能不能順利播放來得踏實。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

背景影片為什麼會拖慢首頁載入速度?

背景影片多半靠 CSS 或 JavaScript 疊加呈現,不會像圖片一樣寫進最初的 HTML,瀏覽器的預先載入掃描器找不到它,得等樣式或腳本執行完才開始下載,天生就比圖片慢一截,多數網站連圖片本身的載入優化都還沒做好。

手機看首頁背景影片,流量電量耗多少?

一支 30 秒的全螢幕自動播放影片,估計會讓原本以圖文為主的頁面資料量暴增到約 4 倍,多增加約 10MB 的下載量。若使用者是用行動數據或訊號不穩的公共 Wi-Fi,這些流量會直接拖慢頁面,也吃掉使用者的行動網路流量。

手機瀏覽器會自動播放首頁背景影片嗎?

多數行動瀏覽器基於省電省流量考量,只有影片被靜音才會放行自動播放,一旦帶聲音就會擋下來,改成要使用者手動點擊才播放。這代表設計稿看起來會動的畫面,實際到使用者手上,經常只看到影片第一格畫面靜止不動。

拿掉首頁背景影片,轉換率會變好嗎?

Wistia 拿掉首頁自動播放影片、改成文字為主的版面後,自然流量成長 53%,註冊率提升 7%,跳出率也改善 4%。可能原因是影片版首頁文字量太少削弱了搜尋排名訊號,拿掉影片後行動呼籲也更直接導向註冊,少了轉換路徑裡多餘的環節。

自動播放影片,無障礙規範要求能暫停嗎?

有。WCAG 2.2.2 規定任何自動開始、持續超過 5 秒、又與頁面其他內容同時呈現的動態內容,除非是活動本身不可或缺,否則必須提供暫停、停止或隱藏的機制,這屬於最基本的 Level A 門檻,多數自動播放背景影片其實都還沒做到。

資料來源
  1. Largest Contentful Paint (LCP) — web.dev
  2. Don't fight the browser preload scanner — web.dev
  3. Performance | 2025 Web Almanac — HTTP Archive
  4. 2025 年台灣網路報告 — 財團法人台灣網路資訊中心(TWNIC)
  5. 6 Reasons Why You Shouldn't Have an Autoplaying Homepage Video — Wistia
  6. Understanding Success Criterion 2.2.2: Pause, Stop, Hide — W3C
  7. Do Video Backgrounds Help or Hurt Conversions? — Unbounce(Michael Aagaard)