下面的 12 条快速提升的方法将极大的改善你的网站加载时间,包括:
- 找出哪些插件正在拖慢你的网站;
- 自动压缩网页、图片、JavaScript 和 CSS 文件;
- 保持你的网站数据库干净简洁;
- 设置正确的浏览器缓存方式。
开始加速网站的一个好方式是看有什么是可以去除的。很多时候,一个网站的缓慢并不是因为它缺什么,而是因为它已经有了。
1. 找出正在拖慢你网站的插件
P3 是我最喜欢的诊断插件之一,因为它会显示给你其他插件对网页载入时间的影响。这使得找出正在拖慢你的网站的插件变得十分简单。
一个常见的罪魁祸首是社交分享插件,其中大部分会导致页面载入时间肿胀,而且可以轻松的使用嵌入式社交按钮代替添加到主题源代码中。
一旦你知道了是哪个插件在拖慢你的网站,你可以根据情况决定保留他们、替换他们或者完全删除他们。
2. 压缩你的网站
当你在电脑上压缩文件为 ZIP 格式,文件的总大小会减少,这使得发送给别人会更加容易和快速。Gzip 有着完全一样的工作方式,只不过压缩的是你的网页文件。
一旦安装完毕,Gzip 会自动压缩你的网站的文件为 ZIP 文件,节省带宽并加速页面载入时间。当一个用户访问你的网站,他们的浏览器会自动解压文件并显示其中的内容。这种从服务器传输内容到浏览器的方法更加有效和节省大量时间。
安装 Gzip 几乎没有负面影响,而提升的速度却可能是相当的显著。正如上面的截图所示,MusicLawContracts.com 在安装 Gzip 后从原来的 68 KB 减少为了仅 13KB。
虽然有些插件只需点一个按钮就能自动添加 Gzip 到你的网站,不过手动安装也是十分简单。打开你的 .htaccess
文件(在你的服务器根目录可以找到),并添加以下代码:
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:
#
# 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 替代。