.st0{fill:#FFFFFF;}

1 個步驟,改善 YouTube 影片載入速度、提升訪客觀賞體驗 – 使用 Presto Player 

不管是 YouTuber、跟隨 YouTuber 的粉絲、將影片託管在 YouTube 上並內嵌在 WordPress 播放的網站,只要是觀賞來自於 YouTube 的影片都會有一種很強的「置入性行銷」感受,不斷的會看到「別人」想讓我們看到的廣告內容。

網路時代,免費使用 Google、Facebook 的代價就是將個人瀏覽紀錄等個資免費授權給網路科技大頭們使用。

取而代之的,網路世界現在已經不再自由,而我們有什麼辦法可以減少這些衝擊與影響呢?

現在我們有另一個選擇,透過 Presto Player 外掛作為線上影片播放器播放來自於 YouTube 的影片,即可:

  • 大幅改善影片載入速度
  • 提升訪客觀賞影片的體驗

安裝 Presto Player

首先,在網站後台管理頁面的「外掛」>「安裝外掛」搜尋 Presto Player 後進行安裝並啟用外掛。

Presto Player - Improve Performance - Install Presto Player plugin

簡單設定

Media Hub

外掛啟用之後就能在管理頁面找到 Presto Player 的管理選單。

Presto Player - Improve Performance - Control Panel

新增影片、設定 Preset

選擇 Media Hub 之後點選 Add New 新增影片。Presto Player 支援的影片類型有四種:

  • Video – 本地託管的影片
  • YouTube – YouTube 託管的影片
  • Vimeo – Vimeo 託管的影片
  • Bunny.net – Bunny.net 託管的影片

選擇影片類型為 YouTube 之後,輸入名稱以及 YouTube 的影片網址。

Presto Player - Improve Performance - Media Hub - Add New Video

接著就能在右邊的編輯區塊中進行設定。可以直接選取預設的「Youtube Optimized」,這是專門為 YouTube 影片最佳化目的使用;或是自行設定影片的 Preset,除了 YouTube 影片最佳化以外,還可以進一步對影片播放器上的控制面板進行設定、調整。

Presto Player - Improve Performance - Preset - YouTube Optimized

將影片內嵌至文章中

完成新增影片設定之後,未來就能在 Media Hub 中看到這個影片了。後續可以在編輯文章的時候透過以下方式將影片內嵌至文章中,功能整合相當方便。

  • 短代碼 Shortcode
  • 區塊
Presto Player - Improve Performance - embed Presto YouTube Video Block
  • 工具列中釘選的「Presto Player」區塊
Presto Player - Improve Performance - Media Hub - Post - embed Presto Player Videos

影片載入速度比較

這次的測試對象是 NowOnTrip 網站的「心浮氣躁時,燉一鍋《紅燒牛腱湯》」文章。由於這篇文章內嵌了其他 YouTuber 的影片,因此成為這次案例分享的最佳對象。

我們總共使用了幾個不同的網頁速度測試工具,分別比對了頁面大小以及 Core Web Vitals 各項指標。

光是從使用 YouTube 區塊內嵌影片 (左) 改為使用 Presto YouTube Video 區塊內嵌影片 (右),我們可以看到整體頁面載入大小的變化:

  • JavaScript – 從 1.04 MB 減少為 524 KB
  • CSS – 從 243 KB 減少為 191 KB

Core Web Vitals 各項指標的變化也相當的顯著。

  • First Contentful Paint – 減少近 1 秒
  • Time to Interactive – 減少近 3 秒
  • Speed Index – 減少 1 秒
  • Largest Contentful Paint – 減少近 5 秒

GTmetrix

WordPress Pagespeed Insights 外掛 (行動版)

Chrome Inspect > Lighthouse (行動版)

訪客觀賞體驗比較

接著來看訪客在觀賞影片時的實際體驗差異有多大。

影片播放前的預覽畫面

  • (左) YouTube 區塊內嵌影片
    充斥著 YouTube 的 Logo、功能浮水圖層以及 YouTuber 的 Logo 與標題,對於單純只是引用、參考外部影片的部落客來說相當不美觀且雜亂。
  • (右) Presto YouTube Video 區塊內嵌影片
    簡單的設定了圓角以及完整的播放操作面板。對於操作面板功能、正中央的播放圖層、Logo 圖層以及 Call to Action 的 Action Bar 都可以透過 Presto Player 額外設定。

影片播放後的暫停畫面

  • (左) YouTube 區塊內嵌影片
    只能說是災難一場,除了上面說的影響視覺的圖層之外,推薦影片中甚至出現了其他 YouTuber 的廣告。
  • (右) Presto YouTube Video 區塊內嵌影片
    當影片暫停時,就是顯示暫停時的畫面,僅止於此。

結語

品牌的塑造相當不易,我們當然也能理解 YouTube 就商業上的考量需要「賣廣告」,但其實部分的網路使用者是能夠接受使用者付費以獲得更好的服務,而並非是齊頭式、次級的服務水準。

透過 Presto Player,本文介紹了相當簡便的方式可以將內嵌 YouTube 影片的網頁載入效能大幅提升,並且有效的改善訪客的影片觀賞體驗。

有興趣想多了解 Presto Player 可以直接上他們的官網看看唷。

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>