手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:mod

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如下:

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

经自动处理后,会变成:

XML/HTML代码
  1. HTML tag   : <img src="images/ce.c17941127d34679357baa1b36fb4ecc5.logo,g" />  
  2. 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是这样处理的:
XML/HTML代码
  1. <img src="images/Puzzle.jpg" width="256" height="192" />  
识别 IMG 标记中设置的宽度和高度值,自动缩放为相应大小和质量的图片:
XML/HTML代码
  1. <img src="images/ic.HASH.256x192xPuzzle,j.jpg" />  
还有很多有趣的功能,在 http://www.modpagespeed.com 可以看到实例展示。

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

好象作者活在墙外,真让人痛苦,转载了他的文章吧,却不能给人家一个地址,所以贴上他的博客地址:http://hutuworm.blogspot.com/

Tags: apache, mod