如何在不影響站點速度的情況下將視頻嵌入 WordPress [完整指南]

近年來，視頻已成為許多用戶首選的媒體格式。 統計數據證明了這一點：

• 與僅文本頁面相比，放置在著陸頁上的視頻可將轉化率提高 86% 。 （願望池）
• 62% 的消費者在購買前會觀看產品評論視頻。 （商業社區）
• 80% 的客戶通過在 YouTube 上觀看品牌視頻開始“客戶之旅” 。 （智能洞察）

但是，儘管這些數字很驚人，但您需要了解有關視頻的一些知識：

它們會對您的網絡性能產生負面影響。

因此，在向您的頁面添加一個時，您必須在大小、質量和速度之間取得適當的平衡。

在接下來的幾行中，您將了解將視頻嵌入 WordPress 網站的最佳方式。

• 嵌入視頻會減慢您的網站速度嗎？
• 在 WordPress 上託管視頻的最佳方式是什麼？
• 如何優化 WordPress 中的視頻？

讓我們開始吧！

嵌入視頻會減慢您的網站速度嗎？

由於尺寸較大，視頻會增加頁面重量並減慢加載時間。

眾所周知，圖像是互聯網上頁面重量的最大貢獻者。 但是，根據網絡年鑑，當涉及到每個請求的大小時：

“……每個請求的最大貢獻者是視頻、音頻和字體。 在第 90 個百分位，視頻請求的重量為 2,158 KB，比所有其他第 90 個百分位類型的總和大四倍。”

資料來源：Web Alamanc 2022

為了說明視頻對網絡性能的影響，讓我們在首屏顯示視頻的代理頁面上運行一些測試。

首先，為了設置一些基準，我們將在啟用所有 NitroPack 優化的情況下對其進行測試。

以下是三種最流行的網絡性能測試工具的結果：

• PageSpeed Insights（帶 NitroPack）

• GTmetrix（帶 NitroPack）

• Pingdom（帶 NitroPack）

現在讓我們看看在沒有應用性能優化的情況下我們的結果是什麼樣的：

• PageSpeed Insights（沒有 NitroPack）

首先，我們看到整體性能得分急劇下降：

其次，大多數警告建議優化我們的視頻：

減少未使用的 JavaScript

減少未使用的 CSS

減少第三方代碼的影響

一些第三方資源可以使用外觀進行延遲加載

避免巨大的網絡負載

• GTmetrix（無 NitroPack）

我們的成績從 A 降到 B，我們的績效得分直線下降到 85%：

• Pingdom（沒有 NitroPack）

結果的差異不言而喻：

94 → 64
434.7 KB → 3.3 MB
748 毫秒 → 2.55 秒
46 個請求 → 125 個請求

重要提示：雖然我們不能將結果的下降完全歸因於一個未優化的視頻，但它對性能的巨大影響是顯而易見的。

因此，將視頻添加到您的 WordPress 網站似乎是一把雙刃劍。

但它不一定是。

事實上，在採取行動之前了解所有不利因素可以讓您找到更有效地減少不利因素的最佳方法。

繼續閱讀以了解操作方法。

在 WordPress 上託管視頻的最佳方式是什麼？

嵌入是將視頻添加到您的 WordPress 網站的最佳方式。 這涉及將您的視頻上傳到第三方服務，例如 YouTube 或 Vimeo，然後使用提供的 URL 或代碼將其嵌入您的頁面。 通過這樣做，您可以利用 YouTube 或 Vimeo 的服務器資源，而不是您自己的。

這是簡短的回答。

讓我們仔細研究每個選項並闡明原因：

• 不建議上傳（自託管）視頻
• 嵌入是首選

為什麼你不應該託管自己的視頻

當您上傳/託管視頻時，您會將視頻文件存儲在您的網站和服務器上。

即使您的託管計劃每月提供大量帶寬，但經常有很多人下載大文件也會造成不必要的資源浪費。

我們只是觸及表面。

以下是您應避免將視頻上傳到 WordPress 的其他幾個原因：

1.增加帶寬使用
儘管我們已經部分提到了這個缺點，但了解上傳視頻文件如何對您的託管費用和性能產生負面影響至關重要。

帶寬是指在給定時間內可以從您的託管帳戶傳輸的數據量。 假設您的目標網頁有 50KB 的資源。 每當訪問者登陸它時，他們必須從您的網站下載 50KB，這反過來又會佔用您分配的 50KB 帶寬。

因此，您網頁上的文件越大，您需要的託管資源就越多。

最重要的是，如果單個大視頻文件收到太多請求，則可能會超出您的虛擬主機服務器的限制，並且您的網站可能會暫時停用，直到問題得到解決。

2.加載慢，用戶體驗差
一種常見的誤解是服務器獨自承擔託管大型視頻文件的負擔以及由此造成的任何損害。 不幸的是，情況並非總是如此。

將視頻直接上傳到您的 WordPress 網站通常會導致流媒體延遲，導致觀眾不滿意、糟糕的用戶體驗和大量的憤怒點擊。

最重要的是，您的視頻加載速度取決於訪問者的互聯網連接以及他們與託管視頻的服務器的距離。

3.不同的瀏覽器，不同的文件格式
由於當前的 HTML5 規範，所有瀏覽器均不使用標準視頻格式。

例如，雖然 Safari 支持 H.264 (MP4) 視頻，但它不支持 WebM 或 Ogg。 另一方面，Firefox 支持 Ogg 或 WebM 視頻但不支持 H.264。 幸運的是，Chrome 可以播放所有主要的視頻格式。

但是，如果您想確保您的視頻可以在所有主流瀏覽器上播放，您需要將視頻轉換為多種格式，例如 .mp4、.ogv 和 .webm。

這意味著您將要上傳三個單獨的視頻文件，每個文件都可能有數百兆字節。

沒有布埃諾！

4. 不同瀏覽器的質量不同
如果上傳三個不同的視頻文件聽起來不多，其實還有更多。

您可能需要多種工具才能將視頻轉換為所需的格式。

問題？

每個應用程序處理轉換過程的方式都略有不同。

因此，您的視頻質量可能會因格式而異。

更糟糕的是，每個網絡瀏覽器都有自己處理視頻播放的方式。 因此，同一個視頻文件可能在一個瀏覽器中看起來很棒，但在另一個瀏覽器中卻很糟糕。 因此，您可以花費數小時進行試驗，直到找到完美匹配。

如果您決定託管您的視頻，這些只是您將面臨的幾個障礙。

或者，您可以跳過所有令人頭疼的問題，選擇更簡單的選項——嵌入您的視頻。

為什麼嵌入是在 WordPress 上託管視頻的最佳方式

了解自託管視頻的缺點後，我們相信您可以猜到為什麼嵌入是推薦的途徑。 但是，讓我們來看看一些好處：

• 節省帶寬。 使用第三方服務託管您的視頻意味著您將節省服務器資源。
• 節省磁盤空間。 您可以添加任何大小的視頻，而不必擔心它們會佔用多少磁盤空間。 您可以將託管空間用於網站文件和電子郵件。
• 無需將您的視頻轉換為不同的格式。 您可以在任何網絡瀏覽器和操作系統上播放嵌入式視頻，無論您使用何種格式將視頻上傳到第三方平台。
• 額外的流量和知名度。 例如，在 Youtube 上發布您的視頻意味著用戶可以通過瀏覽該平台偶然發現它。 反過來，這可能會給您的網站帶來額外的流量。
• 更好的質量。 將文件轉換排除在外，您將能夠顯示最高質量的視頻。
• 響應式設計。 視頻共享平台確保嵌入的視頻以最適合特定頁面的尺寸顯示，這要歸功於它們的完全響應能力。

這是嵌入視頻在您的頁面上的樣子：

簡而言之：

您可以獲得 YouTube 的所有功能並為用戶提供熟悉的體驗，而不會因不必要的請求使您的服務器超載。

如何在 WordPress 中嵌入視頻

這非常容易。

以下三種方式任選其一，一分鐘嵌入視頻：

1. 將視頻的 URL 粘貼到您的頁面/帖子中
我們知道這聽起來好得令人難以置信，但是是的 - 您需要做的就是將視頻的 URL 粘貼到您希望它出現在頁面上的位置。

然後，WordPress 會識別它並自動為您嵌入它。

2.使用iFrame方法
轉到您的 YouTube 視頻並單擊共享。

然後，不要復制您的 URL，而是單擊嵌入。

複製 iFrame：

返回 WordPress 編輯器，從可視化模式更改為文本模式，並粘貼嵌入代碼：

就是這樣。

3.插入視頻塊
WordPress 有一個內置選項，可以使用塊嵌入視頻。 只需添加一個新塊並蒐索“視頻”：

選擇您的第三方平台並粘貼您的視頻的 URL 地址。 您的視頻應該出現在您的頁面上。

既然您知道在 WordPress 上上傳視頻的基本要素，那麼讓我們看看如何優化您的視頻內容以獲得最佳網絡性能，好嗎？

如何優化 WordPress 中的視頻？ [5 個性能提示]

無論您是託管還是嵌入來自第三方平台的視頻，添加視頻文件都不可避免地會影響頁面的加載時間。

但說實話 - 每個文件都會以某種方式影響網頁的速度。

好消息？

您可以優化站點資源以獲得更好的性能。

在優化視頻方面，以下最佳做法會有所幫助：

1.懶加載非關鍵資源

用戶希望看到快速繪製的內容並體驗立即變得互動的網站。

也就是說，並非所有資源對於從一開始就提供最佳用戶體驗都是至關重要的。

如果您的視頻出現在頁面的後面，則無需立即加載它，因為：

1. 它減慢了渲染過程。
2. 用戶甚至可能不會向下滾動來查看它。
3. 它會對整個用戶體驗產生負面影響。

確保延遲加載所有非關鍵資源。 您可以使用 defer 和 async 屬性。

通過使用 async 和 defer 屬性，瀏覽器可以在解析 HTML 時在後台加載阻止呈現的腳本。 這使瀏覽器能夠構建 DOM 並呈現頁面，而不會被腳本下載阻止。

因此，您將看到以下指標的改進：

• First Contentful Paint（FCP）
• 最大內容繪畫 (LCP)
• 第一輸入延遲 (FID)
  

2. 避免循環自動播放視頻

儘管自動播放視頻仍然很流行，尤其是作為主頁背景，但如果實施不當，它們會造成各種站點速度問題。

儘管它們看起來很酷，但它們會顯著提高您的 Largest Contentful Paint (LCP) 分數。

要求瀏覽器在播放視頻的同時加載基本元素（如 HTML、圖像和 JavaScript）可能會使瀏覽器過載並導致其執行緩慢。

如果您仍想嘗試，請保持視頻盡可能短，並導出沒有音頻的文件。

這就是 Weglot 所做的：

他們的性能統計數據非常好：

3. 使用內容分發網絡 (CDN)

內容分發網絡 (CDN) 由許多分佈在世界各地的服務器組成。 它的主要工作是縮短用戶和網絡服務器之間的物理距離，從而加快加載時間。

除了提高站點的整體性能外，無論用戶從何處訪問，CDN 都會提高流式視頻的響應速度和無縫性。

4. 預加載您的視頻

預加載您的視頻可以為您的網站帶來額外的性能提升。

您可以使用視頻預加載屬性或鏈接 rel=preload。

使用視頻預加載屬性向瀏覽器提供有關預加載多少信息或內容的提示：

但是，瀏覽器可能會完全忽略視頻預加載屬性，因為它只是一個提示。

如果你想強迫你的意志，那麼使用link rel=preload 。

Link rel=preload是一種聲明式獲取，它強制瀏覽器獲取您知道對頁面體驗至關重要的資源。

使用 rel=preload 時，添加一個“as”值是必不可少的。 “as”值告訴瀏覽器在不延遲更重要的文件或落後於不那麼重要的文件的情況下為您預加載的資源提供什麼優先級。

5.使用頁面速度優化插件

我應該自託管還是嵌入？ 我應該升級我的託管資源嗎？ 如果我決定嵌入，我應該使用哪個平台？

一旦您決定了要走的路，就該進行下一個重要步驟了——自動優化我的視頻的最佳方式是什麼？

考慮嘗試 NitroPack——一種一體化的性能優化解決方案，可以在不影響您的設計和視頻質量的情況下加速您的 WordPress 網站。

得益於一系列強大的功能，例如：

• 視頻懶加載
• 關鍵資源優先於非關鍵資源
• JavaScript 延遲加載
• 關鍵 CSS
• 內置CDN
• 和更多…

您可以無風險地嵌入 Youtube 視頻，並從一開始就吸引您的網站訪問者。

免費試用 NitroPack →

不要忘記測試

無論您決定使用哪種上傳方法，請不要忘記：

向網站添加視頻不應以犧牲網站性能為代價。

是的，用戶更喜歡消費視頻內容，但如果您的頁面速度很慢，他們甚至可能看不到它。

這就是為什麼在上傳/嵌入視頻之前和之後運行測試至關重要。

要在大小、質量和速度之間取得適當的平衡，您可以使用眾所周知的測試工具

• PageSpeed 洞察力
• GTmetrix
• 平國

在 WordPress 常見問題解答中嵌入視頻

為什麼我的 YouTube 視頻不能嵌入 WordPress？

創建 WordPress 站點時，您可以選擇允許或禁止嵌入。 確保您已允許它們。 為此，請轉到設置 >> 媒體，然後在嵌入下選中選項“如果可能，將來自 URL 的媒體內容直接嵌入到頁面上”選項。

為什麼我將視頻上傳到 WordPress 時出現錯誤？

有兩種可能性——要么是與不穩定的網絡連接相關的客戶端錯誤，要么是與低服務器資源相關的託管錯誤。

為什麼我總是收到播放錯誤？

很可能是同時運行的進程太多，導致播放錯誤。