Xiangee

通过配置服务器端缓存及浏览器缓存，进行 Wordpress 加载速度的优化，加速页面加载。

什么是Web缓存，为什么要使用它？

Web缓存位于Web服务器之间（1个或多个，内容源服务器）和客户端之间（1个或多个）：缓存会根据进来的请求保存输出内容的副本，例如html页面， 图片，文件（统称为副本），然后，当下一个请求来到的时候：如果是相同的URL，缓存直接使用副本响应访问请求，而不是向源服务器再次发送请求。

使用缓存主要有2大理由：
减少相应延迟：因为请求从缓存服务器（离客户端更近）而不是源服务器被相应，这个过程耗时更少，让web服务器看上去相应更快；
减少网络带宽消耗：当副本被重用时会减低客户端的带宽消耗；客户可以节省带宽费用，控制带宽的需求的增长并更易于管理。

以上引用自 车东 翻译的 面向站长和网站管理员的Web缓存加速指南

服务器端缓存

现在的博客作者，除了使用BSP服务外（如yo2，blogbus等），多数独立博客使用虚拟主机平台，少数使用独立服务器或VPS。鉴于大多数虚拟主机服务商服务器配置的修改，国内的众多虚拟主机提供商，甚至连SSH都不行，但是这还是可行的优化方法，而且Wordpress有大量的插件支持这一优化方式，如WP-Cache、WP Super Cache、DB Cache、cos-html-cache
。

WP Super Cache 基本介绍

WP Super Cache 是 WordPress 官方开发人员Donncha 开发，是当前最高效也是最灵活的 WordPress 静态缓存插件。它直接生成 HTML 文件，这样 Apache 就不用解析 PHP 脚本，通过使用这个插件，能使得你的 WordPress 博客将显著的提速。

这个插件是基于 Ricardo Galli Granada 的 WP-Cache 2。WP-Cache 2 可以缓存你的 WordPress 博客使得不用再次访问数据库，但是它产生的是 PHP 文件而不是 HTML 文件，所以还需要 PHP 引擎去解析它们。而 WP Super Cache 则直接产生 HTML 文件，所以服务器不用解析甚至一行 PHP 代码，所以缓存之后的速度就和访问你服务器上的一张图片一样快。

更详细说明请看 我爱水煮鱼 的 最佳 WordPress 缓存插件：WP Super Cache

DB Cache 基本介绍

DB CACHE 通过在一定时间内缓存数据库查询，而不是生成静态文件，占用磁盘空间。

cos-html-cache 基本介绍

cos-html-cache 插件会在页面第一次载入的时候产生和url对应的真正的html文件作为缓存，后面的运行将会直接载入该html从而大大的提高了页面的效率。当页面内容发生变化时将会自动更新对应的页面，更新缓存的触发事件有：修改文章、删除文章、评论成功提交，同时这些事件也将会更新与之相邻的文章。

查看 图解cos-html-cache原理

对于静态缓存插件而言，由于是通过生成静态文件来进行缓存，但却失去了动态网站的灵活性，尤其是根据不同用户具有不同响应的功能，但这些功能可以通过JavaScript 实现。一般博客，WP Super Cache 完全可以胜任，访问量非常大的博客可选用cos-html-cache 生成静态html文件加速页面加载速度。

用户端缓存/浏览器缓存

对于新一代的Web浏览器来说（例如：IE，Firefox）：一般都能在设置对话框中发现关于缓存的设置，通过在你的电脑上僻处一块硬盘空间用于存储你已经看过的网站的副本。浏览器缓存根据非常简单的规则进行工作：在同一个会话过程中（在当前浏览器没有被关闭之前）会检查一次并确定缓存的副本足够新。这个缓存对于用户点击“后退”或者点击刚访问过的链接特别有用，如果你浏览过程中访问到同一个图片，这些图片可以从浏览器缓存中调出而即时显现。

通过使用 Cache-Control headers 来确定需要缓存的文件类型，以及缓存时间，以及利用 ETag 或 Last-Modified 进行缓存判断。

Apache 模块 mod_expire

在 .htaccess 文件中加入以下内容

<IfModule mod_expires.c>
# 启用缓存机制
ExpiresActive On

# 图片缓存时间为 1 年
ExpiresByType image/gif “now plus 1 year”
ExpiresByType image/jpeg “now plus 1 year”
ExpiresByType image/x-icon “now plus 1 year”
ExpiresByType image/png “now plus 1 year”

# Javascript, CSS 缓存时间为 12 小时
ExpiresByType text/css “now plus 12 hours”
ExpiresByType text/javascript “now plus 12 hours”
ExpiresByType application/javascript “now plus 12 hours”
</IfModule>

或者

<IfModule mod_expires.c>
ExpiresActive On
# 480 weeks
<FilesMatch “\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
ExpiresDefault “access plus 480 weeks”
</FilesMatch>

# 2 DAYS
<FilesMatch “\.(xml|txt)$”>
ExpiresDefault “access plus 2 days”
</FilesMatch>

# 2 HOURS
<FilesMatch “\.(html|htm)$”>
ExpiresDefault “access plus 2 hours”
</FilesMatch>

Nginx 设置

修改 conf/nginx.conf 文件，在相对应的 server 标签中加入

ocation ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires      30d;
}

location ~ .*\.(js|css)?$
{
expires      1h;
}

以上参数请根据实际情况调整，图片的 Future Expires Header 设为一个月以上。
查看 Web 前端优化之最佳实践，高性能 Web 站点 – 前端工程师的必要知识，Apache Module mod_expires。
相关

网站前端优化分析工具，Yahoo 的 Yslow 等，Google 的 Page Speed，以及 MySpace 的 MySpace’s Performance Tracker

在 WebSiteOptimization.com 有提供 Web Page Analyzer 可以看如何最佳化