我最近在南卡罗来纳州的 希尔顿黑德健康 （一家减肥水疗中心） 度过了一周。 这次体验的一部分是课堂学习，内容涵盖许多不同的健康相关主题。 在听到所有这些内容的同时，我不禁想到了个人健康和网站健康之间的平行关系，尤其是关于网站性能。 也许看看这些相似之处是有用的，因为在照顾两者方面都有巨大的价值，有时一个好的比喻可以触发理解和行动。
减肥既简单又困难
减肥的唯一方法是燃烧的卡路里多于摄入的卡路里。 这个概念非常简单。 然而，正如我们大多数人所知，这极其困难。 也有一个让网站快速加载的真正方法，那就是不要在网站上添加太多内容以至于使其变慢。 这是一个非常简单的概念，但实际上并不容易。
在一天中，我们接触到的不健康饮食选择远远多于健康饮食选择。 不健康的选择通常更容易、更快、更便宜。
您也可能在围绕网站的组织中遇到这样的挑战。 会议中每个人都对首页需要添加什么有自己的意见。 业务需求决定了需要将什么放在哪里。 分析告诉您，戴着耳机的女人的巨型图片比单独的文本转换率更高。 虽然您可能会赢得一些战斗，但在“在网站上做更少”方面，在战争中很容易失去阵地。
在减肥时，您可能会进行节食。 实际上，这是一个关于您可以吃什么以及吃多少的计划。 这会引导您的选择。 网站等效项可能是 性能预算。 也许像这样简单的事情：在任何给定的页面上，您对 X 个总大小的请求有 X 个。 让这个概念在关于网站上什么东西放在哪里会议上有力量。
锻炼也有助于减肥，对吧？ 是的，有一点。 但它远没有你吃什么那么重要。 正如我们被告知的那样：“你不能与你吃的东西竞争。” 与此相关的锻炼的平行关系可能是服务器升级之类的事情。
我们需要我们的网站更快，所以我们不能只升级我们的服务器吗？ 我们的数据库人员不能只升级某些东西吗？ 这些事情可能有一点帮助，但你“无法与”你提供的东西“竞争”。 80% 的网站性能与前端相关，这与用户的计算机和互联网连接关系更大，而不是与您的服务器有关。
无意识地吃 / 无意识地创建
让健康饮食变得困难的部分原因是，我们大多数人没有花太多心思去想它。 我们只是做它。 我们没有多少计划，甚至在吃饭的时候也没有想过它。 更不用说我们受到环境的强烈影响了。 这本书是关于这个主题的推荐读物。
我怀疑大多数从事网站工作的人也没有过多关注性能。 他们知道他们不应该使用 2MB 的 JPG，但除此之外，并没有真正想过它。 这有一定道理。 许多网络工作者只有初级技能。 你不能用太多信息压倒一个初学者，让他们知道 HTML 和 CSS 的工作原理比知道 HTTP 请求的工作原理更重要。 也许初学者制作的网站是实时网站是不幸的，但我并不这么认为。 这就是网络的魅力所在。
无意识的创建是与无意识地吃平行的。 没有想过我们在建什么，我们只是做它。 我们只是完成工作。 用户没有向支持部门写信说网站很慢，因此没有任何票要处理，所以也没有任何事情需要解决。 但当然，需要做一些事情。 性能只是那些你必须做的事情之一，因为这对所有事情都有好处：参与度、转化率、一般的社区积善行德…
也许您不希望性能细节拖累高效的工作流程，或者让过度劳累的员工背负新的担忧。 这可以理解，但需要对性能进行一些检查和平衡。 某种让组织能够关注性能的方式。
数量与频率
HHH 的鲍勃·赖特讲了一个关于热狗的故事。 他喜欢棒球，每年至少会去看几场比赛。 棒球比赛和热狗密不可分。 热狗不健康，这已经不是什么秘密了，但鲍勃，通常是一个健康的人，每次在比赛中都会吃一个。 对于鲍勃来说，这是一个非常糟糕的选择吗？ 不。 一两个热狗在一个健康的生活中不会有什么不同。 问题不在于热狗，而在于热狗的数量和频率。 如果你每天吃三根热狗，那才是会要你命的。
一根辣椒热狗不会要你命。 每天三根辣椒热狗可能会。 一个很大的 JPG 不会破坏您的网站性能，但九个可能会。
就像不是热狗一样，也不是网站上的任何一个资源都会影响性能。 不是 jQuery，而是通过 18 个文件加载 400k 的 JavaScript。 不是 200k 的 JPG，而是带有 25 个 200k JPG 的滑块。
细枝末节
你不是在特氟龙锅里做双层芝士汉堡吧？！！ 特氟龙对你的健康非常有害！！
这是只见树木不见森林的情况。 有 一些证据 表明特氟龙可能很糟糕，但它并没有特别有说服力，很难做到（需要达到 650°F），而且可能不是什么大不了的事情。 然而，双层芝士汉堡肯定对你的健康有害。
这就像在没有优化图像或将可以一起合并的图像一起合并的情况下，争论加载 JavaScript 库。
这就像在没有将 JavaScript 作为压缩文件提供的情况下，争论===比==快，或者++i比i++快。
虽然你可能是正确的，说这个小的改变会更快，但花时间研究、讨论和进行这些改变，不如花时间进行 更容易的改变，这些改变可以使性能提高几个数量级。
有时这些小的性能调整被称为微优化，我认为这是一个很好的名字。 最适合库、框架的创建者以及从事计算密集型网站的人。
食品包装和广告中存在大量胡说八道。 你知道翠西现在很健康吗？
全谷物？！ 再给我一碗！
幸运的是，与之相比，网络行业相当诚实。 我没有看到网络托管公司经常宣传他们比彼此快多少，因为这是一个他们几乎无法保证的声明，因为它过于依赖您使用该托管的方式。
越来越大
也许您已经看到了这张地图，它绘制了 1985 年至 2008 年（仅 23 年）美国人口中肥胖人口的百分比。
它从美国大多数州的肥胖人口不到 10% 变成了大多数州的肥胖人口超过 25%，有些州超过 30%。 成长相当惊人！ 它还在继续，四年后的 2012 年，全国 他们说 超过 1/3（35.7%）的美国成年人是肥胖的。 据 预计 到 2030 年，这一数字将达到 44%。
以下是一些更令人震惊的数字
- 肥胖成年人的年度医疗费用高出 1,429 美元。
- 超过三分之二（68.8%）的成年人被认为超重或肥胖。
- 77% 的成年人每天摄入的水果和蔬菜不到 5 份。
- 在全球范围内，超重成年人超过 10 亿。
我敢打赌你已经知道我要说什么了。
网站也变得越来越大。这可能并不令人惊讶，但你可能会惊讶于增长速度远高于这些与重量相关的数字。Tammy Everts 在 这里 详细介绍了这一趋势。
来自 HTTP Archive 的数据显示，从 2010 年 11 月到 2013 年 5 月，网站的平均总大小几乎翻了一番。并且在这段时间内，增长速度翻了一番多。如果这种趋势持续下去，目前平均网站大小为 1.34MB，一年后将增加到 2.68MB。
公平地说，尽管有这种增长，有证据表明 网页加载时间实际上已经有所改善。这是来自 Google 的数据，Google 收集了这些数据，并提供了 非常快 和 非常慢 的互联网选项，所以你可以随意选择。另外要注意，这里的指标是“页面加载时间”，其中浏览器本身的优化起着重要作用。但这也有一个硬性限制，因为浏览器最终需要资源才能完成任何操作。
互联网速度显然是这里的一个主要因素。如果互联网速度随着网站体积的增长而翻倍，我们可能没问题，但轻度研究表明，互联网速度的年增长率 接近 50%。
这仅仅是平均值。决策不能完全基于平均值。对于许多使用慢速互联网或按千字节付费的用户来说，2.68MB 的网站是不可接受的。更快的网站加载速度将永远很重要，更小的总大小将始终有助于实现这一目标。
有些事情就是不好，就这么简单。
一个小的公共卫生胜利是反式脂肪。每个人都知道它们是什么，每个人都知道它们不好。即使是基本上生产垃圾食品的公司也已采取措施将其从生产的食物中去除。反式脂肪就是不好，就这么简单。你应该吃零反式脂肪。
有一些与性能相关的方面也是不好的，就这么简单。不压缩 HTML 和文本资源就是不好。不优化图像就是不好。在可以的情况下不合并资源就是不好。不利用简单的缓存解决方案，无论是前端还是后端，都是不好的。
不明智 || 更好 || 最佳
即使是训练有素的营养师也很难判断餐厅食物的营养价值。仅仅通过查看菜单（甚至已准备好的菜肴）来了解情况太难了。我们这些普通人如何在餐厅做出明智的决定？你可能无法猜测特定菜肴的卡路里、饱和脂肪和钠含量，但你可能能够正确地猜测哪一道菜更健康。烤鸡肉沙拉比牛排三明治更健康吗？是的。
在这种情况下，牛排三明治是一个不明智的选择。如果你在菜单上看到烤鸡肉三明治，那可能是一个更好的选择。烤鸡肉沙拉可能是最佳选择。这很明显，但用这种方式思考可以帮助你做出决定。
在进行日常的网络任务时，我们可能能够应用相同的思维方式。假设你需要在网站上的页面中添加一个新的插图。它以 2MB JPG 的格式提供给你。直接将其放在页面上将是不明智的。你可以将其缩小吗？你可以优化它吗？这些都是明智的选择。它看起来像 SVG 吗？它是纯色吗？它可以集成到您正在使用的 @font-face 字体中吗？你可以使用响应式图片解决方案吗？如果可能的话，这些将是最佳解决方案。
你不总是需要做出最佳决定。我们都知道过完美的生活太难了。但是，如果你能够通过简单的比较，并朝着明智的方向发展，做出更好的决定，你将过得更好。
还有更多联系吗？
我敢肯定你们可以提出更多有趣的人身健康-网站健康的联系。什么代表坏胆固醇和好胆固醇？有与时尚饮食等效的东西吗？
另外，仅仅为了好玩，我最近重新创建了 HTML 和 CSS 中的营养成分标签。然后我将其分叉并制作了一个调侃的性能数据版本。
查看 Chris Coyier (@chriscoyier) 在 CodePen 上的 性能数据。
当然，这仅仅是为了好玩，但这也许可以让你开始思考网站的性能并开始制定性能预算。
Chris，有趣的文章！我认为你找到了一种通过类似的视角来联系和理解这些主题的方法，这很棒。更重要的是，你很好地概述了这些联系。你显然是一个“积极思考者”（之前也是这样）。
我唯一想改变的是，只要是草饲（牧场饲养）、不含面包，并配上一些蔬菜，我就不会讨厌双层芝士汉堡。但这只是我个人的想法。;
或者… 变成一个单层芝士汉堡。
作为一个住在美国边境几分钟以内的人，我可以说，在北纬 49 度以南，无论是菜肴的份量还是调味料都有明显的差异。食物更大，餐厅添加了更多的调味料。一旦你的味蕾过度饱和，可能需要一年的时间吃所谓“清淡”的食物才能欣赏各种水果和蔬菜的微妙味道！
我认为这正是我们在网络上所做的。人们觉得仅仅依靠内容不舒服。当利益相关者看到大量空白时，他们会感到被骗了。像 thegreatdiscontent 这样的网站做得很好，它们只让内容闪耀。当我们读书时，我们会被内容所吸引。我希望这种让内容闪耀的趋势能够持续下去。
你可能可以写一整篇文章来讨论不同类型的芝士汉堡和不同类型的网站！
是的，Jesse，我同意，这里肯定有联系。我最近去了迪拜的阿联酋举行的网页设计大会，它恰好说明了这一点，他们称之为“网站疲劳”。
虽然他们说，随着人们使用手机和平板电脑，这应该让他们更加“活跃”……我不确定他们是否指的是人们边走边浏览网页等等。
但无论如何，这篇文章很棒。
Chris，很棒的文章。我喜欢你提出的一些发人深省的类比！
关于一个稍微相关的话题，我经常发现自己将平面/网页设计这一职业与厨师、厨房或一般的烹饪联系起来。（例如，更少的配料->少即是多/扁平化设计，厨房里太多厨师->由委员会设计，以及我现在想不起来的其他的）。
非常有趣的观点。然而，在我的工作环境中，我们必须尽快以尽可能低的成本部署许多网站。通常没有空间进行优化。如果有空间，我们的客户也不理解优化的作用。毕竟，网站能正常运行，对吧？
我个人对性能几乎痴迷（我是 == 或 === 类型的家伙）。在服务器端语言中，你经常执行很多任务（数据库调用、解析文件等），性能也是一个大问题。在工作中，我们主要使用 WordPress 作为我们的网站，就像许多其他 CMS 一样，它会执行许多你并不总是需要的后台任务，并且需要大量资源。有时，你只能处理你拥有的东西。
无论如何，我都会尝试在我的工作流程中实施/偷偷摸摸地进行优化。我们应该处理胖子（没有冒犯的意思）。现在我只需要找到一种方法来避免自己超重。我在说话的时候感到很饿。最好去拿薯片水果。
很棒的文章，我非常喜欢“让我们做一些简单的事情来让我们的网站更快”，并开始实施这些做法，并尝试在我的网站中保持这些做法。
我最近一直在读 “为什么我们变胖以及如何解决”，显然，这种“常识”可能是导致我们越来越超重的因素之一。“卡路里摄入和卡路里消耗”的解释可能过于简单，我们吃什么比我们吃多少重要得多。
我只是想分享一下，因为你似乎和我一样，都在寻找一种更健康、更可持续的生活方式。
完全同意。认为食物===能量（卡路里）是一种非常西方的态度。
在亚洲的许多地方，他们是这样看待食物的：食物 ~= 健康。
由于食物（总体而言）被视为有助于（并维持）你的健康，因此人们会注意食物除了卡路里之外的其他属性。一旦你将食物视为能量，而不是生物信息，你的思维方式就会只关注一个很小的方面。
人体是一个极其复杂的系统，由数百种不同的生物系统组成，它们能够同步工作、交流和自我修复。即使是凝血（和停止凝血）的能力，也是一个极其复杂的相互依赖的过程的级联反应。
网站也类似，虽然复杂程度要低得多……但网站工作者必须教育世界上的内容管理员，以保持网站的良好状态。
这是一个完美的比喻。很棒的文章！
我不想做那个“那个家伙”，但这篇文章与你最近的一篇文章有点冲突，你在那篇文章中推动在 Vanilla Js 可以胜任的情况下使用 Jquery。抱歉。
我哪里与那篇文章冲突了？我完全理解“为什么在只需要隐藏和显示某些东西的时候使用 jQuery”，或者类似的论点。但我一直对它嗤之以鼻。生产网站永远不会那么简单，演示网站也不重要，所以，是的，使用 jQuery。
事实上，在这篇文章中，我实际上写道
我基本上是在说，继续使用 JS 库吧，还有更重要的事情要处理。
我很喜欢这篇文章，Chris，它是一个优雅且相关的比喻。
Cat，我有点困惑，jQuery 和 vanilla JS 的使用有什么关系？Chris 似乎是在这里主张简洁胜于复杂。
Chris，另外，纽约时报发布的 7 分钟锻炼对我在家工作期间保持苗条非常有效。
卡路里不是卡路里，你可以吃 3000 卡路里的甜甜圈和 3000 卡路里的香蕉，什么会导致你发胖呢？
看看《肥胖、生病和几乎死亡》。太多意见，不够事实，我说。
酷，请随意添加一些内容来参与讨论！
这里散落着很多不错的技巧/提醒，就像小块的羽衣甘蓝一样；）
营养面板太搞笑了，它会是一个很棒的书签/扩展程序。就像 YSlow 一样。
是的，我觉得我闻到了插件正在烹饪的味道！
嘿，Chris,
恭喜你开始迈出健康生活的步伐。这是一个完美的优化示例，优化在正确的级别上。当然，你可以在过去的一周里优化 css-tricks 而不是照顾自己，但这将带来更糟糕的投资回报率。更健康的生活可以延长你的寿命，而重构代码以移除一个 JavaScript 库，并不会带来如此大的改变。
保持正念。
谢谢！关于个人健康状况的投资回报率更高这一点，你说得很好——你可以利用额外的寿命来修复更多网站：）。
文章写得真棒！
我和妻子一起读了这篇文章，我们都很喜欢！关于健康饮食/减肥的标题非常简单，而且很难做到，这是真的。我希望你在南卡罗来纳州度过了一周愉快而改变人生的时光。
旁注：我的妻子喜欢阅读有关健康和健康饮食的文章，她想分享她在 Facebook 上看到的一件有趣的 T 恤。
链接到 Facebook 上的 Naked Food Magazine 的有趣 T 恤
一切顺利！
这是我最近一直在注意的事情。很长一段时间以来，一直被灌输到网络开发者脑海里的观念是，所有东西都需要优化，并且网站应该为目标受众中最慢的性能水平而构建。
在过去的几年里，就像一个开关被翻转了一样。这些都不重要了。我不知道 4G 的出现是否导致了这种情况，或者是一批新的学生毕业后专注于平面设计，并且拥有快速连接来进行测试，但不知何故，所有网站现在都充满了巨大的图片和大量的花哨 JavaScript，这些代码只对互联网用户中的很小一部分人群有效。即使是微不足道的事情——比如优先加载 JavaScript 并使用嵌入式字体，导致文本在所有其他内容之后出现——也足以让人发疯。
我知道版主过滤器会将这条评论提交审查。但我不得不说。
这就是我他妈的喜欢这个网站的原因。很高兴看到对其他机械计算的感性表达。
我不想吹毛求疵，但虽然饮食对于减肥来说远比运动重要，但运动对于整体的肌肉/器官/肌腱/心血管等健康来说绝对是必不可少的。不过这个比喻非常有效；文章写得很好：）
Chris,
感谢分享！因为我是网页设计的新手，所以我不会评论这个比喻的网页设计部分（除了说，我正在倾听和学习……），但我将评论饮食/食物/锻炼/生活选择，因为我在这些方面有丰富的经验（谁没有呢？）。
IMO 锻炼与饮食一样重要。如果你能找到一项你喜欢做的活动或运动，那么参与其中可能会改变你的生活。
我们大多数人整天都坐在办公桌前或电脑前，大部分时间都没有活动身体。这不是好事，很明显。
对我来说，没有什么比骑上我的自行车（自行车）去和一群朋友一起骑 20-50-100 英里的路程（相信我，你可以慢慢练到）更令人愉快了，或者只是骑自行车上下班。你会燃烧卡路里。你会喜欢你的身体对剧烈运动的反应。你会睡得更好（因为你身体很累）。你自然而然地会选择健康的食物来为你的身体提供能量。而且，你可以在偶尔的情况下奖励自己吃奶酪汉堡和啤酒、冰淇淋和饼干，而不会感到内疚，也不会增加体重。
如果没有骑自行车，那么也许你可以试试远足、足球、极限飞盘或跑步？？也许你可以试试，看看你喜欢什么，并认识很多喜欢同样事物的人。
祝你好运，兄弟。
MC（以前是糟糕的食客、超重吸烟者和久坐不动的人）
我想知道是什么“其他”类别正在赶超脚本，导致网页重量图表中脚本的增加。我只能想到网络字体。
非常有趣而且真实。我认为归根结底是简洁，而简洁在我们的个人生活中或在我们创作的事物中都非常难以实现。为了达到简洁，请从删除不必要的东西开始，这样必要的东西就可以说话和努力。
有趣的文章。但你知道当你参加健康培训，并且总是最终寻找健康和网页设计之间的平行关系时，这有点……怎么说呢，太专注了。
在瑞士，我们称之为“职业变形”。
你完全说对了！非常有趣的对比。
很高兴你正在为你的体重做些事情，Chris。我今年有幸见到了你；接下来你应该谈谈你有多么粗鲁。在贬低别人之前，先照照镜子看看自己。
这篇文章让我想起了一个名为 浏览器饮食 的网站，它分享了很多优化技巧。
我一直使用 HeadJS 加载器来并行加载脚本（因此在使用前端框架时，我完全有罪地加载了 6-12 个不同的 .js 文件），我认为它工作得很好。我将尝试对我的下一个项目进行一些基准测试，看看如何进一步改进。Chris，好文章！
美国正在走向彻底的衰败。一切的终结即将到来。崇拜你的角斗士和巨无霸。你们地球人一直走在自我毁灭的道路上。做善事者，感觉良好者。从地狱而来，必将回归地狱。只有黑暗，永恒而空虚。灵魂呼唤着改变，但在羊群震耳欲聋的喧嚣声中消亡了。咩咩叫的绵羊，记住 12。血神已经被召唤。让折磨开始吧。
非常聪明；我觉得我直接在听你说话，Chris，感觉像是谈话：）。
感谢你的笔记，你分享的一切总是指引我走向正确道路。
这就是为什么我们有 compass、ucss 以及许多其他工具来帮助我们尽可能地缩减网站规模。我一直专注于创建非常轻量级的网站，但使用所有可用的优化方法简直是**难以置信地困难**。对于 Javascript 来说尤其如此，它拥有无限数量的技巧和奇怪的东西可以缩减代码（通常会降低可读性），但大多数人并不知道这些东西，所以他们只有在阅读了 CSS Tricks 上的技巧之后才会使用它们。
虽然最好的做法是从一个干净的模板开始，而不包含任何这些库。人们认为将 jQuery（不重要）和 Modernizr（有点重要）作为基本的 html5 模板包含进来，这表明我们现在在这方面存在严重问题。
我喜欢这篇文章。我完全能理解这两个主题。我已经多次改变体重，并且构建了许多健康和不健康的网站。我目前正在从膝盖受伤和手腕手术中恢复，我的身体一直都在恢复，不再是一个网络混蛋！:)
Chris，你总是能提出不同的想法和很棒的东西。我们喜欢这些信息。
另外，我想补充一点，更快的代谢是减肥最快的方法之一。这就是为什么锻炼是其中一个重要的环节，因为一个人肌肉越多，他们的代谢就越快。他们的代谢越快，他们燃烧的卡路里就越多。
也许代谢可以类比于连接速度？越快越好。
哈哈，这篇文章真是太棒了！我不知道每天三根热狗会要了我的命。
我真的很喜欢这个想法和使用的例子。
我真的很喜欢 HTML/CSS 的营养成分表。
现在该轮到我玩得开心了：)
我喜欢这篇文章。非常感谢你。
我喜欢营养面板图。我可能要…[清清嗓子]…借用它…来解释一些事情给人们。
不错的博客 Chris。我喜欢你把健康之旅和网站的健康状况联系在一起。这将帮助许多开发人员说服内容编辑人员为什么优化很重要。谢谢。