影片成效

在上一個單元中，您學到了一些與圖片相關的效能技術。圖片是網路上廣泛使用的資源類型，如果未妥善最佳化圖片並考量使用者的檢視區塊，可能會耗用大量頻寬。

不過，圖片並非網路上常見的唯一媒體類型。影片是網頁上常用的另一種熱門媒體類型。在瞭解可能的最佳化方式前，請務必先瞭解 <video> 元素的運作方式。

影片來源檔案

處理媒體檔案時，您在作業系統上看到的檔案 (.mp4、.webm 等) 稱為「容器」。容器包含一或多個「串流」。在大多數情況下，這會是視訊和音訊串流。

你可以使用轉碼器壓縮每個串流。舉例來說，video.webm 可以是 WebM 容器，內含使用 VP9 壓縮的視訊串流，以及使用 Vorbis 壓縮的音訊串流。

瞭解容器和轉碼器之間的差異很有幫助，因為這有助於使用大幅減少的頻寬壓縮媒體檔案，進而縮短整體網頁載入時間，並可能改善網頁的 Largest Contentful Paint (LCP)，這是一項以使用者為中心的指標，也是三項 Core Web Vitals 之一。

如要壓縮影片檔案，可以使用 FFmpeg：

ffmpeg -i input.mov output.webm

上述指令雖然是使用 FFmpeg 時最基本的指令，但會採用 input.mov 檔案，並使用預設的 FFmpeg 選項輸出 output.webm 檔案。上述指令會輸出較小的影片檔案，適用於所有新式瀏覽器。調整 FFmpeg 提供的影片或音訊選項，可能有助於進一步縮減影片的檔案大小。舉例來說，如果您使用 <video> 元素取代 GIF，請移除音軌：

ffmpeg -i input.mov -an output.webm

如要進一步調整，FFmpeg 提供 -crf 標記，可在不使用可變位元率編碼的情況下壓縮影片。-crf 代表「恆定速率因子」。這項設定可調整壓縮程度，方法是接受指定範圍內的整數。

H.264 和 VP9 等轉碼器支援 -crf 標記，但使用方式取決於您使用的轉碼器。如要瞭解詳情，請參閱以 H.264 編碼影片時的固定速率因子，以及以 VP9 編碼影片時的固定畫質。

多種格式

處理影片檔案時，指定多種格式可做為後備選項，供不支援所有新式格式的瀏覽器使用。

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

由於所有新式瀏覽器都支援 H.264 轉碼器，因此 MP4 可做為舊版瀏覽器的備用格式。WebM 版本可使用較新的 AV1 轉碼器，但支援程度尚未普及，也可使用較舊的 VP9 轉碼器，支援程度比 AV1 更廣，但壓縮效果通常不如 AV1。

poster 屬性

影片的海報圖片是使用 <video> 元素中的 poster 屬性新增，可讓使用者在啟動播放前，先瞭解影片內容：

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

自動播放

根據 HTTP 封存檔的資料，網路上有 20% 的影片包含 autoplay 屬性。autoplay 用於必須立即播放的影片，例如用做影片背景或取代 GIF 動畫。

動畫 GIF 檔案可能很大，尤其是包含許多細節複雜的影格時。動畫 GIF 消耗數 MB 的資料並不罕見，這可能會大量耗用頻寬，而這些頻寬其實更適合用於重要資源。一般來說，您應避免使用動畫圖片格式，因為 <video> 同等格式的效率更高。

如果網站必須自動播放影片，可以直接在 <video> 元素上使用 autoplay 屬性：

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

將 poster 屬性與 Intersection Observer API 結合使用，即可設定網頁，只在影片位於可視區域內時下載影片。poster 圖片可能是低畫質圖片預留位置，例如影片的第一個影格。影片顯示在可視區域後，瀏覽器就會開始下載影片。這有助於縮短初始可視區域內內容的載入時間。但缺點是，如果使用 poster 圖片做為 autoplay，使用者只會短暫看到圖片，直到影片載入並開始播放為止。

使用者啟動播放

一般來說，HTML 剖析器一發現 <video> 元素，瀏覽器就會開始下載影片檔案。如果您有 <video> 元素，且使用者會啟動播放，您可能不希望影片在使用者與元素互動前開始下載。

你可以使用 <video> 元素的 preload 屬性，影響影片資源的下載內容：

  • 設定 preload="none" 會通知瀏覽器，影片的任何內容都不應預先載入。
  • 設定 preload="metadata" 只會擷取影片中繼資料，例如影片長度和可能其他粗略資訊。

如果您載入的影片需要使用者啟動播放，最理想的情況可能是設定 preload="none"。

在這種情況下，您可以新增 poster 圖片，改善使用者體驗。 讓使用者大致瞭解影片內容。此外，如果海報圖片是 LCP 元素，您可以使用 <link rel="preload"> 提示和 fetchpriority="high"，提高 poster 圖片的優先順序：

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

嵌入內容

由於有效放送及最佳化影片內容相當複雜，因此將問題卸載至 YouTube 或 Vimeo 等專屬影片服務是合理的做法。這類服務會為您放送最佳化的影片，但從第三方服務嵌入影片可能會對成效造成影響，因為嵌入的影片播放器通常會放送許多額外資源，例如 JavaScript。

因此，第三方影片嵌入內容可能會嚴重影響網頁效能。根據 HTTP Archive 的資料，YouTube 嵌入內容會導致中位數網站的主執行緒遭到封鎖超過 1.7 秒。長時間封鎖主執行緒會嚴重影響使用者體驗，並可能影響網頁的「與下一個彩繪的互動 (INP)」。不過，您可以採取折衷做法，不要在網頁初始載入時立即載入嵌入內容，而是為嵌入內容建立預留位置，並在使用者與其互動時，以實際的影片嵌入內容取代預留位置。

示範影片

學以致用

父項 <video> 元素中的 <source> 元素順序不會決定最終下載的影片資源。

正確。
請再試一次。
不正確。
答對了！

<video> 元素的 poster 屬性會被視為 LCP 候選項目。

正確。
答對了！
不正確。
請再試一次。

下一步：最佳化網頁字型

在介紹完如何最佳化特定資源類型後，接下來要談的是字型。最佳化網站字型是經常被忽略的環節，但這項作業對網站整體載入速度，以及 LCP 和累計版面配置位移 (CLS) 等指標，都有顯著影響。