1 個步驟,改善 YouTube 影片載入速度、提升訪客觀賞體驗 – 使用 Presto Player
不管是 YouTuber、跟隨 YouTuber 的粉絲、將影片託管在 YouTube 上並內嵌在 WordPress 播放的網站,只要是觀賞來自於 YouTube 的影片都會有一種很強的「置入性行銷」感受,不斷的會看到「別人」想讓我們看到的廣告內容。
網路時代,免費使用 Google、Facebook 的代價就是將個人瀏覽紀錄等個資免費授權給網路科技大頭們使用。
取而代之的,網路世界現在已經不再自由,而我們有什麼辦法可以減少這些衝擊與影響呢?
現在我們有另一個選擇,透過 Presto Player 外掛作為線上影片播放器播放來自於 YouTube 的影片,即可:
- 大幅改善影片載入速度
- 提升訪客觀賞影片的體驗
- 增加網站行銷活動的轉換率
安裝 Presto Player
首先,在網站後台管理頁面的「外掛」>「安裝外掛」搜尋 Presto Player 後進行安裝並啟用外掛。
簡單設定
Media Hub
外掛啟用之後就能在管理頁面找到 Presto Player 的管理選單。
新增影片、設定 Preset
選擇 Media Hub 之後點選 Add New 新增影片。Presto Player 支援的影片類型有四種:
- Video – 本地託管的影片
- YouTube – YouTube 託管的影片
- Vimeo – Vimeo 託管的影片
- Bunny.net – Bunny.net 託管的影片
選擇影片類型為 YouTube 之後,輸入名稱以及 YouTube 的影片網址。
接著就能在右邊的編輯區塊中進行設定。可以直接選取預設的「Youtube Optimized」,這是專門為 YouTube 影片最佳化目的使用;或是自行設定影片的 Preset,除了 YouTube 影片最佳化以外,還可以進一步對影片播放器上的控制面板進行設定、調整。
將影片內嵌至文章中
完成新增影片設定之後,未來就能在 Media Hub 中看到這個影片了。後續可以在編輯文章的時候透過以下方式將影片內嵌至文章中,功能整合相當方便。
- 短代碼 Shortcode
- 區塊
- 工具列中釘選的「Presto Player」區塊
影片載入速度比較
這次的測試對象是 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 可以直接上他們的官網看看唷。
有任何問題也歡迎加入社團一起討論唷
Presto Player 終生授權方案
↓取得一般方案20%、LTD方案$100折扣↓
請問在Tutor Lms 課程中/各小節以Youtube影片設定連結後,在播放中都會出現Youtube的專用播放器,包含左下角引導到Youtube觀看,右上角出現稍後觀看、分享,並且在影片播放到最後會出現Youtube影片推薦,等這類在播放器上出現的訊息,該如何關閉,因為是自己建置的付費課程,這類資訊不適合顯示在前台,感謝分享。