Javascript Delay可以延遲某些網頁元素執行，通常用於加快網站載入速度，但有可能造成WordPress外掛衝突，本文以網頁影片播放的實際案例，分享如何解決此問題的流程。

一、JetBlog Video Playlist

贊贊小屋Wordpress網站一直有在使用Crocoblock所提供的JetBlog這個外掛，它有很多網頁小工具，在WordPress區塊和Elementor編輯器都可以很方便使用。

在許多小工具中贊贊小屋最常用到的是「Video Playlist」，它會依照 YouTube頻道的播放清單在網頁上建立影片播放器，如同截圖所示，它在右側有影片清單列表，是一個很好用的工具。

二、影片無法播放

實際使用的時候曾經遇到一個問題，不知為何在網頁上突然間不能播放影片，這裡的網址並非贊贊小屋網站，它是利用Kinsta主機平台所建立的一個複製網站，內容和原始正式的贊贊小屋網站看起來一模一樣，可說是一個臨時的過度網站，通常是剛開始架設網站的模板，或者像這篇文章的狀況，作為測試外掛問題的工具。

延伸閱讀：Kinsta測試環境：複製WordPress網站，外掛升級評估。

三、Crocoblock技術支持

全世界有一半網站是利用WordPress工具架設，主要原因之一便是有豐富的外掛可以加載使用，然而也正是許多外掛有不同的功能作用，很有可能在運作時彼此有所衝突，在實務上很有可能會遇到，再加上WordPress本身會不斷改版，所以遇到外掛問題是見怪不怪。

遇到外掛問題，如果已經進階付費的Pro帳戶使用者，只要在客服中心提出技術支援，依照贊贊小屋經驗都會及時得到回覆，並且能夠有效解決。

以這篇文章的狀況為例，在提供Crocoblock技術人員贊贊小屋網站的管理員帳戶之後，對方反覆測試確認是有幾款外掛可能會和影片播放有所衝突，而贊贊小屋一看就猜測應該是Perfmatters這款以網站性能外掛，經過測試果真如此。

附帶一提，在請求網站外部技術人員幫助的時候，常常會需要提供自己網站的管理員臨時帳號，這部分可以參考贊贊小屋相關文章：

Temporary Login Without Password外掛：短期登入為WordPress網站管理員。

四、Perfmatters啟用

測試外掛衝突最簡單方法是把可能造成衝突的外掛停用，例如在Wordpress控制台將Perfmatters停用。

五、網頁恢復正常

上個步驟停用了外掛，接著是實際測試效果如何，在這裡由於原因已經相當確定，所以直接在正式網站停用外掛，並且在正式網站測試，果然網頁上可以正常播放影片了。

六、PageSpeed Insights

全面停用外掛雖然解決了影片播放的問題，可是每一款外掛都有它的用途，Perfmatters是為了提昇網站速度，因此停用之後，在Google的PageSpeed Insights分數已經從原本八十幾分一下子降到了「31」分。

七、Persmatters客服

先前第三步驟Crocoblock外掛技術人員提到影片無法正常播放可能要直接尋求Perfmatters外掛的協助，這個其實也可以理解，因為提昇網站的速度一般而言有兩個方法，其一是利用緩存機制將網站資料暫存在不同地方的伺服器主機，或者是在使用者的瀏覽器就近緩存，通常這個不會影響到網頁功能的執行。但是還有另外一種提昇速度的方式是延遲，在一開始載入網頁時就阻止某些網頁元素或者是程式碼的執行，如此就很有可能會造成影片無法播放的情況，但這個並非影片播放外掛本身的問題，它預設的是在正常普通網頁上進行。

因此贊贊小屋同時也尋求Perfmatters這款外掛的技術協助，對方所提供的方法很簡單也很合理，在延遲載入的例外清單中加入「/Jet-blog/」。

八、JavaScript Delay例外

依照外掛技術人員的回覆說明和信件內的參考圖片，贊贊小屋在正式網站Perfmatters外掛中從原本的停用切換為啟用，並且在「Delay JavaScript」中排除延遲「Excluded from Delay」的欄位中加入「/jet-blog/」外掛和其他技術人員提出的項目。

九、網頁故障排除

設定好了之後前往網頁進行測試，終於看到影片可以正常播放了，而且是在沒有停用任何外掛的基礎上。

如何有效率解決外掛衝突

這篇文章涉及WordPress網站很典型的外掛衝突，測試方法通常是將全部外掛都停用，再逐一啟用進行評估，這個方法雖然一定有效，可是在網站外掛比較多的情況下，這個測試排查的過程相當麻煩，可能要花一些時間，因此如果是付費外掛的話，可以像文章所用的方法，請求外掛技術人員的協助，如此較有而且精準，依照贊贊小屋實際經驗是使用付費外掛的一大好處。

另外還有一個心得是發現哪些外掛有所衝突，其實只是找到問題出在哪裡，但不一定能夠解決問題，而如果是像文章範例的Delay JavaScript（JS延遲載入），它是一個算是非常技術性的操作，最好是直接尋求外掛技術人員的協助。

參考資料：MDN Web Docs首次輸入延遲。