如何在WordPress中縮小CSS / JavaScript文件


您要縮小WordPress網站上的文件嗎? 最小化WordPress CSS和Javascript文件可以使它們加載更快並加快WordPress網站的速度。 在本指南中,我們將向您展示如何縮小WordPress中的CSS / Javascript文件以提高性能和速度。

如何在WordPress中縮小CSS / JavaScript文件

什麼是縮小,何時需要?

“縮小”一詞用於描述一種使您的網站文件更小的方法。 它通過從源代碼中刪除空格,行和不必要的字符來實現此目標。

通常,建議僅將其用於發送到用戶瀏覽器的文件。 這包括HTML,CSS和JavaScript文件。 您也可以最小化PHP文件,但是PHP是一種服務器端編程語言,最小化它不會提高用戶的頁面加載速度。

縮小文件的明顯優勢是提高了WordPress的速度和性能。 壓縮文件可以更快地加載並提高網站速度。

但是,一些專家認為,對於大多數網站而言,性能提升非常小,不值得為此煩惱。 在大多數WordPress網站上,縮小操作只會減少幾千字節的數據。 您可以通過簡單地優化網絡圖像來減少更多的頁面加載時間。

這是普通CSS代碼的示例:

身體 {
邊距:20px;
內邊距:20px;
顏色:#333333;
背景:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
底邊距:10px;
}

縮小代碼後,它將如下所示:

正文{margin:20px; padding:20px; color:#333; background:#f7f7f7} h1 {font-size:32px; margin-bottom:10px}

如果您嘗試在Google Pagespeed或GTMetrix工具上獲得100/100的得分,那麼最小化CSS和JavaScript將會大大提高您的得分。

話雖如此,讓我們看一下如何輕鬆地最小化WordPress網站上的CSS / JavaScript。

縮小WordPress中的CSS / Javascript

您需要做的第一件事是安裝並激活Better WordPress Minify插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,插件將在您的WordPress管理欄中添加一個名為“ BWP Minify”的新菜單項。 單擊它會將您帶到插件的設置頁面。

BWP縮小設置

在設置頁面上,您需要檢查前兩個選項以自動最小化WordPress網站上的JavaScript和CSS文件。

現在,您可以單擊“保存更改”按鈕來存儲您的設置。

此頁面上還有許多其他高級選項。 默認設置適用於大多數網站,但是您可以視情況查看和更改這些選項。

接下來,您需要前往您的網站。 右鍵單擊任意位置,然後從瀏覽器菜單中選擇“查看頁面源代碼”。

查看WordPress網站的頁面來源

現在,您將看到WordPress網站生成的HTML源代碼。 如果仔細觀察,您會發現該插件將從插件自己的文件夾而不是WordPress主題和插件中加載CSS / JavaScript文件。

這些是原始CSS和JavaScript文件的縮小版本。 更好的WordPress Minify插件將保留它們的緩存,並將縮小的版本提供給瀏覽器。

僅此而已,我們希望本文能幫助您學習如何縮小WordPress網站。 您可能還想查看有關如何為初學者加速WordPress的最終指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。