如何在 WordPress 中刪除未使用的 CSS 和 JS(非常簡單)

已發表: 2020-05-18

在您的網站中有大量未使用的 CSS 和 JS 會損害您的網站加載時間。 如果您通過 Google PageSpeed Insight 等速度測試工具運行您的網站,您可能會收到刪除未使用 CSS 的警告。

值得慶幸的是,有一種非常簡單的方法可以做到這一點。 您無需具備任何特殊技術知識即可從您的 WordPress 站點中刪除未使用的 CSS 和 JS。

這是因為一個名為 Asset CleanUp: Page Speed Booster 的驚人插件。 有了這個插件,刪除未使用的 CSS 就像點擊幾個按鈕一樣簡單。 或者,如果你不介意每年花幾塊錢,使用 WP Rocket,有一個刪除未使用的 CSS 按鈕,只需激活它,插件將自動刪除所有未使用的 CSS。

結帳:前 7 名託管 Google Cloud WordPress 託管

目錄

什麼是未使用的 CSS?

未使用的 CSS 是頁面中存在的 CSS 文件,但在加載頁面時通常不需要。 當訪問者打開網站時,瀏覽器通常必須下載、解析和處理訪問頁面上的所有外部樣式表,然後才能將頁面內容顯示給訪問者。 如果在這樣的頁面上存在任何未在頁面上使用的 CSS,瀏覽器將在其上浪費時間。

一個典型的例子是使用的大多數聯繫表單插件。 這些插件雖然大多只在“聯繫我們”頁面上使用,但在整個網站上加載其 CSS。 不管是不是主頁,CSS都會加載。

如果有太多不需要的 CSS,但它們正在加載並減慢瀏覽器讀取和顯示頁面的時間,這可能會成為一個問題。

除了插件之外,主題開發者還會在 style.css 中寫入很多幾乎不需要的東西。 但無論是否需要,只要您的網站加載,它們就會加載!

一個未使用的 CSS 可能不是問題,但大量未使用的 CSS 會影響您網站的加載時間。

結帳:前 10 個最快和最好的 WordPress 主題

如何識別未使用的 CSS

查找未使用的 CSS 和 JS 是一件非常容易的事情。 我將推薦兩種方法。

一種是通過 Google PageSpeed Insight 分析您的網站。 檢查您的網站是否存在刪除未使用的 CSS 問題。 單擊它,您將能夠識別負責它的站點組件。

未使用的 CSS

您可以從上面看到記錄了一種未使用的 CSS 的情況。 通過查看這個,我可以看到未使用的 CSS 的插件和位置。

第二種選擇是獲得更詳細的分析。 您可以使用 Chrome 開發工具來實現這一點。

在您的 chrome 瀏覽器上,打開 Chrome 開發工具,然後轉到覆蓋範圍。 然後單擊覆蓋區域內的重新加載按鈕。 您可以在 Google Developers 工具中找到有關如何執行此操作的綜合指南。

另一種選擇是使用 jitbit 掃描未使用的 CSS 選擇器。 您還可以使用 PurifyCSS 來查找未使用的 CSS

如何刪除未使用的 CSS

按照以下步驟從 WordPress 中刪除未使用的 CSS:

1.安裝資產清理

轉到插件然後添加新的。 然後在添加新插件頁面的搜索框中鍵入“資產清理”。 安裝並激活插件。

2.進入插件設置

要訪問插件設置,請從 WordPress 儀表板單擊設置,然後單擊資產清理。

3.卸載不需要的CSS和JS

在插件設置上,您可能需要在開始之前接受您知道插件在剝離脂肪水龍頭下的工作方式。

要卸載 CSS 和 JS,請單擊 CSS 和 JSS 管理器。 從那裡你可以刪除任何你不需要的 CSS 和 JS。 您可以僅為主頁、整個站點或特定 URL 刪除它。 您還可以刪除帖子、頁面或類別。

一個示例是從除聯繫我們頁面之外的整個站點的加載中卸載任何联系表單

卸載 CSS

花點時間卸載所有你知道不需要的 CSS 和 JS。 確保在完成後測試您的網站以確保一切正常。

刪除未使用的 CSS WordPress 插件

以下是一些可用於刪除 WordpPress 中未使用的 CSS 的插件:

1. 資產清理:頁面速度助推器

資產清理

資產清理:Page Speed Booster 可以輕鬆刪除未使用的 CSS 和 JSin WordPress,即使對於初學者也是如此。 您所要做的就是停用特定頁面不需要的特定 CSS。

您也可以單獨為個別帖子停用。 使用高級版,您可以通過插件停用未使用的 CSS/JS。

該插件是一個完整的性能插件,具有許多其他選項來加速 WordPress。 刪除未使用的 CSS/JS 只是其中的一部分。

在這篇文章中,我使用了這個插件有一個指南。

2.WP火箭

WP Rocket 是排名第一的 WordPress 高級性能插件。 如果您是菜鳥,我的意思是如果您對 WordPress 沒有經驗或不熟悉,那麼 WP Rocket 是刪除未使用的 CSS 的最簡單方法。

您需要購買插件,完成後,您可以從您的帳戶下載它或查看您的電子郵件以獲取下載鏈接。

通過儀表板>插件>添加新>上傳安裝插件。

只需導航到 WP Rocket 設置,然後單擊“文件優化”選項卡。 然後向下滾動,您將看到“刪除未使用的 CSS”,勾選框,保存並清除緩存。

刪除未使用的 CSS WP Rocket

3. 性能問題

性能問題

Perfmatters 是由 Brian Jackson 和他的兄弟 Brett Jackson 開發的高級插件。 這個插件可以幫助輕鬆刪除未使用的 CSS。

首先,您需要購買插件。 然後安裝它。 激活許可證。 當您導航到設置時,打開腳本管理器。

只需轉到您網站上的任何頁面或帖子,您將在儀表板菜單上看到腳本管理器圖標,單擊它。 您將能夠從頁面或全局刪除未使用的 CSS 和 JS。

這個插件是一個性能插件,帶有許多其他選項來加速 WordPress。 刪除未使用的 CSS/JS 是其中的一部分。

4. CSS JS 管理器

CSS-JS-管理器

CSS JS Manager 可以專門從移動或桌面刪除 CSS 或 JS。 取決於你想要達到的目標。

這個插件還可以延遲加載 CSS 或 JS 文件。

結論

如果你有很多未使用的 CSS 和 JS,你會注意到速度和性能得分有很大的提高。

刪除所有未使用的 CSS 可能是不可能的,但您可以將它們減少到最低限度。 我利用 Asset CleanUp 為 TargetTrend 刪除未使用的 CSS。

請記住,優化但不要太著迷,除非您希望您的網站看起來像世界上最快的網站。

另請閱讀:

如何消除 WordPress 中的渲染阻塞資源

如何讓 WordPress 變得非常快

如何為您的博客增加流量