分类

网站的肥胖症危机

作者: 阮一峰

日期: 2016年1月 3日

珠峰培训

最近,有一篇文章正在疯传。

它是上个月,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.

让我们保持互联网是一个超链接构成的媒体,不要把它变成另一种东西。

(完)

一灯学堂

留言(41条)

很诙谐,博主的页面广告也很多了

提的建议很好,举的例子和文中的一些逻辑让我觉得摸不着头脑

网页正在向着越来越丰富的方向发展,我写一个 Web 应用的前端可能需要引入 1~2M 的依赖,这些东西能够让用户的体验得到提升,让实际的代码更加简单,让整个网页变得更有趣/好用/好看

网页们很多时候确实值得变得越来越大,“Twitter展示单条评论(140个字符)的页面,超过900KB。Medium的一篇文章大约400个词,页面大小是1.2MB。”正是这些增加了的大小让 Twitter 的网页版变得更加好用,正是这些增加了的大小让 Medium 变得更加好看(https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9#.fdjfeh2a5)。

wordpress就是很好的反面例子

王垠的博客,最简主义的典范

引用匿名的发言:

wordpress就是很好的反面例子

如果只是个人做博客用,wordpress确实已经不太适合了。

形式也是内容的一方面,其实主要是原创内容太少,广告太多,统计代码太慢。

的确如此,很多人都非常喜欢阮一峰博客,可能简约的页面就是原因之一吧。

第一步,确保最重要的内容,首先下载和渲染;
第二步,就此结束。

这点很好

原作者网站甚至无法在Safari里面转为阅读模式……感觉轻量化到了另一个极端。我觉得最低也要保持响应式布局,这个之外的一些东西可以适当省略。

这篇文章看来受众只能是国外网站了。国内多数网站不仅包含着一堆垃圾代码,还包含着一堆垃圾功能(新浪、金山之流),运营商也恨不得能在链路上多插入点广告代码。开发者早已身不由己,听天由……垃圾maker

行文诙谐,观点明确。赞!

大部分是框架依赖吧。去掉是能减少很多体积。但是开发成本会倍增的把

现在的网页体积的确是越来越大,已经没有当初哪种简洁了。

所以一直坚持博客体积极小化。

越简单,越幸福。

言之有理

此页面429.3KB

又给程序员提出了一个好问题,哈哈。个人认为技术类的网页确实需要保持简洁,但有些类型的网站没法简单。

先有复杂的能力,再讨论简单的问题,复杂不一定就代表一定是冗余的无用的,体积小的好处究竟有多少呢。新手要学习复杂,高手要学习简单。

引用夏雨的发言:

此页面429.3KB

赞个先,亲测也就是455KB。控制的很好

这明显是一种理想呀

简单实用才是硬道理!

随着互联网的发展,网站已经不是刚出现时候仅仅展示信息了。作为载体,内容日趋丰富,需求也日益增多。现在这样,也是互联网发展的产物。

我只想说,这是发展趋势。
为什么?
因为大家都在使用,谁愿意一个用表格搭建的网站?
为什么臃肿?
因为多人开发!多人开发!
不过,这篇文章也是有一点启示的。

如果一个简单的网页,除了传达内容之外没有任何其他诉求时,自然就简单了。

网页本什的体量和网页所附加的价值诉求成正比的,准确的说是和起附加功能数量成正比的。对这部分原因引起的臃肿到是正常(当然功能数量上又是一个可优化的问题)。如果将附加价值这层东西剥离,还是很臃肿,我们就需要回原到设计、结构、技术层面去寻找问题,然后还需要一个开发之上的东西去解决这个问题。

现在还看到有人为移动流量近年来变得更加实惠而辩护的,根本没考虑当年的10元100MB和现在的10元300MB看到的是完全不同的两个互联网。

这个就像是环保话题,大家都认为应该保护环境,但是出于经济考虑还是会放纵对环境的破坏。

一切以目的为导向,在能实现目的的情况下 简洁肯定不复杂好。

这话撂到客户端软件也是一个道理,
可写一篇《软件的肥胖症危机》
以前的软件多大点?几kb的程序可以做个小游戏!
现在的多大,动不动就几G甚至上10G!!!各种库各种依赖。
但是,我想问,谁会从中获利?软件开发商,还是消费者?真正获得暴利的是硬件提供商!他们逼着你升级cpu,加大内存,购买更大容量的硬盘,其他人都付出了巨大的成本。

但你不觉得可笑么?

博主对前端框架有什么看法,按本文的意思,简简单单的页面其实很好实现,spa也可以之用jquery实现,但现实情况很多项目引入了各种各样的框架,工具,数据交互这一层也是,让页面变的很大,这是不是一种不太健康的情况。

做webgl网站,一个模型就是几M...

这样的博客才是我需要的,没有繁琐的注册步骤,也没有繁琐繁琐的发言流程。

其实这对前端开发者是好事,复杂的前端代码才能让前端程序员有更多的溢价,更多更复杂的前端技术也是

让我找回了简洁的网页时代!(包括您的博客)

引用凯奇的发言:

先有复杂的能力,再讨论简单的问题,复杂不一定就代表一定是冗余的无用的,体积小的好处究竟有多少呢。新手要学习复杂,高手要学习简单。

最后一句说得很好.

网站向网络应用的方向发展,页面逻辑和复杂性自然会增加
不过,我还是喜欢简洁的页面,因为我不想费力去发掘网站的隐藏应用

少用框架,少引用别人现成的东西——自己学习实现方法后针对页面写就行了

看完之后看了一下本页大小81.7KB,加载时间1.64S

即使网站肥胖了,新手并不会难学,只是入门学习的时间长度比起前辈们的入门时间要长得多。越复杂,就越可能模块化,而日常工作中,叫分工,所以如果面对复杂系统,纵观全局,想理解这系统,自然会被吓到。

老板只看重开发速度和效果啊!

很喜欢您的博客,阮老师。

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接