• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

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

网络技术 云落 3年前 (2014-10-02) 1292次浏览 已收录 1个评论
文章目录[隐藏]

本教程详细的解释了如何向你的.htaccess 文件添加 Expires headers,教程内容是基于谷歌和雅虎的网站性能标准,旨在帮助提高你的网站性能。

读完本教程你将会明白:

  • 什么是浏览器缓存(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

对于网页内的图片,除了个别需要我们去做变动,通常情况下我们是不会去更改它的。所以缓存时间设置成一个月比较合适:

ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"

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

对于我个人来说网站的 CSS 更改的频率不是太快,所以我把 CSS 的缓存时间也设置了一个月:

ExpiresByType text/css "access plus 1 month"

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

这个文件对我来说,我基本不会去看它的,所以缓存时间可以设置长一点为 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 文件的顶部:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
</IfModule>

对于上面的代码,为预设日期添加默认指令效果会更好,那么再增加如下所示的另外两行代码:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
</IfModule>
以上的代码是添加过期头设置所必需的。下面我们为之前提到的所有类型的文件添加过期头设置,最终的代码如下所示:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year”
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 day"
</IfModule>

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

现在新建一个 GTmetrix 测试页面对更改过后的网站进行测试,并和之前的测试结果做一下对比,我确定你的网站性能会有很大的提升!下图所示是我的网站重新测试的结果:如何给服务器资源添加过期头 Expires Headers


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何给服务器资源添加过期头 Expires Headers
喜欢 (3)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. Nginx系统怎么办? 楼主
    Helloyi2018-01-19 10:16 回复 Windows 10 | Chrome 65.0.3298.4