新学习的关于如何给服务器资源添加过期头Expire headers，提升网站浏览速度

网站链接：http://googlo.me/archives/2364.html#

很有用，分享给大家

读完本教程你将会明白：
什么是浏览器缓存（browser caching）以及什么是过期头（Expires headers）
如何对你网站目前的性能状态进行检查
如何给你的网站添加过期头

提醒：在利用本教程中介绍的Expires headers添加方法对你的过期头进行更改前，请确定你的服务器是Apache服务器并且启用了mod expires模块，同时确信你对.htaccess文件拥有访问和读写权限，如果你不知道首先请向你的服务器提供商咨询。

--------------------------------------------------------------------------------

什么是浏览器缓存以及过期头？

使用浏览器缓存和过期头是为了减少HTTP的请求数，目的是为了提高网站的性能以增加用户粘滞性。

当用户第一次访问你的网站时，他们使用的浏览器会获取网页内所有的CSS、Javascript以及图片等文件。当相同的用户再次查看该页面的时 候，浏览器会再次获取并比对这些文件，这无疑给页面加载速度带来一些影响。但是当我们为页面添加了过期头以后，用户访问页面时，页面会告诉用户浏览器这些 文件在一段时间内（比如一个月）仍保持原样没有改变，也就是说当用户再次访问时，浏览器就不会重新抓取并比对CSS、Javascript以及图片等文 件，这样就加快了页面加载速度，增强了用户体验。

“If cached, the document may be fetched from the cache rather than from the source until this time has passed. After that, the cache copy is considered “expired” and invalid, and a new copy must be obtained from the source.” —— Apache官方解释

给你当前的网站性能做体检

在优化你的网站性能之前请使用Google PageSpeed tool 或者Yahoo Yslow来对你的网站性能进行测试。我推荐大家使用Gtmetrix，因为它同时集合了谷歌和雅虎的网页测速工具，而且它是同步更新的，当你对网站进行优化后，再次使用Gtmetrix时可以即刻看到优化效果。

在你没有对网站优化时使用Gtmetrix测试完你会看到类似于下面的图片：

如何给服务器资源添加过期头Expires Headers

Google Page Speed tool测试结果你会看到Leverage browser caching的建议：

“The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources”

Yahoo Yslow测试结果你会看到关于Add Expires headers的建议：

“There are [x] static components without a far-future expiration date.”

OK！带着疑问下面我将教大家如何去解决上面出现的网站性能缺陷。

--------------------------------------------------------------------------------

如何添加过期头

首先，观察一下你在Gtmetrix上测试的结果，在Leverage browser caching和Add Expires headers下面列出的内容里你看到了什么？在我的测试结果下，我看见了下面这些类型的文件（我认为你一定也看到了和我看到的同样的东西）：
images: jpg, gif, png
favicon/ico
javascript
css

回想一下你更改网站内不同类型的文件频率有多快？接着思考一下你希望这些文件在用户浏览器中缓存多长时间？下面差不多是你思考并作出设置的依据
years
months
weeks
days
hours
minutes
seconds

好的，先别急着向.htaccess文件内添加代码，让我们先看看下面这些文件类型，然后再对你的页面缓存时间作出合适的更改：

给网站图标添加过期头 Expires header for your favicon

像我们网站的图标文件favicon，一般是极少或不对它作更改的，那么我们就可以对favicon的过期时间设置长一点，下方为代码样式：
ExpiresByType image/x-icon "access plus 1 year"

代码意思是当用户首次访问页面时，用户浏览器会将图标文件缓存一年（当然，如果用户清空了浏览器缓存的话，再次访问时又会重新请求获取这些文件）

给网站图片添加过期头 Expires header for your images

对于网页内的图片，除了个别需要我们去做变动，通常情况下我们是不会去更改它的。所以缓存时间设置成一个月比较合适：
1.ExpiresByType image/gif "access plus 1 month"
2.ExpiresByType image/png "access plus 1 month"
3.ExpiresByType image/jpg "access plus 1 month"
4.ExpiresByType image/jpeg "access plus 1 month"


给网站的CSS文件添加过期头 Expires header for your css

对于我个人来说网站的CSS更改的频率不是太快，所以我把CSS的缓存时间也设置了一个月：
1.ExpiresByType text/css "access plus 1 month"


给网站内的javascript文件添加过期头 Expires header for your javascript

这个文件对我来说，我基本不会去看它的，所以缓存时间可以设置长一点为1天：
1.ExpiresByType application/javascript "access plus 1 day"


注意：对于过期头时间的设置不是越长越好， 比如10年。因为当你某天突然要对某个已经设置了过期头时间为10年的文件做改动时，即使你刷新了缓存，但是用户浏览器那边不会买账的，因为你更改的这个 文件的过期头设置可能正在用户浏览器中生效，所以如果过期头时间设置过长的话会起到相反的作用。不过你可以把改动过的文件的名字改成别的就可以了（最好使用版本号来命名文件，比如：把原来的A_v1.1.jpeg更改为A_v1.2.jpeg）

向.htaccess函数文件中添加过期头设置

打开文件管理器，在网站根目录www找到.htaccess文件并用编辑器打开（注意：在更改.htaccess文件之前请务必做好备份，出现问题时你可以随时进行覆盖还原）。首先将Apache服务器中的Expires headers module模块开启（将’ExpiresActive’设置成’on’即可），将下面的代码添加到你的.htaccess文件的顶部：
1.<IfModule mod_expires.c>
2.# Enable expirations
3.ExpiresActive On
4.</IfModule>


对于上面的代码，为预设日期添加默认指令效果会更好，那么再增加如下所示的另外两行代码：
1.<IfModule mod_expires.c>
2.# Enable expirations
3.ExpiresActive On
4.# Default directive
5.ExpiresDefault "access plus 1 month"
6.</IfModule>


以上的代码是添加过期头设置所必需的。下面我们为之前提到的所有类型的文件添加过期头设置，最终的代码如下所示：
1.<IfModule mod_expires.c>
2.# Enable expirations
3.ExpiresActive On
4.# Default directive
5.ExpiresDefault "access plus 1 month"
6.# My favicon
7.ExpiresByType image/x-icon "access plus 1 year”
8.# Images
9.ExpiresByType image/gif "access plus 1 month"
10.ExpiresByType image/png "access plus 1 month"
11.ExpiresByType image/jpg "access plus 1 month"
12.ExpiresByType image/jpeg "access plus 1 month"
13.# CSS
14.ExpiresByType text/css "access 1 month"
15.# Javascript
16.ExpiresByType application/javascript "access plus 1 day"
17.</IfModule>


OK！到此为止教程已经结束。

现在新建一个GTmetrix测试页面对更改过后的网站进行测试，并和之前的测试结果做一下对比，我确定你的网站性能会有很大的提升！下