总结：如何加速你的 WordPress 站点？

这篇文章英文原文发表于Smashing Magazine，感谢小影 的为我们带来的全文翻译。内容上讲解比较通俗易懂，非常适合初学者。

几个月前，我做了一个实验，看看在 2 小时内我可以为自己的网站提升多少速度。在安装了几个 WordPress 插件和修复了一些简单的错误后，我把网站的载入速度从 1.61 秒提升到了 583 毫秒。这可是足足 70.39% 的速度提升，且无需对网站的视觉做出任何更改。

根据 Akamai 在 2009 年的研究，47% 的访客希望页面在 2 秒内加载完，并且有 57% 的访客会在页面加载超过 3 秒后离开。除了这项研究，也有不少案例表明加载时间会影响销售。

在 2006 年，亚马逊报告指出，网页载入时间每提升 100 毫秒能带来 1% 的收入增长。仅仅几年后，Google 在一篇博客文章中宣布 考虑将网站速度加入到网站排名的算法中。

那么，你改如何加速你的 WordPress 站点？

下面的 12 条快速提升的方法将极大的改善你的网站加载时间，包括：

• 找出哪些插件正在拖慢你的网站；
• 自动压缩网页、图片、JavaScript 和 CSS 文件；
• 保持你的网站数据库干净简洁；
• 设置正确的浏览器缓存方式。

打好基础

当你的房子开始陷入地面，你不会去擦窗户  —— 而是修复地基。你的网站也是一样。如果网站托管在一个缓慢的服务器或是使用了臃肿的主题，快速方法不会有帮助。你需要修复基础。

所以，让我们从建立一个良好的基础和如何让我们的网站以闪电般的速度运行开始。

选择一个好的主机

你的主机公司和主机软件对你的网站有着很大的影响，其中包括许多其他重要的性能相关。我曾经被免费和廉价的主机所吸引，但事后我意识到主机不是一个应该吝啬的地方。

要正确的理解这一点，我的 2 位客户有着类似的网站但大不相同的主机提供商。一位使用 WPEngine (一个优秀的空间提供商)，另一位把他们的网站架设在一个廉价的共享服务器。

使用 WPEngine 的客户的 DNS 响应时间（即浏览器连接到主机服务器的时间）是 7 毫秒。使用廉价共享主机的客户的 DNS 响应时间是 300 毫秒。

如果你希望你的网站运行快速，从 一个好的主机提供商 和软件开始。

选择一个好的主题

不幸的是，不是所有的 WordPress 主题都是一样的。虽然有些是很快并且有着良好的编码，但其他的则以「多功能和可定制化」为幌子，因为花里胡哨的功能而臃肿不堪。

几年前，Synthesis 的 Julian Fernandes 做了一个有趣的研究案例，他把他的主题从 WordPress 默认主题更新为 Genesis Framework ，并监控网站速度。他注意到只是更改主题为 Genesis，他的载入速度从 630 毫秒提升到了 172 毫秒。

当你选择一个主题时，检查下主题演示的网页速度，使用诸如 Pingdom 的工具，来查看它在没有附加任何东西时的运行速度。这应该可以给你一个编码是否良好的参考。

使用一个内容分发网络 (Content Delivery Network)

我最近开始为我的一个网站使用内容分发网络 (CDN) ，发现降低了 55% 的带宽使用和巨大的网页载入速度提升。

CDN 通过世界范围内巨大的服务器网络存储你的文件。如果一个来自阿根廷的用户访问你的网站， 那么他们会从离他们最近的服务器下载文件。因为你的带宽被分布到了许多不同的服务器，单个服务器的负载也会被降低。

设置一个 CDN 也许需要几个小时，但它通常是显著提高网页载入速度的最快的方法之一。

12 个快速提升 WordPress 速度的方法

现在我们的基础已经打好，我们可以开始微调我们的网站。

开始加速网站的一个好方式是看有什么是可以去除的。很多时候，一个网站的缓慢并不是因为它缺什么，而是因为它已经有了。

1. 找出正在拖慢你网站的插件

P3 是我最喜欢的诊断插件之一，因为它会显示给你其他插件对网页载入时间的影响。这使得找出正在拖慢你的网站的插件变得十分简单。

一个常见的罪魁祸首是社交分享插件，其中大部分会导致页面载入时间肿胀，而且可以轻松的使用嵌入式社交按钮代替添加到主题源代码中。

一旦你知道了是哪个插件在拖慢你的网站，你可以根据情况决定保留他们、替换他们或者完全删除他们。

2. 压缩你的网站

当你在电脑上压缩文件为 ZIP 格式，文件的总大小会减少，这使得发送给别人会更加容易和快速。Gzip 有着完全一样的工作方式，只不过压缩的是你的网页文件。

一旦安装完毕，Gzip 会自动压缩你的网站的文件为 ZIP 文件，节省带宽并加速页面载入时间。当一个用户访问你的网站，他们的浏览器会自动解压文件并显示其中的内容。这种从服务器传输内容到浏览器的方法更加有效和节省大量时间。

安装 Gzip 几乎没有负面影响，而提升的速度却可能是相当的显著。正如上面的截图所示，MusicLawContracts.com 在安装 Gzip 后从原来的 68 KB 减少为了仅 13KB。

虽然有些插件只需点一个按钮就能自动添加 Gzip 到你的网站，不过手动安装也是十分简单。打开你的 .htaccess 文件（在你的服务器根目录可以找到），并添加以下代码：

1
2
3
4
5
6
7
8
9

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

一旦你添加了这段代码到  .htaccess 文件，通过运行 Check Gzip Compression 来测试 Gzip 是否开始工作。如果由于某种原因以上的代码不工作，尝试下 Patrick Sexton 在他的文章「启用 Gzip」中介绍的另一种方法。

3. 压缩图片

图片占用了绝大多数网站的大部分带宽。WP Smush.it 是另一个强大的插件，当你上传图片到媒体库时会自动压缩图片。所有的压缩都是「无损」的，这意味着你无须担心图片的质量会有任何变化。

WP Smush.it 有一个不错的地方在于它可以回溯工作。如果已经有上千张的图片保存在你的媒体库，你可以通过插件压缩所有图片来获得一个更易于管理的大小。

4. 利用浏览器缓存

浏览器缓存是一个棘手的问题。有不少强大的插件可以使用，但是如果设置错误，他们会导致利大于弊。

Expires headers (过期头信息) 告诉浏览器是否从服务器或浏览器缓存中请求一个特定文件。当然，这只在用户已经有一个版本的网页文件存储在缓存中时工作；所以，这项技术只会为那些已经访问过你的网站的人提升网站速度。

从 2 个方面加速网站。首先，他们减少了访客从你的服务器二次下载相同文件。其次，他们减少了产生的 HTTP 请求数。

要用插件做到这一点，我推荐使用 WP Super Cache。不过，强烈推荐你根据安装指南来确保正确的设置它。或者，你也可以通过添加以下代码到你的 .htaccess 文件来添加 Expires headers：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

#
# associate .js with “text/javascript” type (if not present in mime.conf)
#
AddType text/javascript .js
 
#
# configure mod_expires
#
# URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
#
 
ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType image/x-icon “access plus 2692000 seconds”
ExpiresByType image/jpeg “access plus 2692000 seconds”
ExpiresByType image/png “access plus 2692000 seconds”
ExpiresByType image/gif “access plus 2692000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 2692000 seconds”
ExpiresByType text/css “access plus 2692000 seconds”
ExpiresByType text/javascript “access plus 2692000 seconds”
ExpiresByType application/x-javascript “access plus 2692000 seconds”
ExpiresByType text/html “access plus 600 seconds”
ExpiresByType application/xhtml+xml “access plus 600 seconds”
 
#
# configure mod_headers
#
# URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
#
 
Header set Cache-Control “max-age=2692000, public”
 
Header set Cache-Control “max-age=600, private, must-revalidate”
 
Header unset ETag
Header unset Last-Modified

5. 清理数据库

我是一个经常使用 WordPress 自动保存功能的粉丝，但缺点是你的数据库会很快被上千的文章修订版、引用通知 (trackbacks, pingbacks)、待审评论和回收站项目填满。

这个的解决方案是一个名为 WP-Optimize 的神奇插件，它会定期清理你的数据库垃圾，保持数据库高效并只保存那些需要存储的数据。当然，在你对数据库进行任何操作前，务必先备份。

6. 压缩 CSS 和 JavaScript 文件

当你安装了不少插件后，也许你网站的每个页面都被引入了 10 到 20 个单独的样式表和 JavaScript 文件。这可不好。把所有的 JavaScript 合为一个 JavaScript 文件和所有的 CSS 合为一个 CSS 文件会卓有成效。

接下来就是压缩了，诸如 Better WordPress Minify 这样的插件会合并所有样式表和 JavaScript 文件到一个文件，减少浏览器需要产生的请求数。

我更喜欢 Better WordPress Minify，因为它做同一件事但没有一些其他插件那样激进（某些会导致问题，比如 Hristo Pandjarov outlines）。

7. 关掉 Pingbacks 和 Trackbacks

Pingbacks 和 trackbacks 被 WordPress 用来通知其他博客你的文章被引用了。有趣的是，他们可能会消耗页面速度，通常建议关掉。你可以在「设置」菜单下的「讨论」标签中关掉他们。

8. 指定图片尺寸和字符集

在访客的浏览器可以显示你的网页之前，它需要计算出该如何布局在图片周围的内容。如果不知道这些图片的尺寸，浏览器必须计算出来，从而导致其工作更繁杂，需要更长的时间。

指定图片尺寸可以让浏览器跳过这一步骤，加快执行效率。

出于同样的原因，在你的 HTTP 响应头中指定字符集也很有用，这样浏览器就不需要花费额外的时间来找出你使用的是哪一个。只需添加字符集到你的网站 head 部分。

9. 移动 CSS 到顶部、JavaScript 到底部

把你的样式表链接放在离页面顶部越近越好是广泛推荐的做法，因为浏览器不会在渲染 CSS 文件前渲染页面。另一方面，JavaScript 应该放在离页脚越近越好，因为在它完全加载之前会阻止浏览器解析任何内容。

在大多数情况下，这个简单的操作通过强制文件下载的最优顺序来提升页面载入速度。但是这在严重依赖 JavaScript 和需要在用户看见页面之前就加载 JavaScript 文件的网站上可能会导致问题。

10. 使用 CSS 雪碧图 (CSS Sprites)

雪碧图本质上是一个包含了所有独立图片相邻排列的大图。使用 CSS，你可以通过指定一组坐标来隐藏图片中任何你不需要的部分。

因为加载一张大图比加载一堆小图快很多，所以 CSS 雪碧图可以加速网站。

最简单的方法是 SpriteMe，一个可以把所有图片合并为一个 CSS 雪碧图的工具。

请记住 Safari 不会加载过大的雪碧图，所以请使用 William Malone’s calculator 以确定你的雪碧图是否过大。

11. 启用 Keep Alive（持久连接）

HTTP Keep Alive 涉及到客户机器和网络服务器之间请求下载文件权限发送的消息。启用 Keep Alive 允许客户机器下载多个文件而无须重复请求权限，因此节省带宽。

要启用 Keep Alive，只需复制和拷贝以下代码到你的 .htaccess 文件。

Header set Connection keep-alive

12. 适当的使用静态 HTML 替换 PHP

PHP 可以用来以高效的制作网站和减少输入相同信息的次数。然而，通过 PHP 调用信息要使用服务器资源，在不会节省任何时间的情况下应该使用静态 HTML 替代。

结论

在接下来的 12 个月中，移动互联网的使用量预计将超过桌面使用量。这种转向具备上网功能的移动设备的趋势意味着拥有一个快速的网站从来没有像今天一样重要。用户如今希望网站变得轻快，而不顺应该趋势的开发人员最终将输给投资于提供优秀体验的开发者。