在網(wǎng)站建設(shè)中避免“浪費”的CSS

時間：2024-05-20 12:30:01 | 來源：建站知識

時間：2024-05-20 12:30:01 來源：建站知識

網(wǎng)頁設(shè)計師似乎一直在努力優(yōu)化其創(chuàng)作。在短期內(nèi)，這將有利于性能。從長遠來看，它也可以簡化維護。

通常，這意味著優(yōu)化圖像，通過內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）實現(xiàn)頁面緩存和提供文件。這些都是有效的措施。但是，沒有引起足夠重視的一項內(nèi)容是網(wǎng)站CSS的潛在膨脹。

雖然您可以縮小樣式表或通過CDN提供樣式表，但可以做更多的事情。具體來說，刪除那些沒有被使用的樣式，并格式化仍然有用的樣式。

最好從構(gòu)建過程的一開始就完成。但是，也有可能減輕現(xiàn)有網(wǎng)站的負擔(dān)。讓我們看一下所涉及的挑戰(zhàn)，以及一些可以使網(wǎng)站速度更快的工具和技術(shù)。

處理內(nèi)置于主題和框架中的膨脹 過去，網(wǎng)站本質(zhì)上是從頭開始構(gòu)建的。這是一個很棒的方法，因為設(shè)計師可以只包含所需的樣式和腳本。如果謹(jǐn)慎進行，此過程可能會導(dǎo)致網(wǎng)站的優(yōu)化。

當(dāng)然，有許多原因?qū)е挛覀冊S多人放棄了這種做法。就時間和預(yù)算限制而言，這根本沒有效率。

因此，現(xiàn)代網(wǎng)站通常建立在預(yù)建產(chǎn)品之上。那可能是CSS框架，例如Bootstrap或精心設(shè)計的WordPress主題。在某些情況下，CMS主題甚至可能包含框架。

這些產(chǎn)品是一刀切的。通過包含您可能需要的所有內(nèi)容，它可以使開發(fā)更快。不幸的是，不能說它們對性能的影響。

那么，怎樣才能改善這種情況呢？

盡可能使用基于組件或輕量級的框架 從理論上講，既有可能在避免膨脹的同時獲得框架的優(yōu)勢。這可以通過使用基于組件的程序包來實現(xiàn)，這些程序包使您可以加載特定功能，而忽略其他功能。前面提到的Bootstrap確實允許這種類型的定制。

另一個替代方法是Tailwind CSS，它提供了基本樣式，并假定您將在它們之上進行構(gòu)建。如果您正在尋找一個很好的起點，而不是更成品，那么這可能是個合適的選擇。

使用框架沒有錯。但是，請尋找以下之一：a）讓您選擇要加載的組件；b）提供可以輕松自定義的準(zhǔn)系統(tǒng)樣式表。無論哪種方式，您的項目都將從減少的負載中受益。

CMS主題怎么辦？ 諸如商業(yè)主題之類的模板產(chǎn)品可能會很棘手，因為它們經(jīng)常包含大量樣式–無論您是否需要它們。

一個特定的主題可能會組織得井井有條，以至于可以很容易地減少不需要的樣式表。甚至可能有一個主題選項面板，使您可以單擊幾下。但是，這很可能是例外而不是普遍的。

避免主題臃腫的最佳方法是創(chuàng)建自己的主題。例如，WordPress入門主題將提供一些您可以自定義的準(zhǔn)系統(tǒng)CSS。這有助于確保樣式表更簡潔，并至少消除與CMS相關(guān)的少量開銷。

整理現(xiàn)有樣式表 可以通過以下兩種方式之一來改變我們對現(xiàn)有網(wǎng)站的關(guān)注，整理和重構(gòu)CSS：

手動檢查樣式 啟動您最喜歡的代碼編輯器并打開網(wǎng)站的樣式表始終是一個不錯的起點。是的，這可能是一個乏味的經(jīng)歷。但這也是照顧低掛水果的有效方法。

不必仔細檢查CSS的每一行。取而代之的是，該想法是找到您未使用或效率不高的所有項目。

例如，假設(shè)您運行的WordPress網(wǎng)站具有一些自定義樣式以覆蓋插件的樣式。如果您不再使用該特定插件怎么辦？在這種情況下，可以輕松刪除樣式。

或者，也許您偶爾會使用一些樣式，例如在寒假期間?？赡苡斜匾獙⑦@些樣式移動到單獨的文件中，并僅在需要時調(diào)用它們。

然后是一些CSS選擇器，它們寫得不太好。也許他們有許多不再需要的瀏覽器前綴或不必要的重復(fù)屬性。這是清理的成熟區(qū)域。

如果您的網(wǎng)站設(shè)計已有兩年之久，您可能會驚訝于可以找到多少多余的樣式。



使用自動化工具 有很多工具可以掃描您的網(wǎng)站（或網(wǎng)站的至少一部分）并使用未使用的CSS列表進行報告。我們測試了其中一些工具，如果您有興趣嘗試這些工具中的一種或多種，下面是我們推薦的自動化工具：

• JitBit
• PurgeCSS
• PurifyCSS
• Unused CSS

自動化工具和手動審核的結(jié)合可能是最好的做法。兩者都可以使您對潛在的性能優(yōu)化有更全面的了解。您可能不會捕獲所有單個項目，但仍有機會產(chǎn)生可衡量的影響。您可以在測試之前和之后使用GTmetrix之類的工具進行一些操作以查看結(jié)果。



說到CSS：不要浪費 樣式表可以大到令人驚訝，尤其是在使用現(xiàn)成的CSS框架時。從網(wǎng)站建設(shè)一開始就應(yīng)該注意這一點。通過減少樣式表的無用部分，您將優(yōu)化網(wǎng)站的性能，加快加載速度。

如果您的網(wǎng)站已經(jīng)上線，那么您仍然可以采取一些積極的步驟。查看CSS，查找要簡化或刪除的項目。利用眾多自動工具之一查找您可能錯過的部分。

最重要的是，將CSS縮減為基本要素并不是一件易事，但是仍然值得您花費時間和精力。