建站
咨詢
售后
建站咨詢
新聞中心
CSS文件控制wordpress網(wǎng)站的視覺(jué)格式和樣式。但是，如果您的CSS代碼沒(méi)有以最佳方式交付，那么它可能會(huì)降低您的網(wǎng)站速度。在本教程中，我們將向您展示兩種優(yōu)化WordPress網(wǎng)站CSS交付的簡(jiǎn)單方法。
公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出通遼免費(fèi)做網(wǎng)站回饋大家。
WordPress網(wǎng)站CSS交付如何影響WordPress性能
CSS文件用于定義WordPress站點(diǎn)的視覺(jué)外觀。您的WordPress主題包含一個(gè)CSS樣式表文件，您的一些插件也可能使用CSS樣式表。CSS是現(xiàn)代網(wǎng)站所必需的，但CSS文件可能會(huì)降低您網(wǎng)站的速度和性能，具體取決于它們的設(shè)置方式。
即使網(wǎng)站速度稍有延遲，也會(huì)造成糟糕的用戶體驗(yàn)，并可能影響您的搜索排名和轉(zhuǎn)化，從而導(dǎo)致流量和銷售額減少。
CSS文件可能會(huì)減慢網(wǎng)站速度的一種方式是，是否需要在顯示頁(yè)面之前加載它們。這意味著您的訪問(wèn)者將看到一個(gè)空白頁(yè)面，直到CSS文件加載完畢。這被稱為渲染阻塞CSS。CSS文件可能會(huì)降低網(wǎng)站速度的另一個(gè)常見(jiàn)原因是，它們包含的代碼比顯示當(dāng)前頁(yè)面可見(jiàn)部分所需的代碼多。額外的代碼意味著它們需要更長(zhǎng)的時(shí)間來(lái)加載。
好消息是，您可以通過(guò)優(yōu)化CSS代碼的交付方式來(lái)提高WordPress網(wǎng)站的性能。這是通過(guò)確定顯示當(dāng)前網(wǎng)頁(yè)的第一部分所需的最少CSS代碼來(lái)完成的。這被稱為關(guān)鍵 CSS。然后將此關(guān)鍵代碼內(nèi)聯(lián)添加到頁(yè)面的HTML中，而不是添加到單獨(dú)的樣式表中，以便無(wú)需先加載CSS文件即可呈現(xiàn)代碼。
在您的訪問(wèn)者可以看到頁(yè)面的內(nèi)容后，可以加載其余的CSS。這稱為“延遲加載”。在本教程中，我們將向您展示兩種優(yōu)化WordPress網(wǎng)站CSS交付的方法，您可以選擇最適合您的一種。
- 方法 1：使用WP Rocket優(yōu)化WordPress CSS交付
- 方法 2：使用Autooptimize優(yōu)化WordPress CSS交付
方法 1：使用WP Rocket優(yōu)化WordPress CSS交付
WP Rocket是市場(chǎng)上最好的WordPress緩存插件。它提供了優(yōu)化WordPress CSS交付的最簡(jiǎn)單方法。事實(shí)上，這就像選中一個(gè)框一樣簡(jiǎn)單。WP Rocket是一個(gè)付費(fèi)插件，但最好的部分是所有功能都包含在基礎(chǔ)版本中。
您需要做的第一件事是安裝并激活WP Rocket插件。激活后，您需要導(dǎo)航到“設(shè)置”?“WP Rocket”頁(yè)面并切換到“File Optimization”選項(xiàng)卡。
接下來(lái)，您需要向下滾動(dòng)到CSS files部分。在那里，您需要選中“Optimize CSS delivery”選項(xiàng)旁邊的框。
此功能將智能地識(shí)別對(duì)訪問(wèn)者首先看到的網(wǎng)頁(yè)部分進(jìn)行格式化所需的關(guān)鍵CSS。您的頁(yè)面將加載得更快，而其余的CSS將在您的訪問(wèn)者看到其內(nèi)容后加載。
您現(xiàn)在需要做的就是單擊“Save Changes”按鈕并等待WP Rocket為您的所有文章和頁(yè)面生成必要的CSS文件。它還會(huì)自動(dòng)清除您網(wǎng)站的緩存，以便您的訪問(wèn)者看到您網(wǎng)站的新優(yōu)化版本，而不是緩存中存儲(chǔ)的任何未優(yōu)化版本。
WP Rocket 還有很多其他方法可以幫助您提高網(wǎng)站的性能。要了解更多信息，請(qǐng)參閱我們關(guān)于如何在WordPress中正確安裝和設(shè)置WP Rocket的教程。
方法 2：使用Autooptimize優(yōu)化WordPress CSS交付
Autooptimize是一個(gè)免費(fèi)插件，旨在改進(jìn)您網(wǎng)站的CSS和JS文件的交付。雖然Autoptimize是一個(gè)免費(fèi)插件，但它沒(méi)有WP Rocket那么多的功能，及需要更多的時(shí)間來(lái)設(shè)置。
例如，它無(wú)法像WP Rocket那樣自動(dòng)識(shí)別關(guān)鍵 CSS。相反，Autoptimize需要高級(jí)第三方服務(wù)的幫助，這需要額外的費(fèi)用并需要額外的時(shí)間進(jìn)行配置。但是，如果您預(yù)算緊張并且不需要WP Rocket的所有其他功能來(lái)加速您的網(wǎng)站，那么它可能是一個(gè)不錯(cuò)的選擇。
您需要做的第一件事是安裝并激活A(yù)utooptimize插件。激活后，您需要訪問(wèn)設(shè)置?Autoptimize頁(yè)面以配置插件設(shè)置。在那里，您需要向下滾動(dòng)到CSS選項(xiàng)部分并選中頂部的Optimize CSS Code框。
完成此操作后，您需要確保未選中“Aggregate CSS-files”選項(xiàng)，然后選中“Eliminate render-blocking CSS”。您現(xiàn)在可以單擊“Save Changes and Empty Cache”按鈕來(lái)存儲(chǔ)您的設(shè)置。
但是在您注冊(cè)一個(gè)關(guān)鍵CSS帳戶之前，該插件將無(wú)法正常工作。這是一項(xiàng)高級(jí)訂閱服務(wù)，它將提供Autooptimize優(yōu)化您的WordPress CSS交付所需的關(guān)鍵CSS代碼。
為此，請(qǐng)導(dǎo)航到Autooptimize設(shè)置中的Critical CSS選項(xiàng)卡。在這里，您將找到注冊(cè)Critical CSS所需的信息。您可以通過(guò)單擊第三段中的注冊(cè)鏈接開(kāi)始。
收到Critical CSS API密鑰后，向下滾動(dòng)到API Key部分，以便將其粘貼到“Your API key”文本框中。之后，請(qǐng)確保單擊“Save Changes”按鈕。
Autooptimize現(xiàn)在擁有添加關(guān)鍵CSS內(nèi)聯(lián)和延遲加載樣式表所需的所有信息，直到呈現(xiàn)頁(yè)面之后。因此，您的網(wǎng)站加載速度會(huì)更快。最后，希望通過(guò)本教程，您學(xué)會(huì)了如何優(yōu)化您的WordPress網(wǎng)站CSS交付，以進(jìn)一步提升網(wǎng)站的速度。
新聞標(biāo)題：如何優(yōu)化WordPress網(wǎng)站CSS交付
網(wǎng)址分享：http://www.fisionsoft.com.cn/article/cdogcgg.html
