影片成效

在前一個單元中，您學到了與圖片相關的一些效能技術，這是網路上廣泛使用的資源類型，如果不謹慎進行最佳化，就可能耗用大量頻寬來最佳化圖片，並將使用者的觀點納入考量。

然而，圖片並非網路上常見的媒體類型。影片是另一種常見的網頁內容媒體類型。在查看一些可能的最佳化做法之前，請務必先瞭解 <video> 元素的運作方式。

影片來源檔案

使用媒體檔案時，您在作業系統上識別的檔案 (.mp4、.webm 等) 稱為「容器」。容器包含一或多個串流。在多數情況下，這是指影片和音訊串流。

您可以使用轉碼器來壓縮每個串流。例如，video.webm 可以是 WebM 容器，其中包含使用 VP9 壓縮的影片串流，以及使用 Vorbis 壓縮的音訊串流。

瞭解容器和轉碼器的差異很有幫助，因為這項工具可協助您使用大幅較少的頻寬壓縮媒體檔案，進而縮短整體網頁載入時間，而且也可能改善網頁的最大內容繪製 (LCP)。後者是以使用者為中心的指標，以及三項核心網站體驗核心指標中的其中一項。

如要壓縮影片檔案，其中一種方式是使用 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 屬性。如果必須立即播放影片，例如做為影片背景或動畫 GIF 的替換位置，系統就會使用 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 圖片可能是低品質的圖片預留位置，例如影片的第一個影格。當影片出現在可視區域後，瀏覽器就會開始下載影片。這可以縮短初始可視區域內內容的載入時間。相反地，為 autoplay 使用 poster 圖片時，使用者會收到一個只會顯示短暫顯示的圖片，直到影片載入並開始播放為止。

使用者啟動播放

一般來說，瀏覽器會在 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)) 產生重大影響。