Javascript Delay造成外掛衝突?1個實際案例分享解決方法

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

一、JetBlog Video Playlist

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

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

一、JetBlog Video Playlist

二、影片無法播放

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

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

二、影片無法播放

三、Crocoblock技術支持

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

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

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

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

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

三、Crocoblock技術支持

四、Perfmatters啟用

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

四、Perfmatters啟用

五、網頁恢復正常

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

五、網頁恢復正常

六、PageSpeed Insights

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

六、PageSpeed Insights

七、Persmatters客服

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

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

七、Persmatters客服

八、JavaScript Delay例外

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

Javascript Delay造成外掛衝突?1個實際案例分享解決方法

九、網頁故障排除

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

九、網頁故障排除

如何有效率解決外掛衝突

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

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

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

最新文章: