网站的肥胖症危机_html/css_WEB-ITnose
最近,有一篇文章正在疯传。
它是上个月,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.
让我们保持互联网是一个超链接构成的媒体,不要把它变成另一种东西。
(完)

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

本文讨论了< iframe>将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。
