如何在預算內提高媒體性能

本文得到了 Cloudinary 親愛的朋友的大力支持，他們幫助社區快速輕鬆地創建、管理和交付他們在任何瀏覽器、設備和帶寬上的數字體驗。 謝謝！

美國學者梅森·庫利 (Mason Cooley) 巧妙地描述了一個艱難的生活事實：“預算讓金錢失去樂趣。” 毫無疑問，媒體使網站活躍起來，增加了吸引力、興奮和陰謀，更不用說吸引留在頁面上並經常重新訪問它了。 然而，從長遠來看，正如失控的支出預示著不祥之兆一樣，預算外的數字媒體也會對網站性能造成影響。

一個恰當的例子：頁面加載速度下降一秒鐘就可能使亞馬遜損失 16 億美元的年銷售額。 在影響頁面加載速度的眾多因素中，媒體是一個重要因素。 因此，迫切需要優先優化媒體。 通過把錢花在這項任務上並對媒體進行預算，從長遠來看，您將獲得可觀的節省和收益。

績效預算

“性能預算是'......就像它聽起來的那樣：您在頁面上設置了一個'預算'並且不允許頁面超過它。 這可能是一個特定的加載時間，但當您將預算分解為請求數量或頁面大小時，通常會更容易進行對話。”

— 蒂姆·卡德萊克

作為規劃 Web 體驗和防止性能下降的機制的性能預算可能包含以下標準：

• 總頁重，
• HTTP 請求總數，
• 特定移動網絡上的頁面加載時間，
• 首次輸入延遲 (FID)
• 第一個內容塗料（FCP），
• 累積佈局移位 (CLS),
• 最大的內容塗料（LCP）。

Vitaly Friedman 有一個很好的清單，其中描述了影響 Web 性能的組件以及優化技術的有用提示。 熟悉這些組件將使您能夠設定性能目標。

通過明確記錄的績效目標，各個團隊可以就內容的最佳交付進行有意義的對話。 例如，預算可以幫助他們決定一個頁面是否應該包含五張圖片 - 或者三張圖片和一個視頻 - 並且仍然保持在計劃的限制範圍內。

但是，將性能預算作為一個獨立的指標可能沒有多大幫助。 這就是為什麼我們必須將績效與組織目標聯繫起來。

經營業績

如果您在非最佳視頻和圖像上花費大量字節，富媒體體驗將不再那麼豐富。 組織的存在是為了實現成果，例如誘使人們購買、教育他們、激勵他們或尋求幫助和志願者。 任何擁有網絡存在的人都會欣賞各種績效衡量標準對業務指標的影響之間的關係。

WPOStats 重點介紹了數百個案例研究，展示了性能下降（從幾百毫秒到幾秒）如何導致年銷售額大幅下降。 繪製這種關係極大地有助於跟踪績效對業​​務的影響，並最終為組織建立績效文化。

同樣，慢速網站會對轉化產生巨大影響。 在線企業面臨的一項艱鉅挑戰是在吸引觀眾和保持性能預算之間找到適當的平衡。

因此，觀眾參與的一個關鍵組成部分是優化的視覺媒體也就不足為奇了，例如，一段引人入勝的視頻，它將關於您的產品或服務的故事與相關、有趣和吸引人的視覺效果結合在一起。

根據麻省理工學院的神經科學家的說法，我們的大腦可以在不到 13 毫秒的時間內吸收和理解視覺媒體，而文本可以讓普通讀者花費 3.3 分鐘以上的時間來理解，通常是在重新閱讀並交叉引用其他地方之後。 難怪微視頻內容（通常只有 10-20 秒長）通常會帶來巨大的參與度和轉化率收益。

視頻的吸引力

在線購物時，我們希望看到詳細的產品圖片。 多年來，我更喜歡瀏覽輔以視頻的產品，這些視頻展示了產品的使用方法或組裝方法，或者展示了現實生活中的用例。

除了我個人的經驗，很多研究證明了視頻內容的重要性：

• 96% 的消費者在做出在線購買決定時發現視頻很有幫助。
• 79% 的在線購物者更喜歡觀看視頻以獲取產品信息，而不是閱讀網頁上的文字。
• 正確的產品視頻可以將轉化率提高 80% 以上。

談到網絡上的視頻交付，

“平均視頻權重每年都在急劇增加，移動端比桌面端更甚。 在某些情況下，這可能是有道理的，因為移動設備通常具有高分辨率屏幕，但這也可能是由於缺乏僅使用 HTML 提供不同視頻大小的能力。 網絡上的許多大型視頻都是手動放置在營銷頁面中的，並且沒有復雜的媒體服務器來提供適當的尺寸，所以我希望將來我們會看到類似的簡單 HTML 功能用於視頻交付，就像我們在響應式圖像中看到的那樣。 ”

— 斯科特·傑爾

Conviva 的 2020 年第四季度流媒體狀態（需要註冊）傳達了同樣的觀點，該報告指出，與其他設備相比，手機的緩衝問題多 20% ，視頻啟動失敗率高 19%，啟動時間長 5%。

除了渲染問題之外，視頻交付還會增加帶寬成本，尤其是在您無法交付瀏覽器的最佳格式的情況下。 此外，如果您不使用內容交付網絡 (CDN) 或多個 CDN 將用戶映射到最近的邊緣區域以減少延遲（這種做法稱為次優路由），您可能會減慢視頻的啟動速度。

同樣，未優化的圖像是頁面膨脹的主要原因。 根據 Web Almanac，發送到移動設備或桌面設備的圖像字節差異非常小，這對於實際上並不需要所有額外字節的設備來說，進一步浪費了帶寬。

毫無疑問，過度使用引人入勝但未經優化的內容會損害業務目標，而這正是平衡藝術發揮作用的地方。

平衡性能與媒體內容的藝術

儘管富媒體可以促進用戶參與，但我們需要平衡交付它們的成本與您的網站性能和業務目標。 一種替代方法是通過 YouTube 或 Vimeo 等第三方託管和交付視頻。

然而，儘管節省了帶寬，但這種方法是有代價的。 作為內容所有者，您無法構建完全定制的品牌體驗，或提供個性化服務。 當然，您需要託管和交付您的圖像。

您不必卸載您的內容。 還有其他可用選項。 考慮通過執行以下操作來改進您的系統以獲得最佳媒體交付：

了解您當前的使用情況

研究您的網頁的重量及其媒體資產的大小。 網絡研究專家 Tammy Everts 建議確保移動頁面的大小小於 1 MB，其他所有頁面的大小小於 2 MB。 此外，確定關鍵頁面上顯示的資源。

例如，您可以用短視頻替換一段文字和相關的圖像嗎？ 該決定將如何影響您的業務目標？ 在這個階段，您可能需要查看您的真實用戶監控 (RUM) 和分析，並確定導致更高轉化率和參與率的關鍵頁面。

此外，請務必使用 LightHouse 等工具綜合跟踪 Google 的 Core Web Vitals (CWV) 作為工具包的一部分。 您還可以通過像 CrUX 這樣的真實用戶監控 (RUM) 來測量 CWV。 由於 CWV 也將成為 Google 對爬蟲的信號，因此監控和優化這些指標是有意義的：最大內容繪製 (LCP)、首次輸入延遲 (FID) 和累積佈局偏移 (CLS)。

提供正確的格式

根據查看設備或瀏覽器的大小和分辨率，以最合適的格式提供圖像或視頻。 為此，您可能需要一個圖像 CDN。 或者，創建 WebM、AVIF、JPEG-XL、HEIC 等變體，並根據請求的 User-Agent 和 Accept 標頭選擇性地提供正確的內容類型。

對於一次性轉換，您可以嘗試使用 Squoosh.app 或 avif.io 等工具。 一個相關的做法是將動畫 GIF 轉換為視頻。 有關更多信息，請參閱此 Web.dev 文章。 想嘗試設置工作流程來處理視頻發布嗎？ 請參閱文章優化視頻的大小和質量中的重要提示。

提供合適的尺寸

移動設備上超過 41% 的圖像尺寸不正確。 因此，與其提供固定寬度，不如使用 Lazysizes 等工具裁剪圖像和視頻以適應容器大小。 更好的是，可以在裁剪圖像的同時檢測感興趣區域的 AI 工具可以為您節省大量時間和精力。 您還可以對首屏以下的圖像使用本機延遲加載。

為您的視頻添加字幕

幾乎 85% 的視頻都是無聲播放的。 為它們添加字幕不僅可以提供可訪問的體驗，還可以吸引觀眾的注意力並提高參與度。 但是，轉錄視頻可能是一項乏味的工作； 您可以使用基於 AI 的轉錄服務並對其進行改進以自動化工作流程。

通過多個 CDN 交付

CDN 可以緩解最後一英里的延遲，縮短視頻的開始時間，並可能減少緩衝問題。 根據 Citrix 的一項研究，多 CDN 策略可以進一步減少延遲，並在 CDN 邊緣節點局部中斷的情況下提供持續可用性。

您可以探索像 Cloudinary 的媒體優化器這樣的產品，而不是利用多個謹慎的工具，它可以有效且高效地優化媒體，通過多 CDN 邊緣節點提供正確的格式和質量。 換句話說，Media Optimizer 優化了質量和大小，在小文件中提供高視覺保真度。

漸進式渲染視頻

YouTube 上的自動播放預覽視頻顯示，視頻觀看時間增加了 90% 以上。 視頻自動播放幾乎沒有好處，也有很多缺點，因此在使用和不使用時要小心。 至少可以選擇暫停視頻，這一點很重要。

平衡頁面大小預算的一個好方法是首先僅提供 AI 創建的視頻預覽和海報圖像，僅在用戶點擊視頻時加載完整視頻。 這樣，您可以消除不必要的下載並加速頁面加載。

或者，在開頭加載預覽視頻並讓播放器自動播放完整版本。 預覽完成後，播放器會使用網絡連接 API 檢查設備的連接類型，如果用戶連接良好，則將源從預覽切換到實際視頻。

您可以查看示例頁面以獲取演示。 這裡有一個提示：由於 CDN 可以更可靠地檢測網絡連接類型，因此您的生產質量代碼可以利用 CDN 檢測網絡速度，基於此，您的客戶端代碼可以逐步加載長格式視頻。

包起來

未來，由於視覺媒體以文字無法做到的方式講述故事的非凡能力，視覺媒體將繼續成為網站和移動應用程序的主導元素。 但是，確定要交付的正確內容取決於您的業務戰略和站點性能。

“性能預算並不能指導您決定應該顯示哪些內容。 相反，它是關於您如何選擇顯示該內容。 完全刪除重要內容以減少頁面的重量並不是一種性能策略。”

— 蒂姆·卡德萊克

這是值得牢記的合理建議。