提升WordPress主題性能的實(shí)用指南

核心要點(diǎn)

• WordPress主題性能受HTTP請(qǐng)求數(shù)量、下載資源大小和頁面效率影響。減少這些因素可顯著提升性能。
• 快速提升WordPress性能的方法包括：諮詢主機(jī)商、啟用GZIP壓縮、啟用WordPress和瀏覽器緩存、禁用未使用的插件、移除不必要的資源、替換社交媒體按鈕。
• 圖片是網(wǎng)站臃腫的主要原因。通過移除或替換不必要的圖片、使用正確的格式、調(diào)整大型位圖圖像大小、最大化圖像壓縮和實(shí)現(xiàn)延遲加載，可以顯著減輕頁面重量並提升性能。
• 更徹底的解決方案包括：採(cǎi)用構(gòu)建流程、考慮漸進(jìn)式Web應(yīng)用技術(shù)、避免第三方代碼、仔細(xì)評(píng)估WordPress主題、簡(jiǎn)化網(wǎng)站以及從一開始就考慮性能。

本文是與SiteGround合作創(chuàng)作的系列文章的一部分。感謝您支持使SitePoint成為可能的合作夥伴。

2017年5月，平均頁面重量達(dá)到2884kb。 Google DoubleClick的研究報(bào)告顯示，移動(dòng)設(shè)備上的平均加載時(shí)間為19秒。然而，性能比以往任何時(shí)候都更重要：

• 用戶挫敗感：用戶不會(huì)等待。 Aberdeen Group的研究表明，每延遲一秒會(huì)導(dǎo)致：
  • 頁面瀏覽量減少11%
  • 用戶滿意度下降16%
  • 轉(zhuǎn)化率下降7%
• 移動(dòng)端：移動(dòng)訪問佔(zhàn)所有網(wǎng)絡(luò)流量的55%。設(shè)備和帶寬能力都在提高，但速度趕不上頁面重量的增長(zhǎng)速度。用戶通常按字節(jié)付費(fèi)。
• 搜索引擎排名：Google會(huì)懲罰加載緩慢、重量級(jí)的網(wǎng)站。
• 託管成本：與SiteGround等公司合作託管是合理的，但重量級(jí)網(wǎng)站會(huì)消耗更多資源，成本也高於更精簡(jiǎn)的替代方案。
• 維護(hù)：您的網(wǎng)站需要的資源越多，維護(hù)成本就越高。最終，緩慢的網(wǎng)站會(huì)讓您和您的用戶損失金錢。 下次您的老闆要求添加不必要的特性時(shí)，請(qǐng)?zhí)嵝阉麄冞@個(gè)簡(jiǎn)單的道理！

理想情況下，您應(yīng)該在編寫第一行代碼之前就考慮性能。但是，您可能正在閱讀這篇文章，因?yàn)槟闹黝}存在性能問題。幸運(yùn)的是，有一些經(jīng)濟(jì)有效的方案可以解決這個(gè)問題，而且沒有任何缺點(diǎn)。節(jié)省的每一毫秒都會(huì)降低您的成本，同時(shí)提高用戶滿意度、參與度和收入。

影響性能的因素

性能受以下因素影響：

1. HTTP請(qǐng)求數(shù)量
2. 下載資源的大小
3. 頁面的效率

HTTP請(qǐng)求的數(shù)量取決於使您的頁面正常運(yùn)行所需的文 件和Ajax調(diào)用的數(shù)量：HTML、CSS、JavaScript、圖像、字體、數(shù)據(jù)以及所有其他資源。 HTTP/2解決了這個(gè)問題，但是您的服務(wù)器和用戶的瀏覽器都必須配置為啟用支持。即使使用HTTP/2，二十個(gè)文件請(qǐng)求仍然不如十個(gè)有效。主要因素是每個(gè)文件的大小。

為了說明這一點(diǎn)，2884kb比id Software的Doom的原始版本大了20%。誠(chéng)然，我們正在將現(xiàn)代網(wǎng)頁與一個(gè)25年前的遊戲進(jìn)行比較，但大多數(shù)網(wǎng)頁只顯示幾段內(nèi)容，而Doom則實(shí)現(xiàn)了3D引擎、多個(gè)關(guān)卡、圖形、音樂和音效。即使是相對(duì)輕量級(jí)的頁面也可能效率低下。例如，如果您的三頁網(wǎng)站依賴於一個(gè)500kb的JavaScript框架，那麼在看到第一個(gè)字符之前，必須下載、解析和執(zhí)行該代碼。即使資源總大小超過500kb，服務(wù)器渲染的HTML文件也會(huì)在完全加載之前開始顯示。最後，服務(wù)器速度、壓縮和緩存也是其他重要的考慮因素。

衡量性能

衡量性能對(duì)於識(shí)別瓶頸並確保您的更新已改善頁面非常重要。以下工具提供了請(qǐng)求和響應(yīng)時(shí)間的細(xì)分以及更新建議：

• Pingdom
• Google PageSpeed Insights
• GTmetrix
• WebPageTest

瀏覽器的開發(fā)者工具網(wǎng)絡(luò)選項(xiàng)卡還提供有關(guān)佈局以及頁面準(zhǔn)備好響應(yīng)用戶事件所需時(shí)間的相關(guān)信息。

快速獲勝

以下更新所需時(shí)間不應(yīng)超過幾分鐘——您沒有任何藉口！

聯(lián)繫您的網(wǎng)絡(luò)主機(jī)

一個(gè)好的網(wǎng)絡(luò)主機(jī)將分析您的使用情況，並就服務(wù)、硬件和軟件升級(jí)提供建議。這可以通過最小的努力提供經(jīng)濟(jì)高效的性能提升。我們的合作夥伴SiteGround擁有一支積極主動(dòng)且知識(shí)淵博的WordPress專家支持團(tuán)隊(duì)，他們很樂意幫助您解決這個(gè)問題。 SiteGround提供一系列針對(duì)WordPress的計(jì)劃，SitePoint用戶可享受高達(dá)65%的折扣。

啟用GZIP壓縮

幾乎30%的網(wǎng)站未能啟用GZIP壓縮。這通?？梢栽赪eb服務(wù)器設(shè)置或WordPress插件（如WP HTTP Compression和W3 Total Cache）中啟用。

啟用WordPress緩存

有幾個(gè)WordPress插件可以渲染頁面並將它們存儲(chǔ)在其第一次請(qǐng)求的緩存中。後續(xù)請(qǐng)求從緩存中獲取這些頁面，而不是在模板中重新生成數(shù)據(jù)庫(kù)內(nèi)容。緩存插件包括W3 Total Cache、WP Super Cache、Hyper Cache、WP Fastest Cache和Cache Enabler。您的託管提供商可能能夠?yàn)槟鷨⒂镁彺妗Ｎ覀兊暮献麾钒镾iteGround擁有一個(gè)定制的緩存工具，可以大幅提升網(wǎng)站速度。

啟用瀏覽器緩存

如果用戶通過瀏覽器緩存了資源，則用戶不必再次下載該資源。簡(jiǎn)單的解決方案包括在HTTP標(biāo)頭中設(shè)置適當(dāng)?shù)腅xpires標(biāo)頭、Last-Modified日期或採(cǎi)用ETags。以下.htaccess示例要求瀏覽器緩存圖像一個(gè)月：

<code><ifmodule mod_expires.c="">
ExpiresActive On

<filesmatch>
ExpiresDefault "access plus 1 month"
</filesmatch></ifmodule></code>

禁用未使用的插件

大多數(shù)插件都會(huì)向您的網(wǎng)站添加代碼，例如額外的CSS或JavaScript，即使您沒有使用它。 WordPress管理員可以從WordPress控制面板禁用插件，或者如果他們確定插件永遠(yuǎn)不會(huì)使用，則可以完全刪除插件代碼。

刪除不必要的資源

您的模板真的需要十五種字體嗎？您是否添加了七個(gè)分析系統(tǒng)？那個(gè)第三方小部件有必要嗎？是否需要顯示來自五十個(gè)廣告網(wǎng)絡(luò)的廣告？您是否需要多個(gè)JavaScript庫(kù)？您可以用CSS3效果替換JavaScript動(dòng)畫嗎？清理一下，刪除任何不需要的東西。

替換社交網(wǎng)絡(luò)按鈕

您的頁面上是否有Facebook、Twitter、Google 和LinkedIn分享按鈕？?jī)嵐芩鼈兛雌饋砗軣o害，但它們可能會(huì)向您的頁面添加數(shù)百kb的第三方JavaScript。這是一個(gè)臃腫的安全風(fēng)險(xiǎn)，會(huì)對(duì)性能產(chǎn)生負(fù)面影響。第三方代碼是不必要的——您可以使用幾行HTML將無脂肪的社交按鈕添加到您的頁面。少量JavaScript可以增強(qiáng)使用彈出窗口或使用Google Analytics中的事件跟蹤記錄用法的體驗(yàn)。

合併和壓縮JavaScript和CSS

在開發(fā)過程中，將JavaScript和CSS文件拆分為獨(dú)立的模塊是可行的。但是，在生產(chǎn)服務(wù)器上託管單個(gè)文件之前，應(yīng)將這些文件合併和壓縮以刪除註釋和空格。 (注意，您的WordPress style.css文件必須保留頂部的主題詳細(xì)信息，否則它將中斷！)

處理您的圖像

圖像是網(wǎng)站臃腫的最大原因。刪除單個(gè)500kb的高分辨率圖像可以將重量和下載時(shí)間減少25%或更多。

刪除或替換不必要的圖像

我確信那個(gè)英雄形像很漂亮，而且符合品牌形象，但它是否正在讓您失去客戶？可以使用CSS3漸變、邊框、濾鏡或其他效果替換全部或部分圖像。

使用正確的圖像格式

始終使用合適的圖像格式。一般來說：

• 使用SVG用於矢量徽標(biāo)和圖表
• 使用JPG用於照片
• 使用PNG用於其他所有內(nèi)容
• 但對(duì)於較小的、顏色有限的圖像或帶有動(dòng)畫的圖像，請(qǐng)考慮使用GIF。

有其他格式，如WebP，但瀏覽器支持有限。如有疑問，請(qǐng)嘗試所有合適的選項(xiàng)並選擇最佳選項(xiàng)。但請(qǐng)注意：

• JPG是一種有損格式，會(huì)在更高的壓縮率下刪除細(xì)節(jié)。為每個(gè)圖像找到質(zhì)量和文件大小之間的最佳折衷方案。
• PNG提供256和24位顏色種類。 256色版本通常會(huì)產(chǎn)生較小的文件。
• PNG和GIF都提供透明度。盡可能關(guān)閉透明度以節(jié)省更多字節(jié)。

調(diào)整大型位圖圖像大小

基本的相機(jī)或手機(jī)拍攝的圖像太大，無法在任何設(shè)備上顯示。 WordPress提供調(diào)整大小的選項(xiàng)，但為了獲得最佳效果，編輯器應(yīng)在上傳之前裁剪和調(diào)整大小。圖像尺寸不應(yīng)超過其容器的最大尺寸。使用高密度/視網(wǎng)膜顯示屏的用戶可能會(huì)欣賞更高分辨率的圖像，但您可以使用img標(biāo)記srcset屬性提供替代方案。調(diào)整圖像大小會(huì)對(duì)頁面重量產(chǎn)生重大影響。將尺寸縮小50%會(huì)使總面積減少75%，從而相應(yīng)地改善文件大小。

最大化圖像壓縮

您可以通過刪除元數(shù)據(jù)、降低顏色深度和調(diào)整壓縮係數(shù)來大幅減小位圖圖像的大小。 WordPress插件（如WP Smush、EWWW Image Optimizer、Imagify、Kraken Image Optimizer、ShortPixel Image Optimizer和CW Image Optimizer）可以為您處理此過程。為了獲得最佳效果，應(yīng)在上傳之前處理圖像。軟件選項(xiàng)包括OptiPNG、PNGOUT、jpegtran和jpegoptim。 Windows用戶可以嘗試使用出色的RIOT?；蛘?，可以使用TinyPNG/TinyJPG等在線工具?？梢酝ㄟ^將值四捨五入到更少的十進(jìn)制位數(shù)、簡(jiǎn)化路徑以及從XML中刪除不必要的註釋、屬性和空格來壓縮SVG圖像。您的SVG編輯器應(yīng)該有壓縮文件的選項(xiàng)，或者可以使用SVG編輯器和SVGO等工具。您還可以將樣式指令移動(dòng)到CSS。

實(shí)現(xiàn)延遲加載

最後，延遲加載技術(shù)確保僅在包含它們的框在視口中可見時(shí)才下載圖像。實(shí)現(xiàn)延遲加載的WordPress插件包括Lazy Load、jQuery Image Lazy Load WP、BJ Lazy Load、Rocket Lazy Load、Unveil Lazy Load和Lazy Load for Videos。其他資源：

• 五種提高網(wǎng)站性能的圖像延遲加載技術(shù)
• 如何構(gòu)建您自己的漸進(jìn)式圖像加載器

更徹底的解決方案

如果您的主題仍然超重，您可以考慮更激烈的節(jié)食方案……

採(cǎi)用構(gòu)建流程

構(gòu)建流程可以自動(dòng)優(yōu)化圖像並合併和壓縮CSS和JavaScript文件。您可以為您的WordPress主題採(cǎi)用Gulp構(gòu)建流程，這可以節(jié)省數(shù)小時(shí)的工作量，提高頁面性能，並使開發(fā)更有趣。

考慮漸進(jìn)式Web應(yīng)用技術(shù)

漸進(jìn)式Web應(yīng)用技術(shù)允許Web應(yīng)用程序通過緩存基本和常用資源來離線工作。雖然這通常用於應(yīng)用程序，但可以將您的網(wǎng)站改造為漸進(jìn)式Web應(yīng)用程序，並享受快速加載和離線操作的好處。

避免第三方代碼

您會(huì)授予未知開發(fā)人員訪問您網(wǎng)站代碼的無限制權(quán)限嗎？不會(huì)？那麼為什麼還要信任第三方小部件，例如社交媒體分享按鈕和討論論壇呢？雖然這些小部件很少會(huì)危及安全性，但您應(yīng)該檢查它們正在加載哪些隱藏資源，並評(píng)估對(duì)性能的影響。

仔細(xì)評(píng)估WordPress主題

免費(fèi)和商業(yè)WordPress主題在財(cái)務(wù)上是有意義的。當(dāng)現(xiàn)成的主題以幾美元的價(jià)格滿足您的所有需求時(shí)，為什麼要雇傭開發(fā)人員呢？但要注意隱藏的成本。通用模板必須銷售數(shù)千份才能收回開發(fā)工作。為了吸引買家，開發(fā)人員會(huì)捆綁許多您可能永遠(yuǎn)不需要的功能。檢查一：主題看起來好嗎？ 檢查二：主題在各種設(shè)備和網(wǎng)絡(luò)上的性能如何？ 另見：高級(jí)WordPress主題的10個(gè)特性。

簡(jiǎn)化您的網(wǎng)站

有一種趨勢(shì)是轉(zhuǎn)向更簡(jiǎn)單、更精簡(jiǎn)、更以客戶為中心的網(wǎng)絡(luò)體驗(yàn)。這可能比聽起來更難，但將所有可以想像的功能都提供給所有用戶的舊時(shí)代已經(jīng)過去了。您能否說服您的老闆/客戶是另一回事！

改變您的開發(fā)生活方式

誰應(yīng)該對(duì)達(dá)到2.8Mb的網(wǎng)頁負(fù)責(zé)？是我們。網(wǎng)站變得臃腫的原因和方式並不重要——開發(fā)人員讓它發(fā)生了?？焖匍_發(fā)和削減成本仍然很重要，但當(dāng)它導(dǎo)致沒有人想使用的緩慢、笨拙的網(wǎng)站時(shí)，整個(gè)過程都是徒勞的。您的客戶/老闆可能不了解技術(shù)問題，但您應(yīng)該解釋後果。從一開始就考慮性能。與內(nèi)容、SEO、可用性和可訪問性一樣，性能永遠(yuǎn)不應(yīng)該被忽視！創(chuàng)建快速的WordPress主題很難，但稍後“添加”性能則要困難得多且成本更高。

其他建議：

• 當(dāng)您在快速的200Mbps連接上進(jìn)行開發(fā)時(shí)，很容易忘記帶寬。限制連接或嘗試在信號(hào)較差的區(qū)域加載您的網(wǎng)站。如果您感到沮喪，您的用戶也會(huì)感到沮喪！
• 考慮頁面重量並質(zhì)疑添加到主題的每個(gè)資源?？紤]“評(píng)分”策略，例如，如果您要添加20kb的字體，則必須從其他地方節(jié)省20kb。

性能不佳的網(wǎng)站已成為一種流行病，但很明顯，很少有開發(fā)人員對(duì)此感到擔(dān)憂。那些關(guān)心的人將獲得更多訪問者、更高的轉(zhuǎn)化率和更高的薪水！

關(guān)於改進(jìn)WordPress主題性能的常見問題

如何優(yōu)化我的WordPress主題以獲得更好的性能？

優(yōu)化WordPress主題以獲得更好的性能涉及多個(gè)步驟。首先，選擇一個(gè)輕量級(jí)且專為速度設(shè)計(jì)的主題。避免使用加載了您不需要的功能的主題，因?yàn)檫@些功能會(huì)減慢您的網(wǎng)站速度。其次，使用良好的緩存插件。這將存儲(chǔ)您網(wǎng)站的一個(gè)版本在服務(wù)器上，並將其提供給訪問者，從而減少服務(wù)器需要執(zhí)行的工作量。第三，優(yōu)化您的圖像。大型、高分辨率的圖像會(huì)減慢您的網(wǎng)站速度，因此請(qǐng)使用圖像優(yōu)化插件來減小圖像大小，而不會(huì)損失質(zhì)量。

哪些常見問題會(huì)導(dǎo)致我的WordPress網(wǎng)站速度變慢？

有幾個(gè)常見問題會(huì)導(dǎo)致WordPress網(wǎng)站速度變慢。這些問題包括緩慢的託管提供商、不使用內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN)、過多的插件、大型圖像以及不使用緩存插件。定期監(jiān)控網(wǎng)站的性能並解決出現(xiàn)的任何問題非常重要。

如何選擇快速的WordPress主題？

選擇WordPress主題時(shí)，請(qǐng)尋找輕量級(jí)且專為速度設(shè)計(jì)的主題。避免使用帶有許多您不需要的功能的主題，因?yàn)檫@些功能會(huì)減慢您的網(wǎng)站速度。此外，請(qǐng)檢查主題的評(píng)級(jí)和評(píng)論，看看其他用戶是否遇到過其速度方面的問題。

CDN 如何提高我的WordPress網(wǎng)站的性能？

CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）可以極大地提高WordPress網(wǎng)站的性能。它的工作原理是將您網(wǎng)站的副本存儲(chǔ)在世界各地的服務(wù)器上。當(dāng)用戶訪問您的網(wǎng)站時(shí)，CDN 會(huì)從最靠近他們的服務(wù)器提供內(nèi)容，從而減少內(nèi)容加載所需的時(shí)間。

如何優(yōu)化WordPress網(wǎng)站上的圖像？

您可以通過使用圖像優(yōu)化插件來優(yōu)化WordPress網(wǎng)站上的圖像。這些插件會(huì)減小圖像的大小而不會(huì)損失質(zhì)量，這可以顯著提高網(wǎng)站的加載時(shí)間。您也可以在上傳圖像之前手動(dòng)優(yōu)化圖像，方法是降低其分辨率或壓縮它們。

過多的插件如何影響我的WordPress網(wǎng)站的性能？

雖然插件可以向WordPress網(wǎng)站添加有用的功能，但插件過多會(huì)減慢網(wǎng)站速度。每個(gè)插件都會(huì)添加一些代碼，您的網(wǎng)站必須加載這些代碼，這會(huì)增加加載時(shí)間。重要的是只使用您真正需要的插件，並定期檢查和刪除不再需要的任何插件。

如何監(jiān)控我的WordPress網(wǎng)站的性能？

您可以使用多種工具來監(jiān)控WordPress網(wǎng)站的性能。這些工具包括Google PageSpeed Insights、GTmetrix和Pingdom。這些工具可以提供關(guān)於您的網(wǎng)站性能的寶貴見解，並識(shí)別需要解決的任何問題。

緩慢的託管提供商如何影響我的WordPress網(wǎng)站的性能？

您的託管提供商在WordPress網(wǎng)站的性能中起著至關(guān)重要的作用。如果您的託管提供商的服務(wù)器速度緩慢，您的網(wǎng)站速度也會(huì)緩慢。選擇提供快速、可靠服務(wù)的託管提供商非常重要。

如何減少WordPress網(wǎng)站上的HTTP請(qǐng)求數(shù)量？

減少WordPress網(wǎng)站上的HTTP請(qǐng)求數(shù)量可以提高其加載時(shí)間。這可以通過組合CSS和JavaScript文件、使用精靈圖像以及減少頁面上顯示的帖子數(shù)量來實(shí)現(xiàn)。

如何使用瀏覽器緩存來提高WordPress網(wǎng)站的性能？

瀏覽器緩存可以通過將您網(wǎng)站的一個(gè)版本存儲(chǔ)在用戶的瀏覽器中來顯著提高WordPress網(wǎng)站的性能。這意味著當(dāng)用戶重新訪問您的網(wǎng)站時(shí)，它會(huì)加載得更快，因?yàn)闉g覽器不必再次下載所有內(nèi)容。您可以通過使用緩存插件或向.htaccess文件添加代碼來啟用瀏覽器緩存。

以上是如何提高WordPress主題的性能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！