Gimhoy's Blog

优化网站配置,提升访问速度之设置HTTP缓存

本文最后更新于2013年6月13日,已超过三年没有更新,如果文章内容失效,请反馈给我们,谢谢!

快速打开自己的网站,是每个站长的梦想。每次打开百度、新浪等网站,心中都默默地希望自己的网站也能达到这样的速度。今天就先讲一下其中一个提升网站访问速度的方法:设置合理的HTTP缓存。

 

缓存是什么?

简单地说,就是将网站上的一些静态资源(图片、js、css等)存储在本地,这样在用户第二次打开网页时,就直接从本地读取而不必再次从网站重新下载这些资源。这个功能不但提升了网页打开速度,也减轻了服务器带宽等压力。目前大多数浏览器厂商都提供了这一功能。

 

缓存有多大作用?

缓存的作用有多大?如果用户不会打开你网站的第二个页面,那缓存就没有作用。但是对于一个大型网站来说,缓存则是必不可少的。比如百度,首页日均PV约为10亿,在首页上加载的百度logo(http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif,size:1.54KB)在每次访问时都会显示出来,假如关闭缓存并忽略304命中,那么每天将产生1.54*1000000000 (KB)=1468.66(GB)也就是约1.5TB流量,假如全天24小时跑满,那么需要至少:(1503906.25*8)/86400=140MBps这么大带宽的主机,生产环境流量不可能24小时均衡的,并且这只是这一张LOGO图片的流量需要这么大的资源,而其它的资源并未考虑到。所以,百度明智地对这张图片配置了长达10年的缓存。

 

如何设置缓存?

在Apache环境下,可以通过在.htaccess文件中添加下面的代码,设置图片的HTTP缓存和有效期(需要开启apache的headers模块支持):

# Image and Flash content Caching for ONE Year blog.gimhoy.com
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
 Header set Cache-Control "max-age=3156000"

其中max-age后面这个数字就是设置的缓存有效期(以秒为单位),比如上面的代码设置了网站的图片使用为期一年(3156000秒)的HTTP缓存。

在Nginx下,可以通过修改nginx.conf配置文件,来修改缓存设置:

location ~* \.(flv|gif|jpg|jpeg|png|ico|swf)$ { 
expires 1y; 
access_log off; 
break; }

同样的方法,你也可以给js和css文件设置缓存。

 

如果要修改缓存的文件怎么办?

前面我们对静态文件设置了长达1年的缓存,一般来说这些静态文件很少修改,可是万一要修改呢?

别担心,HTTP1.0标准协议中规定,HTTP缓存只对单独的URL有效。

所以,如果你对静态资源做了修改,只需要在url后面带个参数,就可以更新缓存文件了。

比如,我对博客的图片设置了1年缓存,图片链接为http://blog.gimhoy.com/test.jpg。在访问这个页面时加载了这个URL,输出了1年的缓存,不过缓存只对这个URL有效,如果我修改了这个图片,只需要在引用这个URL到时候在后面加个参数,如改成http://blog.gimhoy.com/test.jpg?20130403,这样用户访问到的就是新的图片。当然,更简单直接的方法是,直接修改文件名,如改成http://blog.gimhoy.com/test2.jpg。

好了,关于HTTP缓存就讲这么多,下次讲介绍通过引用公共CDN库来对网站进行加速的方法。

 

系列文章:

1.优化网站配置,提升访问速度之设置HTTP缓存

2.优化网站配置,提升访问速度之引用CDN公共JS库

3.优化网站配置,提升访问速度之使用云存储

4.优化网站配置,提升访问速度之广告代码优化



免费获得每月10G空间+10G免费流量
No tags
  • Comment (8)
  • Trackback (4)
  • 热腾网Google ChromeWindowsChina2016/05/30 22:24@Ta

    按照配置后,网站出现500

    #5
    • 热腾网Google ChromeWindowsChina2016/05/30 22:30@Ta

      大意了。直接复制的,你的代码少了结尾。

  • 精品PPTGoogle ChromeWindowsChina2015/01/05 21:51@Ta

    照着试试看!不知道对win2003的云服务器管不管用。

    #4
  • ISOFTEEMozilla FirefoxWindowsChina2013/04/15 20:32@Ta

    作用大不大啊 😮

    #3
    • GimhoyGoogle ChromeWindowsReserved2013/04/16 00:53@Ta

      测一下我的博客不就知道了~

  • voncingMozilla FirefoxWindowsChina2013/04/14 20:06@Ta

    这个正在用,效果还不错

    #2
    • GimhoyGoogle ChromeWindowsChina2013/04/14 20:13@Ta

      嗯,特别是打开第二个页面的时候

  • 发现互联网Google ChromeWindowsChina2013/04/06 12:27@Ta

    好东西,回头试试

    #1