06月02, 2016

【译】Web会不会重生

原文:http://www.zcfy.cc/article/244

2015年7月,受Mat MarquisTXJS 2015上发言的启发,我建议网页的平均大小应该等于经典DOC游戏Doom安装的图片大小。

大约7个月平均下来,网页大小与Doom安装的图片大小相同。我们做到了,越来越大。 pic.twitter.com/xtSAtZjPGl

— ronan cremin (@xbs) July 30, 2015

我们做到了,虽然比预期晚了一点。这是我们当前的情况:

web page size revisited revised

Doom是一个多关卡第一人称射击游戏,有先进的3D渲染引擎,多个关卡,每一关都有不同的地图、精灵和声效。相比之下,2016年的网页也在努力让内容大小保持在相同大小。如果你对这个说法无动于衷,那你可能不了解背景。那我们现在的状况如何呢?

页面大小的总体趋势

首先,好的一面。代表2015年以来一直缓存增长的直线,好像有了变慢的迹象,直线的斜率相比历史稍有缓和。不好的一面,就是我们一直在以几乎相同的速度增大页面。

巨头与其他

虽然网页整体大小不可逆转地在增长,但有必要看一看全球前10大网站的网页大小。下图展示了全球网页平均大小与前10大网站网页平均大小的对比。

alexa_top_10_weight_vs_all_sites

有两点需要说明。

  1. 前10大网站明显比其他网站更轻量(如果你想做大自己的网站,值得参考)。
  2. 虽然网页总体在变大,但大网站的网页在变小。

读者可能会说,前10大网站有的是搜索引擎,它们的网页简单,有可能保持轻量。即便如此,第二点也值得关注,即它们的网页在变小,而不是变大。况且,前10大网站中也有像Amazon这样相对重量级的巨头。

注意:这们这里所说的平均网页大小忽略了很多重要细节。Ilya Grigorik说过,网页大小通常是分布式的,因此简单的平均值在这里是有误导性的。正如Ilya所说的

很简单,传输大小通常不是分布式的,没有合理的“中值”,因此讨论平均大小没有意义,甚至会上当。

当然,他说的没错。在这里平均数会受很大的极端值影响,但从另一个角度讲,桌面版的网页的“长尾”可是又粗又长(移动版就没那么严重)。有时候,中值(数列的中间值)能代表人们体验,而且最终的累积分布函数也是精确描述现实的唯一方式。

Web展望

2015年很显然是关键的一年。这一年发生了很多事件,昭示性能出现了问题。广告阻拦程序进入了iOS、Facebook和Google宣布了让Web更快的计划,连 《纽约时报》都在报道网页膨胀。还有Vox Media(The Verge背后的公司)宣布性能破产

广告虽然还是Web上的跳梁小丑,但现实却是我们对性能并没有足够重视。Web的青葱岁月里,我们任由各种功能蔓延,结果混乱不堪。新JavaScript相册模块?好啊,为什么不呢?噢,那款新Web字体用在这儿应该不错,对了,为什么不在那里加一个分析工具呢?我干嘛费劲地缩小6000像素的图片啊,让浏览器去处理吧,它应该为我服务。

新技术的应用通常遵循一定的模式:早期尝试->过度使用->理智应用。20世纪90年代,由于PC和桌面排版软件价格的下降,桌面出版技术一下子火起来了。人们都疯狂了,往页面中添加的颜色和字体越多,意味着越好。这种思潮经过了好多年才逐渐退去,才让创意和用户体验找到一个平衡点。

显然, 领导厂商对Web性能已经有了足够的重视,变化正在发生。但正如前面图表所示,并不是所有人都有了这种意识。10大网站指明了方向,其余的会快速跟进。更大的变化正在发生:WordPress在其4.4版中支持响应式图片,足以给全球平均网页大小带来巨大不同,因为有26%的网站都是用WordPress架设的。Drupal 8也一样,它把响应式图片模块放到了核心部分。

确实存在一个有效的循环效应:重要网站提升性能,低速网站会显得更慢。AMP和Facebook Instant Articles会告诉人们Web到底可以有多快。Google不断强化对性能影响排名的预警,甚至给网站加上了“慢”的标签。没什么比搜索结果排名更让人关注的了,那些缓慢膨胀的网站迟早会碰上竞争对手。

世界末日还远着呐,2015从长远来看应该是最重要的一年,而2016年会在此基础上继续推波助澜。但是也不能无视Web膨胀的危险。

英文原文:https://mobiforge.com/research-analysis/the-web-is-doom

本文链接:http://lisongfeng.cn/post/the-web-is-doom.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。