吐槽“移动浏览糟透了”的Verge网站糟透了
王丢兜 @ 2015.07.29 , 09:00 下午# 几天前The Verge发文大吐槽“移动浏览糟透了”，谋智网络的一名火狐开发者实在不能忍，调出开发工具分析了The Verge的网站，然后发现问题在于The Verge自己家网站糟透了：
太长不读的中心思想：你造吗？访问The Verge网站会把你交给超过20家公司用于广告和追踪？这会让你的浏览体验更糟糕。也许我们该尝试别的办法了。
[-]
我喜欢The Verge，然而，唉。。。。
我在他家开张第一天就是The Verge的粉丝了。他家网站华丽内容优秀。
他们发了很多精彩的长文章，日常的新闻质量也很高。
但是我不得不说的故事就是，读了Nilay Patel的雄文“移动浏览糟透了”，感觉真是太不要碧莲了。
仅因为像The Verge这样的网站卡得慢死就怪到浏览器开发商头上，这真有点吃不消。
我的情况是这样的：我从来没有过iPhone，我有过一支Palm webOS手机，一堆Android设备，现在有一台规格很高的Boot2Gecko实验性手机。有些网站我掏出随便哪个设备都能愉快地点开，其他的，因为这些年来他们狂热推广App而忽视移动浏览体验，我就眼看着他们烂下去。
The Verge两头都没靠上，我作为粉丝表示沮丧。
是时候祭出开发工具了
打开The Verge的页面是个重活，这我已经知道有一阵了，但直到现在我才决定追根究底查看一番。
于是，我打开了火狐的网页开发工具，清空缓存加载网页。
[-]
这还行，一篇文章75kB的HTML。但是，我也预计还会有个把字体和一堆图片要加载。
[-]
7秒钟后，我们已经有了20个请求和超过1.4MB流量。要我建议的话，这个量是上限了，但还不算可怕。我说过The Verge的网站很华丽——华丽是有成本的。
哦不，等着，这货还没加载完。我开始滚屏和查阅，但我的浏览器还在转。我寻思着最终统计数字会是怎样的。
啊，我的流量！
[-]
额的雷帝嘎嘎啊。一共加载了超过30秒，最终，这货用263个HTTP请求拉下来超过9.5MB的数据。这几乎比这篇文章本身所需的流量和时间大了整整一个数量级。
这[哔-]的都是些什么啊？
[-]
哇。开发工具把页面重新加载了一次来做总体性能分析，这次它拉下来12MB——其中超过7MB是JavaScript代码！
让你对这些数字能有个概念：假设我有个每月1GB的流量套餐，那我只要每天打开像这样的网页三次，流量就爆了。如果我运气好，部分或大部分会有缓存所以不会这么糟，实际上，另一份报告指出有8MB是缓存里拿的——所以也许每天能开上四次。
那是假定手机浏览的缓存和我笔记本电脑上的相当，但这可不一定。
而且，这不是一篇带了很多交互特性之类的很酷的长文章，这只不过是一篇1,600字的吐槽文，带了几处引用、图片和一条视频。跟我这篇博文没啥本质区别。
那这些代码都是用来做什么的啊？
追根究底
嗯，我觉得Nilay Patel的微博提供了线索：
[-]
粉丝：这就是臃肿，你们干货和水分的比例是1:1000。
Patel：广告也是我们的干货的一部分！
我去，我就猜得到你们提供的绝大部分就是广告，广告再加上间谍软件。
在一次谋智周一更新公开例会上，我听说了Lightbeam这个项目：
Lightbeam是一个火狐插件，它用交互式可视化来展示网页上的第一方和第三方网站。
所以，我觉得我要用它来照一照The Verge的网页。这就是它显示的：
[-]
想象这是从上往下看一座冰上的情景。中间的大圆圈是The Verge，水面上的冰山一角。周围的三角形就是潜伏在水面下的第三方网站。Lightbeam有一个列表视图，所以我切过去仔细看一眼：
[-]
额天啊。“你访问了1个网站。你连接了47个第三方网站。”
22款间谍软件
公平的说，滚屏下去我能认出来有些不同的“网站”明显是同一家所属的不同域名。就算这样，在我力竭放弃前还是发现了超过20家不同的公司：
Google
Amazon
skimresources.com
sonobi.com
umbel.com
krux.com
mediamath.com
adnxs.com
bidswitch.net
scorecardresearch.com
kargo.com
quantcast.com
moatads.com
flashtalking.com
lotame.com
ixicorp.com
chartbeat.com
bombora.com
taboola.com
bluekai.com
marketo.com
retargeter.com
记得去参观供应商展厅！
我感觉就好像有人在我的客厅里布置了一整个可怕的高科技大会供应商展厅。说真的，你们这伙人就不能只挑个一两家或者十家么？你真就一个个展台走过去说“耶！酷！我填表报名！”么？我感觉被脱得光丢丢的连□□都被翻开来研究透彻了。
作为谋智的前端开发，我们为了加进哪怕仅仅一个谷歌分析插件，都要开上几个小时的会，痛苦地争议这样做是不是合适，需不需要通知用户和更新隐私政策。当然，我们在这方面是异常讲求的。
从前我在广告公司和数字营销公司做过。我对于跟合作伙伴、商务发展、分析、媒体这些人的这些对话并不陌生。我只能想象在我离开那行以后那里的局势已经愈演愈烈。
但我仍然——也许我是被谋智价值观洗脑了——不能想象有什么头脑正常的对话结果会是让The Verge邀请超过20家公司，让他们在你每次访问他们网站时，都到你的电脑上安营扎寨。我只能想象这是商务发展决定的得寸进尺，前端的内部邮件想来是这样的：
“嗨，你能把这个追踪用的1像素图片加上去吗？这货能做实时关注度热图，太棒了！”
“把这条嵌入代码贴进全局模板，行不？这第四个程序化广告平台真的能填补前三个的空缺。”
“这里多加个脚本。我们需要记录指向电子商务网站的这些链接的推广分数。”
“哦，嗨，我们需要这个新脚本来管理我们目前使用的这十几个广告平台。”
我猜测在这条道路上没有谁有权力或动机说不。我的意思是，说真的，往骆驼背上加根稻草又不会死人啊！我知道我以前从没注意或抱怨过这事，而且我怀疑大部分读者永远没这工夫这样做。
我们只是眼看着我们最喜欢的网站们越来越烂，并对此感到越来越无力而已。
网页是怎样烂掉的
我花时间啃了啃这些公司对本文作出贡献的源代码。一天中就那么多小时，而我还有这篇大吐槽博文要写完。
但是如果你想谈论浏览器性能——不管是移动还是桌面——你就不觉得也许、仅仅是也许，这7MB的JavaScript代码会有些影响？
首先，即使假设这些代码是从本地缓存里加载，把它们解析成能执行的代码是有代价的。当然，总有一天，我们会有WebAssembly来把这阶段的负担转移到前端开发者的编译器上。但我们现在还没有。
然后是这些代码一旦执行所做的事情。有常规性回报每一丝一毫浏览器指纹数据的；有决定是否和如何获取并注入广告的；我见过有些脚本会记录鼠标每个像素的移动并且隔几秒就回报总部的。
有会孵出很多个隐藏iframe的，每个都在干些有趣的猫腻；其他的会运行代码每秒触发10次不可见的页面重新渲染，吃掉你的CPU并导致滚屏和横竖切换卡成翔；有些脚本运行多次重复工作。
大家都(不)在这么干！
我见过这样的观点：这就是网站的资金来源。大家都在这么干。这是目前的现有技术。浏览器就应该抗住把活□□。
但有些网站比其他的好(很多)，而且也好像跟内容没有直接关系。我对一些每日必读网站做了个快速检查：
[-]
如果你认可我的论点：移动网页体验差主要是怪这些货，那就难怪在这个单子上的网站其体验越往下越好了。
我也的确深挖了这批网站中的每一个。但是很清楚的是，The Verge在对浏览器的要求之高上完爆其它网站。而福布斯则是很接近的亚军，而且它有时候会干些很讨厌的事情，比如当我停留在页面上时它每秒都要回传次数据。
哦，固然谋智首页不能算“每日必读”，但我的确经常用MDN。我在两者也都干过，所以我大概知道一些他们的所为和所不为——以及为了达成页面秒开我们内部是如何苦苦自我苛求的。
反正浏览器是干嘛用的？
Nilay Patel说“我们真正需要的是一个更强大、更健壮的Web。”个人来说，我觉得我们目前的Web可以是相当强大和健壮的。但也不要试图用买菜车拖动一幢房子。
但是这些冰山上面只有一□□东西是我们来访问所想要的，而藏在水面下的则是巨大的从一堆营销分析公司联盟那里按需装配出来的情报收集机关。为了这货优化浏览器值得吗？
我们到底是为了什么在打造浏览器？这是我们作为用户想要的吗？毕竟，浏览器本质上是用户代理。我知道web需要靠某种方式获得资金，但是代表着我们行事的代理应该盲目接受发行商塞下来的随便什么东西吗？也许我们的代理应该自主判断，来带给我们更好的交易和更好的性能。我知道这是危险言论，而且这意味着某些不归路。
中肯的说，考虑到像Flipboard，Facebook的Instant Articles和苹果的News应用这些例子，形势还不算最糟。这些是提供优秀阅读体验的高度决断性代理。
一言以蔽之，他们的做法是限制发行商到处塞进垃圾，所以用户就少吃到垃圾。这就是“策划”。作为看门人，他们迫使发行商剥得精光，只和一个中间人打交道。这就是双赢，不过这是应对一个自己造出来的问题的解决方案，它引入了看门人，而且给我们留下了对代理的少得多的选择和控制。
[-]
也许收费上网会更好？
因为决断观点会导致恶劣的争斗，浏览器一般保持中立。但是，如果选择是看着Web日斜西山，我们有什么可失去的？也许浏览器应该像这些新闻App开的先例一样强加一些限制。我们为了合理抵赖性与Adblock Plus这样的事物保持若即若离，但我认识的每个人都在用。
与此同时，有些人在琢磨如何更好地资助Web。信不信由你，谋智的内容服务团队正在思考比单单“在火狐里塞广告”多得多的东西。比如，如果我们实际承认广告是资助Web的广泛方式这一事实，然后使浏览器提供内置机制支持尊重隐私和性能的广告？好吧，这是改变了一些浏览器的传统中立性。但是，这对发行商和用户都会是更好的交易。
这里有另一个想法：大约一年前，我在谋智听说了“付费订阅Web”的概念，大意是：对于所有发行商，你每个月的广告价值大约是$6.2，那么如果你每月自己往一个账号里付这些钱，并使用浏览器里的一个内置机制来分配这笔钱？对，这是微支付，但有趣的是这伙人想出了一个听上去不吓人的具体金额。
但是，如果你不喜欢这个，我们还有其他选项。我是Tom Merritt的每日技术新闻秀的听众，我还通过Patreon 资助他，我们还有如Flattr之类的。我们还有一堆的其他想法——但是没有一个像网页间谍软件一样方便好用，因为它不需要用户直接掏钱。如果浏览器开始向网页间谍软件下重手，必要性可能会迫使这些选项中的一些成长起来。
总结
所以，我说的差不多了。很抱歉(一点都不抱歉)说了这么多，而且在最后连一张图都没有。
反正，对，有很多东西能让移动网页变烂。坏的CSS布局，臃肿的UI框架，等等。而且，对，浏览器能变得更好。他们正在变得更好。那些有趣的强大能力就在地平线上。
但是，我不禁要想，如果每个人都能给那些追踪行为和广告冰山瘦身，使之与实际内容的比例成比较理智的数量级，那么Web在总体上会变得更好。
PREV : 上世纪没有网络时记者怎么发图？
NEXT : 把车当烤箱，烹出10种美味食物