自動優化腳本和样式是一把雙刃劍

已發表: 2020-11-18

您肯定在互聯網的某個角落聽到過一位大師談論 WPO 的重要性。 除了檢查這個首字母縮寫詞的含義之外，您可能還認為該專家的建議是優化您的網站並最終提高其性能的關鍵。

我不會是質疑它的人。 WPO 很重要，但在將專家提供的一些建議付諸實踐時，您也必須非常小心，無論該人多麼聰明。

在 WordPress 中，通常會讀到必須安裝一系列插件才能提高網站的性能。 這裡有一個 SEO 插件，那裡有一個緩存插件，一個安全插件總是必要的……簡而言之，教 WordPress 初學者的典型談話看起來像一個口袋妖怪視頻遊戲：必須抓住他們（插件）！

常識，即使它是最不常見的感覺，它告訴我們，在 WordPress 中，我們必須使用盡可能少的插件來覆蓋我們需要的最大數量的功能。 無需安裝所有現有插件。 事實上，這不是推薦的做法。 優化您的網站比安裝一個簡單的插件更複雜。

當心 WordPress 中的神奇插件

但是繼續上一個主題 WPO，這是 WordPress 中非常流行的一種插件，它通過縮小和組合腳本和样式來提高網站的速度。 在大多數情況下，這些插件作為在網站性能指標上達到 100 的靈丹妙藥出售。 在其所謂的優勢中，我們有以下幾點：

  1. 他們縮小 CSS 樣式和 JavaScript 腳本以減小它們的大小，從而減少下載它們的時間。
  2. 它們結合了所有 CSS 樣式和 JavaScript 腳本，因此您的訪問者只加載一個 CSS 文件和一個 JavaScript 腳本，從而減少了他們必須向服務器發出的請求數量。
  3. 他們放置了async和defer標籤，這樣網絡就不會等待腳本加載並繼續執行。
  4. 他們刪除了不必要的元素，例如表情符號。
  5. 它們允許應用延遲加載圖像以進一步減少您網站的加載時間。

好的，這很完美。 但是，如果您是安裝和激活自動優化插件而不閱讀細則的人之一，我很遺憾地告訴您，您的網站崩潰的可能性非常高。

使用 WordPress 插件添加和縮小腳本可能是一把雙刃劍。
使用 WordPress 插件來組合和縮小腳本可能是一把雙刃劍。

自動優化插件可能看起來像靈丹妙藥，但它們也可能最終將您的網站變成雷區。 是的，你不會離開那里而不踩上一個並破壞你網站的某些部分。

原因很容易解釋。 將 JavaScript 腳本組合併縮小到單個文件中的 WordPress 插件可能無法保持這些腳本的執行順序，這會導致許多錯誤。

如果我們回顧一下在 WordPress 中將腳本排入隊列的正確方法，我們必須去看看wp_enqueue_script()函數的定義：

 wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

該函數的第三個參數是依賴項列表，它只不過是我們正在排隊的腳本正常運行所需的其他腳本的名稱。 這意味著，在腳本運行時，它的所有依賴項都必須已經加載到站點中。

腳本入隊的順序很重要，依賴項也很重要。 如果我們使用wp_enqueue_script函數，WordPress 會負責創建正確的順序，確保腳本按應有的方式加載到頁面上。

問題是，如果我們使用一個插件來壓縮和組合 JavaScript 文件，組合產生的 JavaScript 文件可能不遵守我們定義的執行順序和依賴關係。 這就是使您的 JavaScript 代碼無法工作的原因。

如果我們考慮到每天都會在我們的 WordPress 網站上找到更多的 JavaScript 來實現功能，那麼安裝這種類型的插件並瘋狂地激活它們可能會有很大的問題。

我的網站不工作。 誰是罪魁禍首？

作為 WordPress 插件開發人員，我們有責任小心謹慎，盡量減少對其他插件功能的影響。 但是，我們經常遇到我們插件的用戶抱怨安裝我們的插件之一會破壞他們的網站。

經過徹底的調查，很多時候問題的出現​​是因為他們使用了這些優化插件，這些優化插件結合了腳本，導致我們的插件運行時出現 JavaScript 錯誤。 還要記住，由於 Web 上的所有 JavaScript 都合併到一個腳本中，因此如果出現停止該腳本執行的故障，則其他腳本也不會工作。

在我們讓用戶允許我們訪問他們的安裝以最終發現問題在於使用插件進行自動優化之前，浪費時間交換消息是很糟糕的。 這就是為什麼如果你正在閱讀這篇文章並且你有一個 WordPress 網站，我希望你知道，如果你沒有正確配置它們，用於自動優化腳本和样式的插件是一把雙刃劍。

WordPress 的自動優化插件的設置屏幕，您可以從中排除腳本和样式。
WordPress 的自動優化插件的設置屏幕，您可以從中排除腳本和样式。

解決方案是從縮小和組合過程中排除任何不適用於自動優化插件的腳本。 如果您知道要包含哪些腳本，這並不難做到。 但問題是這些自動優化插件的用戶很少這樣做。

作為一種自我保護措施，插件開發人員必須在他們的代碼中包含兼容性過濾器，以將他們的腳本排除在默認組合之外，並縮小這些其他插件所做的事情。 除了需要時間之外，並不總是可以實現的東西。

小心使用自動優化插件

在這篇文章之後，我不想讓你誤以為我討厭自動優化插件。 他們的成功清楚地表明他們是有用的並且他們為人們解決了問題。 甚至我們已經激活了 SiteGround 在我們自己的網站上提供的自動優化插件。

但請記住以下幾點：如果我們使用這些類型的插件，我們不能簡單地激活它們。 我們必須在我們的網站上對它們進行徹底的測試，以便能夠根據我們的具體情況正確配置它們。 每次我們安裝新插件時，我們都必須仔細檢查縮小/組合過程是否有效並且網站是否仍然響應。

通過稍微負責和細心，可以大大減少您在使用自動優化插件來縮小和組合腳本和 CSS 樣式時遇到的問題。

Unsplash 上 Markus Spiske 的特色圖片。