影片成效

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

然而,網路並不是唯一常見的媒體類型。影片是 其他常用的媒體類型。開始瞭解 可能的最佳化做法 請務必先瞭解<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)