[ad_1]
雖然網站的美感很重要，但它的內容和載入速度會讓人們回頭。 WordPress 為用戶提供了一個複雜的插件和主題工具箱，以快速創建他們自己的自定義網站。
但是，這些主題和插件需要 JavaScript (JS) 和 級聯樣式表 (CSS) 工作。 WordPress 以腳本文件的形式自動創建它們。 它們通常沒有得到很好的優化。 因此，它們會大大降低您的網站速度。
這可能會讓讀者感到沮喪。 因此，在本指南中，我們將探討如何查找和刪除這些渲染阻止腳本，並向您展示如何提高 WordPress 網站的載入速度。
什麼是阻止渲染的 JS 和 CSS 腳本，它們為什麼不好？
互聯網上的大多數網頁都由三個關鍵組件組成：JavaScript、CSS 和超文本標記語言。 HTML 作為基地，而 JavaScript 和 CSS 則嵌入其中。 然而，如今，在 HTML 文檔中嵌入對外部腳本的調用更為傳統。
這些腳本保存在 Web 瀏覽器用來呈現網頁的隊列中。 在不查看源代碼的情況下查看網頁使用哪些腳本的最簡單方法是從 (Ctrl + S) 網路瀏覽器下載它。 Web 瀏覽器將下載 HTML 文檔以及包含網頁使用的所有（或大部分）腳本、圖像和其他文件的文件夾。
您的網頁必須從隊列中調用的腳本越複雜，渲染所需的時間就越長。 通常，Web 瀏覽器會在本地緩存中下載諸如腳本和圖像之類的網頁資源以更快地載入網頁。 雖然客戶端的用戶可以通過以下方式加快網頁渲染時間 禁用 JavaScript、增加緩存大小並使用 AdBlockers，這不是理想的解決方案。 責任應該由網路開發人員承擔。
如果您收到投訴或注意到您的網站在呈現其內容時出現問題，現在修復它為時不晚。
如何通過查找和修復渲染阻止腳本來優化您的網站
在決定終止或優化哪些腳本之前，您必須評估您的網站或網頁的速度。 您可以使用在線平台，例如 GTmetrix 或 Google 的 PageSpeed Insights。 您需要做的就是插入要測試的網站或網頁的 URL，該工具將對它進行評分並提供其他見解。
他們還將建議您可以用來加快網站速度的審核。 例如，他們會建議您在網頁中使用更少的元素或減少未使用的 CSS 和 JavaScript。 GTmetrix 將儘可能向您展示哪些腳本需要優化。
或者，您可以使用 Chrome DevTools 的 Coverage 選項卡 向您展示腳本的利用率數據。 一旦確定了哪些腳本是次優的，您就可以做一些事情來修復它們。 但是，這些步驟需要相當多的編碼才能成功實施。 您至少需要對函數式 JavaScript 編程有基本的了解。
參加編碼教程課程（或訓練營）也是幫助進一步發展技能的好主意。 平均而言，編碼訓練營可能需要 十五周完成，雖然這可能聽起來很長，但當您考慮到基本的代碼素養是現代世界中的一項重要技能時，這是非常值得的。 不過，這裡有五種方法可以修復渲染阻止腳本並提高網頁速度。
1.優化載入順序
網頁的 head 部分 () 用於預載入元素。 您的網頁的基礎應該放在此處，因此當用戶載入您的網頁時，白屏不會向用戶打招呼。 雖然嵌入式 CSS 很好，但您應該避免在此處放置 JavaScript。
一旦你優化了頭部部分，你需要優化身體。 大多數網路瀏覽器從上到下呈現網頁。 您需要根據腳本的重要性和複雜性對腳本調用進行排序。 您應該將調用對網頁呈現不重要的腳本以及需要時間的複雜腳本放在最後。
2. 縮小代碼
縮小代碼涉及重寫它並刪除不必要的字元，如空格、注釋、逗號、換行符等。這使代碼更加簡潔和緊湊，最終減少腳本的大小並增加網頁的載入時間。
插件和工具，例如 W3TC 具有縮小主題中的 JavaScript 和 CSS 的模塊。 或者，您可以使用 JavaScript Minifier 等免費在線工具手動縮小腳本代碼。
3. 使用 JavaScript 的延遲和非同步載入
Web 瀏覽器從上到下讀取代碼。 當他們遇到腳本標籤時，他們會停止載入網頁並讀取腳本文件。 這會減慢渲染速度。
您可以使用 async 屬性與網頁並行載入腳本，並在腳本可用時立即執行。 或者，您可以利用 defer 屬性來推遲腳本的解析。 這意味著它還將與網頁並行載入腳本，但僅在瀏覽器解析網頁時執行它。
我們建議您不要在用於呈現和顯示視覺元素的腳本上使用 async 或 defer 屬性。 與這些屬性等效的 JavaScript 關鍵字是 async 和 await 關鍵字。 你可以用它們來 更非同步地載入您的 Javascript 無需編輯網頁上的 HTML 標籤。
4. 用 CSS3 替換 JavaScript 視覺元素
過去，CSS 不像今天那樣通用。 例如，CSS 1.0 和 2.0 沒有像基本控制項和滑塊這樣的 UI 工具。
然後 CSS 3 出現了。 它呈現了新的顏色、框陰影、不透明度等。JavaScript 非常適合添加複雜的用戶界面控制項。 但是，與 CSS 相比，Javascript 在資源上更重。
因此，使用過多的 JavaScript 會顯著降低您的網站速度。 如果您注意到您的網頁正在使用 JavaScript 來彌補以前版本 CSS 的不足，您應該更改它並用 CSS 替換所有不必要的 JavaScript——如果可以的話。 這將使網頁載入速度更快。
5. 消除所有不必要的腳本
JS 和 CSS 的目的是將功能擴展到網頁，並在 HTML 無法實現的地方添加邏輯。 然而，HTML 5.3 帶來了新標籤，這將使一些 CSS 和 JS 操作變得不必要。 使用 HTML 而不是腳本自然會使您的網頁載入速度更快。
因此，優化網站速度的最佳方法是消除所有未充分利用的腳本。 您需要分析哪些腳本是完全不需要的並刪除它們。 同樣，您可以使用 Chrome DevTools 的 Coverage Tab 或 GTmetrix 在您的網頁上找到未被充分利用的腳本，然後將其刪除。
刪除所有不必要的功能或標籤後，您可以組合功能相似的腳本。 如果您已經知道如何處理網頁的源代碼，那麼這對您來說應該不是一項艱巨的任務。 但是，在網頁設計方面沒有經驗或知識的用戶不應該擔心。 WordPress 使您可以更輕鬆地識別網站上的腳本並使用各種 優化插件. 我們接下來會介紹這些。
6. 使用插件優化您的 WordPress 網站
同樣，您不需要編程的工作知識來優化您的 WP 網站。 雖然一些經驗會有所幫助。 儘管如此，還是有一系列針對腳本優化的插件。 其中一些使用 AI 來縮小代碼、更改載入順序並用更高效的代碼和腳本替換未充分利用的腳本。
一些用於腳本優化的最佳插件包括：
- WP火箭：這是最流行的網頁優化插件之一。 它可以自動檢測哪些腳本有問題並為您修復它們。 您可以將其用於快速緩存、遵從、壓縮和縮小。
- 自動優化：這可以推遲和消除不必要的腳本，集成內聯 CSS 並縮小腳本、HTML 和圖像。 Autooptimize 可通過開放的 API 和高級選項進行高度定製。
- W3 總緩存：這個插件需要一些工作才能使用。 在刪除或編輯腳本之前，您需要手動跟蹤和識別腳本。 在大多數情況下，此插件已隨您的 WordPress 軟體包提供。
- 非同步 JavaScript：WordPress 提供的開源插件。 它允許您檢測阻塞渲染的 JavaScript，然後延遲它或非同步載入它。
那麼為什麼我們不首先推薦插件呢？ 不幸的是，其中一些插件會花費您。 例如，Autooptimize 每年的費用為 49 美元。 雖然這是一筆合理的費用，但對於已經為託管和其他應用程序和插件支付了大量資金的人來說，這可能並不理想。
儘管如此，無論您是使用插件還是手動查找腳本，您都需要了解諸如縮小、非同步載入和載入順序等概念。 如果您的腳本之一失敗，它將使您更輕鬆地解決任何載入問題。