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

核心要點(diǎn)

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

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

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

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

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

影響性能的因素

性能受以下因素影響：

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

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

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

衡量性能

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

• Pingdom
• Google PageSpeed Insights
• GTmetrix
• WebPageTest

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

快速獲勝

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

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

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

啟用GZIP壓縮

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

啟用WordPress緩存

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

啟用瀏覽器緩存

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

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

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

禁用未使用的插件

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

刪除不必要的資源

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

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

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

合併和壓縮JavaScript和CSS

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

處理您的圖像

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

刪除或替換不必要的圖像

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

使用正確的圖像格式

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

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

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

• JPG是一種有損格式，會在更高的壓縮率下刪除細(xì)節(jié)。為每個圖像找到質(zhì)量和文件大小之間的最佳折衷方案。
• PNG提供256和24位顏色種類。 256色版本通常會產(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)膜顯示屏的用戶可能會欣賞更高分辨率的圖像，但您可以使用img標(biāo)記srcset屬性提供替代方案。調(diào)整圖像大小會對頁面重量產(chǎn)生重大影響。將尺寸縮小50%會使總面積減少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ù)、簡化路徑以及從XML中刪除不必要的註釋、屬性和空格來壓縮SVG圖像。您的SVG編輯器應(yīng)該有壓縮文件的選項(xiàng)，或者可以使用SVG編輯器和SVGO等工具。您還可以將樣式指令移動到CSS。

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

最後，延遲加載技術(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é)食方案……

採用構(gòu)建流程

構(gòu)建流程可以自動優(yōu)化圖像並合併和壓縮CSS和JavaScript文件。您可以為您的WordPress主題採用Gulp構(gòu)建流程，這可以節(jié)省數(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)用程序，並享受快速加載和離線操作的好處。

避免第三方代碼

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

仔細(xì)評估WordPress主題

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

簡化您的網(wǎng)站

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

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

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

其他建議：

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

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

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

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

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

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

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

如何選擇快速的WordPress主題？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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