mod_pagespeed：傻瓜式前端优化

曾经有位朋友自己做了个小网站，刚开始没什么人气，后来不小心把流量搞大了，用户抱怨访问缓慢，就让我帮忙看看哪里可以优化。那时 Steve Souders 老师的 YSlow 14条军规刚刚新鲜出炉，开宗明义第一句便是：网页性能 80% 消耗在前端。于是运用 Firefox+Firebug+YSlow 工具，轻松找到那些大图小用、过期时间太短、JS/CSS位置不正确、没有精简压缩的罪恶之源。前后只花一两周时间就把网站弄快了，好不得意。

今天 Google 发布的  mod_pagespeed for Apache 2，着实令人赞叹。原本需要一两周时间才能完成的前端优化工作，不到半个小时就能搞定，而且不用修改任何程序。现成的二进制安装包， 下载来直接装入系统，自动添加配置，重启 Apache 之后，一切前端问题自动优化。CDN服务商 Cotendo 已在其CDN服务器上部署mod_pagespeed以加速客户网站访问，图片文件大小经自动压缩可减少20%-30%，页面加载时间最多可缩短50%。Go Daddy 也宣布将在其客户网站服务器上广泛部署mod_pagespeed。
mod_pagespeed 中有很多巧妙的设计，规避了以往必须要动复杂手术才能解决的问题。比如，它可以将图片文件的过期时间自动延长到一年，无论图片是否存在同名更新（即文件名不变，图片内容随时可能改变，从而无法设置较长的过期时间）。假设网站原来的logo图片引用和HTTP header如下：

HTML tag   : <img src="images/logo.gif" />
HTTP header: Cache-Control:public, max-age=300

经自动处理后，会变成：

HTML tag   : <img src="images/ce.c17941127d34679357baa1b36fb4ecc5.logo,g" />
HTTP header: Cache-Control:public, max-age=31536000

mod_pagespeed 把原来的 logo.gif 转化为名称唯一的 ce.c17941127d34679357baa1b36fb4ecc5.logo,g ，并且将原先的过期时间300秒延长到31536000秒（一年）。mod_pagespeed 则仍然以此前定义的 TTL 300 秒为周期，定期检查图片是否更新，一旦图片内容发生改变，文件名也会相应变化，如此就不用管同名更新的问题了。

又如最常见且最难以控制的“大图小用”（80x80的图片框里塞一张1024x768的高清墙纸），mod_pagespeed是这样处理的：

<img src="images/Puzzle.jpg" width="256" height="192" />

识别 IMG 标记中设置的宽度和高度值，自动缩放为相应大小和质量的图片：

<img src="images/ic.HASH.256x192xPuzzle,j.jpg" />

还有很多有趣的功能，在  http://www.modpagespeed.com 可以看到实例展示。

mod_pagespeed 显然很适合中小规模网站使用，不用太多费力于前端改造，就能迅速成倍提升客户体验。但对于大规模商业网站来说，我认为还是要慎重，因为它实时过滤处理每一次请求，存在不小的开销，而且作为beta版软件，即使要采用也得先进行充分测试。当然各种优化手段也可能有副作用，值得一提的是，mod_pagespeed 的 文档写得不错，条件、限制、风险都很明确，建议详细研究后再作抉择。