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

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

    还有一些建议是关于服务器端设置的,需要后端做配合,比如CDN,ETAG,哈希表缓存,文本数据库(Key-value形式)取代Mysql存储常用数据。

    总之,网站没有最快,只有更快!在不断的改进中你可以做到近乎极致的用户体验:快速、高效、顺畅!

本文转自Kai的世界,道法自然博客园博客,原文链接:http://www.cnblogs.com/kaima/archive/2010/05/11/vancl_frontend_optimize.html,如需转载请自行联系原作者。

凡客诚品官方网站的前端改进建议相关推荐

  1. 凡客诚品官方网站:精彩生活从凡客开始

    点此进入凡客诚品官方网站vancl.com   自从改革开放一直到今天,人们的生活水平翻了好几翻,在生活水平提高的同时,科学技术也在跟着提高,现在是讲究高效的时代,效率.时间决定一切.人们都很忙碌,没 ...

  2. 奇志思达-微网站前端规则建议

    奇志思达-微网站前端规则建议 头部加上: <meta http-equiv="cache-control" content="no-cache" /> ...

  3. 前端HTML小米官方网站界面部分实现

    前端HTML小米官方网站界面部分实现 完整代码 效果参考图: 小米官网图: 定义与用法 background: rgba(131, 131, 131, 0.6); rgba() 函数使用红®.绿(G) ...

  4. c语言mysql源代码,永盈会-官方网站

    SLF4J1.7 一个日志模板,从traceback打印异常受启发做的模板,可被pycharm esclip sublime等ide识别和跳转. 安卓构架组件--向项目添加组件(Adding Comp ...

  5. 适合所有网站的前端优化技巧,值得你收藏!

    导读:本文虽然明指了某个主页,但是其实是适合所有网站系统前端的优化技巧的. 最近,我们将 Universe.com 主页的性能提升了十倍以上.在本文中,我们将解析实现这一重大改进的具体技术手段. 但在 ...

  6. YAHOO 35条前端优化建议

    参考: 主参考网址:http://www.360doc.com/content/14/0325/14/15727046_363598248.shtml Yahoo网址:http://developer ...

  7. html中sort函数,bg真人是真的假的-官方网站

    server 三种方式的主要参数对比如下: 三种方式支持的GPU的型号列表: vGPU在NVIDIA K1.K2的不同Profile的组合方式: vGPU的组合方式: vGPU在建立虚拟机时,每个GP ...

  8. 用心服务每一所高校:传智播客旗下院校服务品牌——院校邦官方网站正式上线!

    文章目录 院校邦官网介绍 院校邦业务范围介绍 院校邦展望 院校邦官网介绍 经过长达半年时间的筹备,近日,传智播客旗下院校服务品牌--院校邦官方网站(www.ityxb.com)正式上线运行. 官网旨在 ...

  9. linux系统默认硬盘启动,帮助中心--起点操作系统(StartOS)官方网站

    如果您已经拿到 StartOS 的安装光盘,那还犹豫什么呢? 马上将计算机设置为从光驱启动,插入安装光盘,开始安装之旅吧!StartOS 是免费的,可以从官方网站直接下载.下载得到的是后缀名为&quo ...

最新文章

  1. VS2010旗舰版无法安装
  2. POJ 1806 Manhattan 2025
  3. linux 启动脚本 tty,Linux启动过程简介
  4. struct2 开发环境搭建 问题
  5. 机器学习笔记(四)决策树
  6. 解读电感和电容在交流电路中的作用
  7. NHibernate简介
  8. 前端学习(2832):小程序事件绑定2
  9. java datainputstream_Java中DataInputStream的用法
  10. GCD三部曲之一---辗转相除法
  11. 在线蚂蚁文,菊花文生成工具
  12. 使用java6做webservice 的客户端
  13. 大数据未来7大发展趋势
  14. 阿里飞天分布式操作系统
  15. matlab xcorr lags,[转载]matlab中xcorr的用法
  16. js和es6高频面试题总结
  17. 阿里云云计算专业认证考试(ACP级)
  18. 使用cv2在图片上绘制点
  19. Python GUI 开发工具
  20. 3分钟带你轻松了解贝塞尔曲线(cubic-bezier)

热门文章

  1. python linux下载磁力链_Python爬取80s网电影名称及迅雷(磁力)链接
  2. winscp怎么更改linux权限,winscp中使用sudo的方法
  3. 盖茨比了不起的每日作息
  4. 在 C# 中使用 SpanT 和 MemoryT 编写高性能代码
  5. 力驱动泊萧叶流,基于 MRT-LBM 的流场与声场仿真计算 --王富海2017
  6. dns 刷新本地DNS缓存的方法
  7. 物体监测:Sliding Window
  8. Linux系统管理员应该了解的一些I/O统计工具
  9. sqlmap 检索 DBMS 信息
  10. java修改服务器文件名,批量修改文件名 java代码