如何刪除渲染阻止 JS 和 CSS 以提高網站速度
已發表: 2021-11-10雖然網站的美感很重要，但它的內容和加載速度會讓人們回訪。 WordPress 為用戶提供了一個複雜的插件和主題工具箱，可以快速創建他們自己的自定義網站。
但是，這些主題和插件需要 JavaScript (JS) 和級聯樣式表 (CSS) 才能工作。 WordPress 以腳本文件的形式自動創建它們。 它們通常優化不佳。 因此，它們會大大降低您的網站速度。
這可能會讓讀者感到沮喪。 因此，在本指南中，我們將探討如何查找和刪除這些渲染阻止腳本，並向您展示如何提高 WordPress 網站的加載速度。
什麼是阻止渲染的 JS 和 CSS 腳本，為什麼它們不好？
Internet 上的大多數網頁由三個關鍵組件組成：JavaScript、CSS 和超文本標記語言。 HTML 作為基礎，而 JavaScript 和 CSS 嵌入其中。 然而，如今，在 HTML 文檔中嵌入對外部腳本的調用更為傳統。
這些腳本保存在您的網絡瀏覽器用來呈現網頁的隊列中。 在不查看源代碼的情況下查看網頁使用的腳本的最簡單方法是從 (Ctrl + S) 網絡瀏覽器下載它。 Web 瀏覽器將下載 HTML 文檔以及包含網頁使用的所有（或大部分）腳本、圖像和其他文件的文件夾。
您的網頁必須從隊列中調用的腳本越複雜，渲染所需的時間就越長。 通常，網絡瀏覽器會在本地緩存中下載網頁資源，例如腳本和圖像，以更快地加載網頁。 雖然客戶端用戶可以通過禁用 JavaScript、增加緩存大小和使用 AdBlocker 來加快網頁呈現時間，但這並不是一個理想的解決方案。 責任應該在網絡開發者身上。
如果您收到投訴或註意到您的網站在呈現其內容時存在問題，那麼修復它還為時不晚。
如何通過查找和修復渲染阻止腳本來優化您的網站
在決定終止或優化哪些腳本之前，您必須評估您的網站或網頁的速度。 您可以使用在線平台，例如 GTmetrix 或 Google 的 PageSpeed Insights。 您只需插入您要測試的網站或網頁的 URL，該工具就會對其進行評分並提供其他見解。
他們還將建議您可以用來使您的網站更快的審核。 例如，他們會建議您在網頁中使用更少的元素或減少未使用的 CSS 和 JavaScript。 GTmetrix 會盡可能地向您展示哪些腳本需要優化。
或者，您可以使用 Chrome DevTools 的 Coverage 選項卡向您顯示腳本的利用率數據。 一旦您確定哪些腳本不是最佳的，您可以做一些事情來修復它們。 但是，這些步驟將需要相當多的編碼能力才能成功實施。 您至少需要對函數式 JavaScript 編程有基本的了解。
加入編碼教程課程（或訓練營）也是幫助您進一步發展技能的好主意。 平均而言，一個編碼訓練營可能需要長達 15 週的時間才能完成，雖然這聽起來可能很長，但當您考慮到基本的代碼素養是現代世界中的一項重要技能時，這是非常值得的。 儘管如此，這裡有五種方法可以修復渲染阻止腳本並提高網頁速度。
1.優化加載順序
網頁的頭部（</head></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 非常適合添加複雜的用戶界面控件。 然而，Javascript 在資源上比 CSS 更重。
因此，使用過多的 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 Rocket ：這是最流行的網頁優化插件之一。 它可以自動檢測哪些腳本有問題並為您修復它們。 您可以將其用於快速緩存、參考、壓縮和縮小。
- 自動優化：這可以推遲和消除不必要的腳本，集成內聯 CSS 並縮小腳本、HTML 和圖像。 Autooptimize 通過開放的 API 和高級選項高度可定制。
- W3 Total Cache ：這個插件需要一些工作才能使用。 在刪除或編輯腳本之前，您需要手動跟踪和識別腳本。 在大多數情況下，您的 WordPress 軟件包已經提供了此插件。
- Async Javascript ：由 WordPress 提供的開源插件。 它允許您檢測阻塞渲染的 JavaScript，然後延遲它或異步加載它。
那麼為什麼我們不首先推薦插件呢？ 不幸的是，其中一些插件會花費你。 例如，Autooptimize 每年花費 49 美元。 雖然這是一個合理的費用，但對於已經為託管和其他應用程序和插件支付大量資金的人來說，這可能是不理想的。
儘管如此，無論您是使用插件還是手動查找腳本，您都需要了解諸如縮小、異步加載和加載順序等概念。 如果您的腳本之一失敗，它將使您更容易解決任何加載問題。