如何提高WordPress主題的性能

提升WordPress主題性能的實用指南

核心要點

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

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

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

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

理想情況下，您應該在編寫第一行代碼之前就考慮性能。但是，您可能正在閱讀這篇文章，因為您的主題存在性能問題。幸運的是，有一些經濟有效的方案可以解決這個問題，而且沒有任何缺點。節省的每一毫秒都會降低您的成本，同時提高用戶滿意度、參與度和收入。

影響性能的因素

性能受以下因素影響：

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

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

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

衡量性能

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

• Pingdom
• Google PageSpeed Insights
• GTmetrix
• WebPageTest

瀏覽器的開發者工具網絡選項卡還提供有關佈局以及頁面準備好響應用戶事件所需時間的相關信息。

快速獲勝

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

聯繫您的網絡主機

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

啟用GZIP壓縮

幾乎30%的網站未能啟用GZIP壓縮。這通常可以在Web服務器設置或WordPress插件（如WP HTTP Compression和W3 Total Cache）中啟用。

啟用WordPress緩存

有幾個WordPress插件可以渲染頁面並將它們存儲在其第一次請求的緩存中。後續請求從緩存中獲取這些頁面，而不是在模板中重新生成數據庫內容。緩存插件包括W3 Total Cache、WP Super Cache、Hyper Cache、WP Fastest Cache和Cache Enabler。您的託管提供商可能能夠為您啟用緩存。我們的合作夥伴SiteGround擁有一個定制的緩存工具，可以大幅提升網站速度。

啟用瀏覽器緩存

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

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

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

禁用未使用的插件

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

刪除不必要的資源

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

替換社交網絡按鈕

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

合併和壓縮JavaScript和CSS

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

處理您的圖像

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

刪除或替換不必要的圖像

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

使用正確的圖像格式

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

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

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

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

調整大型位圖圖像大小

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

最大化圖像壓縮

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

實現延遲加載

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

• 五種提高網站性能的圖像延遲加載技術
• 如何構建您自己的漸進式圖像加載器

更徹底的解決方案

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

採用構建流程

構建流程可以自動優化圖像並合併和壓縮CSS和JavaScript文件。您可以為您的WordPress主題採用Gulp構建流程，這可以節省數小時的工作量，提高頁面性能，並使開發更有趣。

考慮漸進式Web應用技術

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

避免第三方代碼

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

仔細評估WordPress主題

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

簡化您的網站

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

改變您的開發生活方式

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

其他建議：

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

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

關於改進WordPress主題性能的常見問題

如何優化我的WordPress主題以獲得更好的性能？

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

哪些常見問題會導致我的WordPress網站速度變慢？

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

如何選擇快速的WordPress主題？

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

CDN 如何提高我的WordPress網站的性能？

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

如何優化WordPress網站上的圖像？

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

過多的插件如何影響我的WordPress網站的性能？

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

如何監控我的WordPress網站的性能？

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

緩慢的託管提供商如何影響我的WordPress網站的性能？

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

如何減少WordPress網站上的HTTP請求數量？

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

如何使用瀏覽器緩存來提高WordPress網站的性能？

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

以上是如何提高WordPress主題的性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！