开发者社区> 长征2号> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

打开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,如需转载请自行联系原作者。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
我的博客网站初体验
利用博客网站编写和呈现新闻,融合多种媒介,综合性的呈现信息,既满足了当下人们的阅读习惯,也丰富了内容的呈现形式,让一个事件、一个故事变得更加立体、丰富。利用网站编写融合新闻将成为我创建云场景、构建云服务的起点,未来我会充分利用博文网站平台,结合自己的专业讲好生活中的好故事。另外,继续探索新的云服务领域,例如AI、编程、大数据等,文科生也可以“牛”起来。
24 0
使用阿里云ECS搭建自己的网站
我是一个高中生,05年出生于一个三线城市。虽然不是一个高校生,但我自认为我与高校生的技术不相上下。2018年就自己独立完成了一个网站的搭建与制作,制作了第一个个人主页。随后又攻读各种编程语言,迄今为止已经学会了PHP、Python、C++等常用编程语言。这次ECS购买,是由于想搭建一个个人博客,所以才选择阿里云。
59 0
【从零开始】从零开始拥有自己的网站(② SSL证书)
上一篇文章我们介绍了域名的概念和如何拥有一个域名,本篇文章我们将介绍关于SSL证书的内容。
54 0
阿里云建站:企业网站定制/速成美站/响应式功能建站官方购买及优惠详解!
阿里云网站建设分为云企业官网定制、云速成美站和响应式功能定制建站,星速云来详细介绍下云·企业官网定制、云·速成美站和响应式功能定制建站的区别,以及各个版本的官方报价:
911 0
阿里云建站:企业网站定制/速成美站/响应式功能建站官方购买及优惠详解!
阿里云网站建设分为云企业官网定制、云速成美站和响应式功能定制建站,星速云来详细介绍下云·企业官网定制、云·速成美站和响应式功能定制建站的区别,以及各个版本的官方报价:
572 0
SEO外链要做些什么?网站的整体形象宣传与推广渠道
页外搜索引擎优化技术,以建立您的网站的声誉和知名度 您已经优化了网站内容并遵循了所有这些最佳实践,以最大限度地提高您对搜索引擎的吸引力...下一步是什么?执行一个真正完整的SEO策略意味着超越自己网站的范围,也参与页外搜索引擎优化。
1538 0
最全的网站信息收集Sn1per
简介 Sn1per是一种自动扫描仪,可在渗透测试中使用,以枚举和扫描漏洞。 安装 你可以使用docker来安装它docker pull menzo/sn1per-dockerdocker run --rm -ti menzo/sn1per-docker sniper menzo.
1121 0
IIS日志-网站运维的好帮手
原文:IIS日志-网站运维的好帮手 对于一个需要长期维护的网站来说,如何让网站长久稳定运行是件很有意义的事情。 有些在开发阶段没有暴露的问题很有可能就在运维阶段出现了,这也是很正常的。 还有些时候,我们希望不断地优化网站,让网站更快速的响应用户请求, 这些事情都发生在开发之后的运维阶段。
1107 0
10个iPhone开发网站、论坛、博客
整理了一下手中的iPhone开发网站、论坛和博客,精选了这10个常去的网站。其中有2篇教学文章,由于非常经典,于是单列出来,与其网站并列。 建议新入行的朋友在看教学文章的同时多上论坛,与大家交流,偶尔看看别人的自曝,自己也会信心倍增。
1356 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Re: 移动开发的未来 来自一个微信移动开发者的自白
立即下载
Re:移动开发的未来—来自一个微信移动开发者的自白
立即下载
优酷质保秘籍
立即下载