凡客诚品官方网站的前端改进建议

打开http://www.vancl.com/发现采用的Asp.net&＃xff0c;这点我感到很欣慰&＃xff0c;毕竟国内采用.net技术体系的优秀网站少之又少。好奇之余右键-查看源码&＃xff0c;却不由得皱起眉头&＃xff0c;在此提几个可以让网站更快的前端建议&＃xff1a;

• 01.合并头部的script为一个&＃xff08;见图绿框部分&＃xff09;&＃xff0c;合并头部的css link为一个&＃xff08;见图红框部分&＃xff09;。减少对服务器端的文件请求数&＃xff0c;加快客户端浏览器响应。
  
• 02.合并尾部的script src&＃61;xxxx>成为一个&＃xff08;见图红框部分&＃xff09;&＃xff0c;以减少对服务器端的JS文件请求数&＃xff0c;加快浏览器响应。
  
• 03.将HTML压缩&＃xff0c;去掉多余的空格和html注释&＃xff0c;减少Html的大小&＃xff0c;加快下载。可以参考http://www.1616.net/&＃xff0c;html压缩后尺寸会更小&＃xff0c;用户打开会更快&＃xff0c;丝毫不会影响网页的表现。
• 04.将CSS也压缩&＃xff0c;去掉多余的空格和css注释。
• 05.利用YUI Compressor或者jsmin对Javascript文件进行压缩&＃xff0c;我看到很多js文件连注释&＃xff08;比如http://www.vancl.com/defaultjs/jquery-1.2.3.pack.js&＃xff09;都没有去掉&＃xff0c;白白增加文件的大小&＃xff0c;浪费用户带宽和增加网页下载时间&＃xff0c;影响用户体验&＃xff0c;深感痛心。
• 06.将图片进行压缩&＃xff0c;比如将非动画形式的gif转换成png8&＃xff0c;将颜色较少的jpg转成png8。这里借助了YSlow的一个小图片压缩工具Smush it做测试&＃xff0c;发现天哪&＃xff0c;可压缩空间太大了&＃xff0c;压缩后减少了794.36kb&＃xff0c;接近1MB!!!!!这是最值得做的优化之一。
• 07.为常用且很少变更的静态文件添加http expires头&＃xff0c;指定过期时间&＃xff0c;让其可以缓存到客户端浏览器&＃xff0c;不必每次都下载。节省用户的带宽&＃xff0c;加快响应。比如http://images.vancl.com/NewVancl/Common/logo.jpg这个logo可以肯定是一个月内都很少变动的&＃xff0c;可惜却只缓存了不到一个小半时&＃xff08;见图Firebug的分析&＃xff09;&＃xff0c;完全可以设置成一个月或者更长的时间。
  
• 08.将静态文件&＃xff08;图片/.css/.js&＃xff09;放置于不同的域名下&＃xff0c;而不是二级域名下&＃xff0c;避免额外的COOKIE传递&＃xff08;登陆后这个COOKIE会更大&＃xff0c;因为还有登录信息会附加传递&＃xff09;。现在凡客诚品的网站是将图片归于images.vancl.com下&＃xff0c;通过firebug分析可以看到&＃xff0c;额外传递了一些COOKIE&＃xff0c;当静态文件很多的时候&＃xff0c;合起来的总量就不小了&＃xff0c;造成带宽浪费用户下载时间更长。应该独立一个域名比如http://www.static-vancl.com/来放置这些静态文件。
  
• 09.最后一条就是将多个图标合成一张图片&＃xff0c;利用css background的设置&＃xff0c;来显示不同的图标&＃xff0c;这样能减少图片的数量&＃xff0c;也即减少对服务器文件的请求数量&＃xff0c;加快浏览器响应。参考http://i.9533.com/style/images/_h_bg.png这张图&＃xff0c;相信聪明的你一看就明白了&＃xff1a;&＃xff09;
  
  还有一些建议是关于服务器端设置的&＃xff0c;需要后端做配合&＃xff0c;比如CDN,ETAG,哈希表缓存,文本数据库&＃xff08;Key-value形式&＃xff09;取代Mysql存储常用数据。
  
  总之&＃xff0c;网站没有最快&＃xff0c;只有更快&＃xff01;在不断的改进中你可以做到近乎极致的用户体验&＃xff1a;快速、高效、顺畅&＃xff01;