加速，加速，再加速：来自Google的网站加速技巧大全(1)

【51CTO译文精选】困扰许多网站所有者很久的一个问题是网站访问速度总是那么慢。想购买独立带宽，预算不允许，想购买CDN加速，价格又太贵。那有没有经济实惠的解决办法呢？从目前的大环境来分析，我们也只有通过技术手段来解决这个问题了。

对Web开发有着深刻理解的著名搜索引擎厂商Google前段时间发布了一款Firefox /Firebug插件Page Speed（为什么是Firefox 而不是Chrome？），并已开源，网络管理员和Web开发人员使用这个插件对Web页面的性能进行评估，并提供改善性能的有益建议。并于今日呼吁大家共同努力，一起为互联网加速，可不是提什么空口号，Google已经将其研究结果和数据共享了出来，并提供了大量的网站加速教程，本文就对这些教程加以整理，与诸位共勉。（近来，Google对网站加速的重视程度越来越高，详情见51CTO之前的头条谷歌启动Web加速计划 拟改进TCP/IP和HTTP协议，以及Google研究小组有关搜索速度的最新报告）

css：每个声明只使用一次

要想让你的网站速度更快，其中重要的一条就是发送到浏览器的客户端代码要尽可能小，在优化css文件时，一个重要的原则就是每个声明只使用一次。这样就可以严格使用选择器组合。

例如，你可以将这两个规则

h1 { color: black; }  
p { color: black;   

合并成一个规则

h1, p { color: black; } 

这个例子是最简单的了，实际开发中的情况要复杂得多，根据我个人的开发经验，每个声明只使用一次后可以将css文件的大小降低20%-24%。下面再看一个复杂一点的例子：

h1, h2, h3 { font-weight: normal; }  
a strong { font-weight: normal !important; }  
strong { font-style: italic; font-weight: normal; }  
#nav { font-style: italic; }  
.note { font-style: italic; } 

根据每个声明只使用一次的原则，将其缩减为

h1, h2, h3, strong { font-weight: normal; }  
a strong { font-weight: normal !important; }  
strong, #nav, .note { font-style: italic; }  

注意!important声明可以与众不同。

在应用这个方法时有几点需要牢记于心：

◆首先，太长的选择器可能致使这个方法无效，重复选择器如html body table tbody tr td p span.example不能减少文件尺寸大小，实际上，每个声明只使用一次可能意味着选择器的数量会上升，甚至可能导致css文件更大，使用紧凑的选择器是更有帮助的，并且可以提升样式表的可读性。

◆第二，小心css规则，当一个用户代理不能解析选择器时，必须忽略声明，当你遇到这种情况时，只需要修改一下规则，让其可以使用多次即可。

◆第三，也是最重要的一点，如果你对样式表进行了排序，这个原则会改变你的排序，但这个顺序可以由浏览器来决定，如果你使用这种方法运行出了问题，最好的解决办法就是产生一个异常，并在出现问题的地方让声明使用多次就可以了。

在使用一个声明只使用一次的方法维护样式表时要格外小心，可以通过优秀的编辑器来跟踪变化（如显示变化行），然后在需要的地方插入声明，这种做法需要合并到工作流中。其实一个有效的方法是使用缩进排版，这样就很容易发现重复的声明的了。

使用gzip压缩页面

Gzip压缩需要Web服务器的支持，在没有gzip压缩的情况下，Web服务器直接把html页面发送给浏览器，而支持gzip的Web服务器将把html压缩后再发给浏览器，支持gzip的浏览器再在本地进行解压和解码，并显示出来。Gizp会将css文件，js文件，html文件中那些重复的字符串、标签、空格和样式定义进行压缩。我们还是举一个例子加以说明。

下面的代码未压缩前69字节，压缩后85字节。

< h1>One< /h1> 
< h2>Two< /h2> 
< h3>Three< /h3> 
< h4>Four< /h4> 
< h5>Five< /h5> 

我们将标题标签替换成div标签，源代码大小增加了10字节，变成了79字节，但经过压缩后只有66字节。

< div>One< /div> 
< div>Two< /div> 
< div>Three< /div> 
< div>Four< /div> 
< div>Five< /div> 

HTTP缓存

如果你正确设置了HTTP缓存报头，不但Web页面载入速度更快了，而且Web服务器的负荷也减少了，是一个双赢的举措。

缓存也就是资源的本地副本，因为很多资源都不会频繁更新，这时浏览器就可以直接从本地获取资源，不用到服务器去取，节省了连接时间和资源下载时间，使用HTTP缓存真正起关键作用的是HTTP缓存报头，这个报头指定了资源的有效时间和最后修改时间。

http协议有两种方法定义资源的有效时间：Expires和Cache-Control: max-age报头。Expires报头指定资源的过期日期，而max-age指定的是当资源下载到本地后多长时间有效。实际上它们要表达的最终含义是一致的。建议将资源的有效日期指定为1个月，长一点的话可以指定为1年。这两个报头一般只需要设置一个即可，如果同时进行了设置，那么max-age的优先级比Expires要高一些。如果你的资源比这个设定期限更新得要频繁一些，那么你可以采取对资源重新命名的方法，通常的做法是在URL中给资源加上版本号，当然这是引用资源的html页面也得做对应的修改。

当本地资源是有效状态时，浏览器有两个选择，其一是全部重新下载所有资源，其二是仅下载有变化的资源，为了让浏览器只下载有变化的资源，我们需要在GET请求中加上条件，http协议给了我们两个选项：Last-Modified和ETag报头。

Last-Modified报头指资源的最后修改时间，ETag报头是每个资源不同版本的唯一身份识别号，我们推荐你使用Last-Modified报头，因为日期如果足够早，浏览器可以跳过请求全部资源的。下面是两个测试页。

关闭Expires

开启Expires

在第二次载入页面时，可以再次点击链接，或者在地址栏中再按一次回车，如果点击刷新按钮，如果资源还在缓存中的话，会强制浏览器重新使用附条件的GET请求去获取资源。

为了更清晰地看到这个完整过程，可以使用HttpWatch工具，它可以查看http报头。如果使用Apache的话，可以参考mod_expires模块的资料。