Yslow评分:从F到A

YSlow 是安装在firefox上的一个页面评分插件,前端制作人员从中可以看到页面上有哪些不足,并且了解如何改进和优化。从而提高用户访问页面的速度。

那如何提升自己的Yslow评分呢?
下面是几个评分比较高的网站,我们来了解一下他们的架构:

  1. 雅虎 Yslow评分:A-96分
    作为插件的开发者yahoo,并不诧异他们为何取得如此高的评分。
    首先,他们使用了CDN(Content Delivery Network)技术,让用户可以就近取得所需的内容,解决网络拥挤的状况,提高用户访问网站的响应速度;其次,yahoo在ETags配置上也有独特之处,声明过期,就是说,用户从服务器取数据的时候,如果文件变化了,给他反馈新的文件,如果文件没有变化,只需告诉客户端没有变化即可,不必再把文件取回来,这样就节省了大量的网络带宽和资源。
    另外,我曾经认为所有的JS脚本都要放到页面底部最后加载,参考雅虎的代码结构后才发现,并不完全是这样,只要将那些在加载过程中要执行的脚本放到底部,就可以实现最大的下载并行。
  2. 小说网 Yslow评分:A-93分
    如果没有能力支付CDN的高昂费用,可以参考一下这个网站的代码结构。
    (a) 从样式表着手,避免CSS表达式。CSS表达式需要很多资源,有时甚至会造成页面假死。
    (b) 缓存一下不常修改的文件,并开启GZIP压缩,减少网络传输时间
    (c) 减少DNS查找。YSlow认为一个页面上2个以内的域名比较合理。有些网站挂了不少统计代码,或者广告代码。统计拖累用户速度、广告影响用户视觉。
    (d) 避免重定向(跳转),我们在给链接地址的时候,一般会把链接地址写成 http://xxx.cn/xxx 或者 http://xxx.cn/xxx/ ,有区别吗?有!服务器如果接收到的URL是http://xxx.cn/xxx,它会自动重定向到http://xxx.cn/xxx/,虽然进入的都是同一个页面,但是前者比后者多走了一步,重定向,显然多多少少浪费了一点时间。
  3. google Yslow评分:A-96分
    多数人可能认为GOOGLE没什么值得借鉴的,毕竟整站就那么几行代码。
    但是这几行代码,每天要承受过亿的用户访问量,在如此大的压力下,运行流畅,有很大一个因素取决于Minify JS。通过查看它的源代码可以发现,google不仅将JS进行了压缩,连页面代码中也没有不必要的空格和符号,使用了最短最简洁的变量名。联系到开发方面,建议大家采用yuicompressor,在调试时使用便于开发的模式,调试完成后直接压缩并发布。让用户得到最快捷的用户体验。
崔凯博客
Powered by WordPress | Theme by ck web design | TOP 顶部
Copyright © 崔凯 All rights reserved. 蜀ICP备12025891号.