如何提高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中文网其他相关文章！