最近,有一篇文章正在疯传。
它是上个月,Maciej Ceglowski在澳大利亚的一次演讲,名为《网站的肥胖症危机》(文本,视频),反思了互联网开发的现状。
该文非常值得一读,Hacker News排行榜高居榜首,得到了1000多人的推荐。
下面就是我的中文节译版。
===============================
网站的肥胖症危机(节译版)
作者:Maciej Ceglowski
译者:阮一峰
原文网址:The Website Obesity Crisis
1.
大多数网站的主要内容是文本,更准确地说,是简短的文本。
文本本身并不大,但是展示它们的网页,正变得越来越大。Twitter展示单条评论(140个字符)的页面,超过900KB。Medium的一篇文章大约400个词,页面大小是1.2MB。
如果这种趋势持续下去,2020年,网页的体积平均将超过5MB,比一本俄罗斯长篇小说还大。比如,陀思妥耶夫斯基的《罪与罚》,文本压缩后不到800KB。
TechTimes.com有一篇报道,介绍Google正在为大网页做标记。但是,这篇报道的网页,体积为18MB,外加一个3MB的视频。
2015年5月,Facebook引入了"Instant Articles",帮助用户快速浏览新闻。但是,介绍这个功能的页面,体积为6.8MB,外加一个41MB的视频。你想了解这个功能的细节,唯一的方法就是去看这个视频。
2.
网页真的有必要这么大吗?明明200KB就足够,为什么要做成2MB?
因为我们要往里面塞很多不需要的东西:广告、高清图片、视频、用户追踪系统、社交媒体的代码......你不塞,公司就可能解雇你。
如今的时代,你跟雇主说,想做一张体积只有几百KB的网页,就好像跟SUV车主谈论省油的经济型轿车。
有人会说,这是免费内容的代价。但是,我想问,谁会从海量的互联网广告获利?广告主,还是消费者?真正获得暴利的是网络服务提供商和互联网广告公司,其他人都付出了巨大的成本。
3.
我们都忘了健康的网页,应该是什么样子。
- 值得阅读的文本,配上结构良好的标签。
- 适度的图片和视觉设计。
- 一层CSS
- 少量的JavaScript,只在必需时使用
但是,2015年真实的网页,却是下面这样。
- 一层HTML
- 一大堆垃圾
- 顶部还有一层监控代码
4.
宽带和光纤上网并不解决问题,实际上还鼓励了人们往网页上添加更多的东西。
为了平衡网页体积,工程师想出了很多方法:首屏快速渲染、压缩文件、异步加载、批量HTTP请求、管道发送等等......
网站开发越来越依赖代码精简、压缩、缓存、服务器配置这些中间步骤,这使得找出错误越来越困难,成本越来越高。
5.
复杂性让聪明人上瘾。
即使我们知道复杂不是好事,但难以抵抗。复杂的东西总是显得很酷,让人情不自禁想继续干下去。
大多数网站都过度复杂了。
我们做的每件事,都使得创造网站或编辑网页变得困难。把一篇文章放上网,正在变得需要一个专家团队才能完成。
新手越来越难通过源码学习。我们抽走了人们学习互联网的梯子。
6.
其实只需要两步,就可以大大缩小网页体积,提高性能。
第一步,确保最重要的内容,首先下载和渲染;
第二步,就此结束。
你不需要那些多余的垃圾,对最简主义保持信心就行。
7.
让我们保持互联网是一个超链接构成的媒体,不要把它变成另一种东西。
(完)
zacker 说:
很诙谐,博主的页面广告也很多了
2016年1月 3日 19:19 | # | 引用
c4605 说:
提的建议很好,举的例子和文中的一些逻辑让我觉得摸不着头脑
网页正在向着越来越丰富的方向发展,我写一个 Web 应用的前端可能需要引入 1~2M 的依赖,这些东西能够让用户的体验得到提升,让实际的代码更加简单,让整个网页变得更有趣/好用/好看
网页们很多时候确实值得变得越来越大,“Twitter展示单条评论(140个字符)的页面,超过900KB。Medium的一篇文章大约400个词,页面大小是1.2MB。”正是这些增加了的大小让 Twitter 的网页版变得更加好用,正是这些增加了的大小让 Medium 变得更加好看(https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9#.fdjfeh2a5)。
2016年1月 3日 22:05 | # | 引用
匿名 说:
wordpress就是很好的反面例子
2016年1月 3日 22:33 | # | 引用
linchen 说:
王垠的博客,最简主义的典范
2016年1月 3日 23:13 | # | 引用
ArchiTech 说:
如果只是个人做博客用,wordpress确实已经不太适合了。
2016年1月 4日 07:59 | # | 引用
mox 说:
形式也是内容的一方面,其实主要是原创内容太少,广告太多,统计代码太慢。
2016年1月 4日 08:36 | # | 引用
jqk6 说:
的确如此,很多人都非常喜欢阮一峰博客,可能简约的页面就是原因之一吧。
2016年1月 4日 09:09 | # | 引用
William 说:
这点很好
2016年1月 4日 09:33 | # | 引用
LJ 说:
原作者网站甚至无法在Safari里面转为阅读模式……感觉轻量化到了另一个极端。我觉得最低也要保持响应式布局,这个之外的一些东西可以适当省略。
2016年1月 4日 11:41 | # | 引用
石樱灯笼 说:
这篇文章看来受众只能是国外网站了。国内多数网站不仅包含着一堆垃圾代码,还包含着一堆垃圾功能(新浪、金山之流),运营商也恨不得能在链路上多插入点广告代码。开发者早已身不由己,听天由……垃圾maker
2016年1月 4日 11:51 | # | 引用
Min 说:
行文诙谐,观点明确。赞!
2016年1月 4日 12:40 | # | 引用
gethin 说:
大部分是框架依赖吧。去掉是能减少很多体积。但是开发成本会倍增的把
2016年1月 4日 13:38 | # | 引用
192.168.1.1 说:
现在的网页体积的确是越来越大,已经没有当初哪种简洁了。
2016年1月 4日 16:38 | # | 引用
瑾瑜 说:
所以一直坚持博客体积极小化。
2016年1月 4日 19:31 | # | 引用
小麻雀 说:
越简单,越幸福。
2016年1月 4日 20:41 | # | 引用
Cesc 说:
言之有理
2016年1月 4日 21:39 | # | 引用
夏雨 说:
此页面429.3KB
2016年1月 5日 13:52 | # | 引用
罗鹏 说:
又给程序员提出了一个好问题,哈哈。个人认为技术类的网页确实需要保持简洁,但有些类型的网站没法简单。
2016年1月 5日 16:18 | # | 引用
凯奇 说:
先有复杂的能力,再讨论简单的问题,复杂不一定就代表一定是冗余的无用的,体积小的好处究竟有多少呢。新手要学习复杂,高手要学习简单。
2016年1月 6日 10:02 | # | 引用
tangsty 说:
赞个先,亲测也就是455KB。控制的很好
2016年1月 6日 13:18 | # | 引用
guoguofish 说:
这明显是一种理想呀
2016年1月 7日 11:12 | # | 引用
moc 说:
简单实用才是硬道理!
2016年1月 7日 18:20 | # | 引用
王嘉 说:
随着互联网的发展,网站已经不是刚出现时候仅仅展示信息了。作为载体,内容日趋丰富,需求也日益增多。现在这样,也是互联网发展的产物。
2016年1月10日 20:46 | # | 引用
lookas2001 说:
我只想说,这是发展趋势。
为什么?
因为大家都在使用,谁愿意一个用表格搭建的网站?
为什么臃肿?
因为多人开发!多人开发!
不过,这篇文章也是有一点启示的。
2016年1月11日 01:12 | # | 引用
克浩 说:
如果一个简单的网页,除了传达内容之外没有任何其他诉求时,自然就简单了。
网页本什的体量和网页所附加的价值诉求成正比的,准确的说是和起附加功能数量成正比的。对这部分原因引起的臃肿到是正常(当然功能数量上又是一个可优化的问题)。如果将附加价值这层东西剥离,还是很臃肿,我们就需要回原到设计、结构、技术层面去寻找问题,然后还需要一个开发之上的东西去解决这个问题。
2016年1月11日 11:20 | # | 引用
Tony 说:
现在还看到有人为移动流量近年来变得更加实惠而辩护的,根本没考虑当年的10元100MB和现在的10元300MB看到的是完全不同的两个互联网。
2016年1月11日 23:25 | # | 引用
SG 说:
这个就像是环保话题,大家都认为应该保护环境,但是出于经济考虑还是会放纵对环境的破坏。
2016年1月19日 10:31 | # | 引用
国风记录 说:
一切以目的为导向,在能实现目的的情况下 简洁肯定不复杂好。
2016年1月22日 12:15 | # | 引用
可少 说:
这话撂到客户端软件也是一个道理,
可写一篇《软件的肥胖症危机》
以前的软件多大点?几kb的程序可以做个小游戏!
现在的多大,动不动就几G甚至上10G!!!各种库各种依赖。
但是,我想问,谁会从中获利?软件开发商,还是消费者?真正获得暴利的是硬件提供商!他们逼着你升级cpu,加大内存,购买更大容量的硬盘,其他人都付出了巨大的成本。
但你不觉得可笑么?
2016年1月23日 10:04 | # | 引用
fishenal 说:
博主对前端框架有什么看法,按本文的意思,简简单单的页面其实很好实现,spa也可以之用jquery实现,但现实情况很多项目引入了各种各样的框架,工具,数据交互这一层也是,让页面变的很大,这是不是一种不太健康的情况。
2016年1月25日 17:58 | # | 引用
Luo 说:
做webgl网站,一个模型就是几M...
2016年1月26日 18:32 | # | 引用
coffee花生 说:
这样的博客才是我需要的,没有繁琐的注册步骤,也没有繁琐繁琐的发言流程。
2016年2月 2日 17:17 | # | 引用
viperchaos 说:
其实这对前端开发者是好事,复杂的前端代码才能让前端程序员有更多的溢价,更多更复杂的前端技术也是
2016年2月 4日 16:32 | # | 引用
Sonic853 说:
让我找回了简洁的网页时代!(包括您的博客)
2016年2月19日 06:36 | # | 引用
火腿 说:
最后一句说得很好.
2016年2月20日 22:10 | # | 引用
mrx 说:
网站向网络应用的方向发展,页面逻辑和复杂性自然会增加
不过,我还是喜欢简洁的页面,因为我不想费力去发掘网站的隐藏应用
2016年3月19日 22:22 | # | 引用
书痕 说:
少用框架,少引用别人现成的东西——自己学习实现方法后针对页面写就行了
2016年4月29日 16:39 | # | 引用
Kimihiro 说:
看完之后看了一下本页大小81.7KB,加载时间1.64S
2016年6月28日 10:44 | # | 引用
黑樱耀翼 说:
即使网站肥胖了,新手并不会难学,只是入门学习的时间长度比起前辈们的入门时间要长得多。越复杂,就越可能模块化,而日常工作中,叫分工,所以如果面对复杂系统,纵观全局,想理解这系统,自然会被吓到。
2016年11月12日 21:31 | # | 引用
Mazey 说:
老板只看重开发速度和效果啊!
2017年6月27日 08:56 | # | 引用
星尘 说:
很喜欢您的博客,阮老师。
2017年11月15日 15:59 | # | 引用