YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Others » 杂谈:Make fewer HTTP requests 想起的一些事情

杂谈:Make fewer HTTP requests 想起的一些事情

最近在写关于前端优化的文章,其中有一个重要的原则——Make fewer HTTP requests。最近比较闲,就一直琢磨这个事情。突然想到了我们国内的各大网站,Make fewer HTTP requests 目前看来似乎成了国内各大门户网站无法客服的顽疾

没有装B的意思,我想其他的朋友也应该跟我有过同感的,我国的各网站包括传统的新闻门户和现在很火的电子商务网站也是,似乎都很有中国特色——“又臭又长”!我今天特意用(Firefox 27.0)Firebug分析了一下(网站都是我认为国内比较大的,排名不分先后):

网站名称 测试页面(均为首页) 页面长度 HTTP请求数 页面体积 (空缓存)加载时间
新浪网 http://www.sina.com.cn/ 8 屏 199 1.0M 5m4s(onload:2m31s)
网易 http://www.163.com/ 9 屏 256个 1.8M 5m31s(onload:2m9s)
搜狐 http://www.sohu.com/ 5 屏 263个 1.1M 2m11s(onload:2m10s)
淘宝 http://www.taobao.com/ 7 屏 127个(208个,拖到页面最下方) 672K(1.6M,拖到页面最下方) 2m54s(onload:2m19s)
天猫 http://www.tmall.com/ 8 屏 164个(344个请求,拖到页面最下方) 2.5M(5.7M,拖到页面最下方) 1m37s(onload:1m27s)
京东 http://www.jd.com/ 4.5 屏 98个(344个请求,拖到页面最下方) 1.2M(1.2M,拖到页面最下方) 2m6s(onload:52.64s)
土豆 http://www.tudou.com/ 10 屏 79个(281个请求,拖到页面最下方) 599.4K(4.0M,拖到页面最下方) 2m31s(onload:2m15s)
说明:测试当天公司网速不理想,不过大家主要看的HTTP的请求数量。测试的显示器分辨率 1680 * 1050。

很难得啊,京东的首页请求数是在100个以内,其余的都是在100开外。页面的总体积也是相当可观的,只有淘宝的首页做得比较好,672K,其余几个都在1M开外。说实话,所有这些网站从头看到尾其实都挺费劲的,所以我会说“又臭又长”。不知道这样一个传统是在什么时候形成的,还是说这个“传统”只是一个以讹传讹的结果。大家抄来抄去,就看上去都差不多了。不知道是不是真的有数据统计,显示中国人喜欢这样的风格,还是说亚洲人有这样的浏览偏好?!

当然,我这里就只针对前端性能方面来谈这种超长风格的页面带来的弊端。页面长了,必然内容就多了(好听点叫内容丰富,不好听就是堆砌数据),不可避免的HTML代码的体积就上去了,自然页面中图片,视频这类的组件数量就跟着上去了,HTTP requests 数量就上去了。前面的统计数据就有力的证明这一点。HTTP requests 数量一上去,必然的页面的加载数度就慢了,用户的浏览体验就会下降。这一点应该是做过一些年限的前端工程师都知道,但为什么一直到现在我们的这个“传统”就没有一点改变呢?!

减少页面HTTP请求,让页面加载速度更快,其实也不光只是为了提升用户体验。你也许会说,现在网络的速度不是问题啊,网速都很快啊!是啊,网速是比以前快乐,但是网页的加载速度依旧是个十分巨大的问题。

首先,虽然网速是比以前提高了不少,但是实际的服务器的带宽成本是没有降低(在中国很可能是每年都在涨)。钱啊!HTTP请求少了,通常情况下页面的流量就会下降,服务器的并发压力也就减轻了,做得好的话,你的服务器的数量也许能够减少1台,不用那么多的服务器做负载均衡。这样相关的硬件成本,维护成本,带宽费用都是可以有效降低的。

其次,网页打开的速度确实对网站的收益有着直接联系,特别是电子商务类的网站。这方面亚马逊网站是有研究统计数据的,网页速度加载时间慢100ms,网站的销售成交量会下降1%,雅虎的统计显示页面慢400ms,网站首页的浏览量会下降5%-9%,Google的统计则显示,网页加载速度慢500ms,网站的搜索使用率下降了20%。(这个统计的数据,大家可以参阅Nicle Sulivan 的 Design Fast Websites)这些是统计显示的结果是,页面加载速度或者说网站的前端性能是十分重要的,真的会对网站的经济效益带来直接影响的。而做好前端性能优化,带来的经济效益是前端工程师最大的价值所在!

实际上,几年前Web标准能够在全世界范围内得到迅速的推广普及,就是因为大家都认识到了聘请专职的前端工程师采用Web标准重构网站能够带来的经济效益。时过境迁,现在前端工程师的工作绝不仅仅只是当初的重构网站,作为前端工程师,需要充分优化网站的前端性能,给用户带来更好的浏览体验,同时也要给企业带来更好的经济效益,虽然这看上去不是那么直接。

记住这点,前端工程师做前端性能优化绝不是为了Show你的技术,也不是单纯的让网站打开的速度更快一些。做前端性能优化是要为公司创造经济价值的,这才是公司为什么聘请你原因。如果你还不明确这一点,说明你还不知道你的工作的真正价值所在(当然,只是我个人的观点)。

前面好像扯远了,回到“又臭又长”这个问题上来。我想我前面提到那些大型站点应该都有统计过网站的页面的点击热点统计。应该都集中在前两屏吧,绝大部分应该是在首屏的区域。所以可以这么说,那些超过前两屏的内容用户很少看,或者说几乎没有人看。那么,我个人认为这些很少看,甚至没有人看的内容其实是在浪费带宽,影响网站的前端性能。如果把这些内容都砍掉,基本我通过机的这些网站的HTTP请求数为少1半啊。网络的带宽流量会少30%起码会有吧,服务器的并行下载的压力会少1半,综合起来页面的加载速度起码要快一倍啊,那是个什么“赶脚”?

我虽然不是设计师,但我确实一个实际的真是用户。我个人的观点,那些新闻门户网站主要以文字为主的页面布局,说实话,要找到一条关心的信息真的不那么容易啊,特别是如果在下面几屏位置寻找到感兴趣的内容就更困难了。仅仅是页面打开速度快是不够的啊!即便页面加载速度比较快,最终的目的是要用户可以方便的查找到他感兴趣的内容啊,这样一个网站的用户体验才够好啊!

不知道这些门户网站在设计首页的时候有没有请用户做过用户行为分析测试,有几个用户(真心地)会把页面拖到页面超过3屏幕的位置查找信息。反正我的浏览行为是要么就直接在主导航点子栏目的链接离开主页,要门就是用搜索功能了。我是没有耐心不停往下拖动页面,在密密麻麻的文字中查找。当然,这里我说的是我的个人浏览习惯。这里扯一下,QQ的弹出新闻我会看,就一条很醒目。QQ的小的新闻窗口内容很集中,我可以很快的扫过所有栏目,哪里的新闻我还每天都看。但是我几乎不到QQ.com去看新闻,这里也是我为什么不统计QQ首页的原因。Anyway,新闻咨询网站这么长的版面就是值得商榷的。

内容丰富不丰富跟版面长度有直接关系吗,心理学上有这样的心里暗示之类的说法吗?如果是这样的话,报纸也许会做成跟国内新闻网站首页一样的超长版面的形式了。当然,这个完全是我的意淫。毕竟网站浏览起来,体验要好的话,打开速度一定快,还一点也是十分重要的就是前面说的,是要做到用户能够方便的找到他们感兴趣的内容啊!一个网站能有多少独家的新闻报道?能够让用户必须在你这里耐心的查找?

版面长了可以放更多的广告(图片,视频,软文)也许是一个原因吧?不过还是前面提到的,只要我说的用户行为是大多数用户的浏览行为。只有在首屏或者前3屏放置的广告效果才会好啊。下面几屏实际的广告价值就不大了,即便便宜愿意投放的人恐怕也不多,只有资金少,想混个脸熟的公司才会选择下几屏的广告位吧?如果是我,我更愿意放到子栏目的上面3屏,也不愿意放到首页几乎没有人看的位置。想做出广告品牌,还是要看效果的,也不是靠首页多堆一些广告位可以做出来的啊?当然,我不是做广告的,也不是职业经理人,不太懂怎么运营,还是在意淫!

电商和视频的网站现在都无一例外的采用了几乎全图片的数据内容展示。虽然页面的版面依旧比较长,但看上去更加有视觉冲击力,很吸引力的。话说几年前,他们还是大面积的文字区域。这个是较传统的门户有了明显的进化了。不过还是我意淫啊,这是应该主要是因为亚马逊,易贝都采用了图片展示的形式。电商网站要比门户更加紧跟潮流。电商网站的首屏基本都是纯广告,所以真正的栏目应该是从第二屏开始的,其实某种程度,电商网站首页都是广告。所以,作为广告采用图片这种更加具有视觉感染力的方式呈现信息应该是一个必然。(再意淫一下,相信不久由于网络数据传播技术的发展,网速怎的不是问题的时候,视频的广告一定会在电商风行起来的。广告效果好,赚得到钱,带宽成本提高应该不是问题的,即便是使用移动设备浏览视频。)

图片多了,大家都是首屏以外的图片都采用了 lazyload 的处理方式来优化页面初始的HTTP请求数。所以虽然这网站的版面都很长,网站图片很多,网页的大小都上兆了,可是我们感觉到的页面展现的速度还是很快的!

不过,版面过长带来的查询信息不容易的缺点依旧还在,或者我意淫的不必要的带宽浪费还是存在的。虽然它们都用了不同的方式解决查询难的问题。京东精简提炼了首页的版面长度,应该说版面过长还谈不上,版面长度上基本上上道了。天猫则采用了楼层导航的方式为用户提供了快速的栏目定位,但是还是舍不得那寸土寸金首页广告版面。10层楼似乎还是高了点!毕竟,有很多不是具体的某个用户关心的内容。

那怎样的首页才最理想, 我个人认为最好的页面的原型是Yutobe的首页,可以根据用户的订阅和浏览历史来分析用户的喜好,推送用户比较感兴趣的内容,定制个性化的首页。现在Tmall和Tudou都开始有了一些痕迹了,不过还是保持着比较“冗长”版面。还不够有针对性,不够个性化,还有些“浪费(用户的和自己服务器端的)流量”。

当然,要实现比较理想的个性化的精准推送,要求要有一套比较系统的用户行为分析体系,同时也要将以往的网站热点内容结合。既要显示的都是用户最感兴趣的,没有用户不需要的内容,又要达到良好的商业效果,这之间需要做得工作还非常的多,大家都要不断探索。而且,这也不光是前端技术的问题了,需要很多学科的综合研究分析。

不过就像我前面提到这些网站版式上的变化,已经开始向着那个理想的方向前进着。这方面,电子商务和食品类网站做得更好,而传统门户目前看,似乎都还做得不够。还在大把地浪费流量!目前他们都有自己的微博了,在微博中都已经开始做简单的个性推送了,为什么资讯网站就不这么处理呢?怎么做好用户行为分析,了解用户使用习惯,充分的分析研究用户体验,不断地给用户更好的体验是我们要认真思考的。

怎么真正打通微博这样的社交平台和传统站点之间的关联。用户在资讯网站访问偏好,完全可以推送到微博中,微博的人点也完全可以向资讯站点推送啊!成为一个社交化的系统平台。总之,目的是想尽一切办法只给用户喜欢的东西。用户兴趣爱好比较广泛的,它的HTTP请求就多一些,兴趣爱少少的,不活跃的用户,他的主页的请求就要尽量的少。为大家节省时间和流量,合理地并且充分地利用服务器资源。即节省了运营维护成本,有充分为用户着想,从分优化用户体验。怎么说呢,构建一个有人工智能的网络平台!

我是想到什么说什么,今天的杂谈就到这里吧!

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:杂谈:Make fewer HTTP requests 想起的一些事情

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)