影片成效

在前一個單元中，您已瞭解到 是網路上廣泛使用的資源類型 可以保持足夠頻寬 會將可視區域納入考量

然而，網路並不是唯一常見的媒體類型。影片是 其他常用的媒體類型。開始瞭解 可能的最佳化做法 請務必先瞭解<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> 等效法對於這種媒體來說，效率高出許多。

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

<!-- 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 元素，您可以增加 poster 圖片的 優先使用 <link rel="preload"> 提示和 fetchpriority="high":

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

嵌入內容

由於一切都複雜，能夠有效最佳化及放送影片內容 可能會想將問題卸載給專屬的影片服務 如同 YouTube 或 Vimeo。這類服務能為您提高影片的放送頻率 嵌入第三方服務的影片，會對成效造成明顯的影響。 因為內嵌影片播放器通常可以放送大量額外廣告 例如 JavaScript

因此，第三方影片嵌入功能可能會對網頁產生重大影響 才需進行根據 HTTP 封存，YouTube 嵌入會封鎖主執行緒 超過 1.7 秒。封鎖 長時間維護是嚴重的使用者體驗問題，可能會影響 頁面的「與下一個顯示的內容互動 (INP)」一節。然而，您可能會對 「不要」在初始網頁載入期間立即載入嵌入 為內嵌影片建立預留位置，替換成實際的內嵌影片 並在使用者與應用程式互動時觸發

示範影片

學以致用

內 <source> 元素的順序 「不會」判斷父項 <video> 元素 最終下載的影片資源

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

<video> 元素的 poster 屬性 視為 LCP 候選人。

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

下一項：將網頁字型最佳化

接下來要探討的是字型。 最佳化網站的字型是很常見的情況，但其實不然 對網站整體載入速度有顯著影響 例如 LCP 和累計版面配置位移 (CLS)。