关于 Lara Hogan 的“设计性能”

我买了一本 Lara Hogan 的新书 设计性能 (亚马逊)，因为我最近对这个话题非常感兴趣。当我写这篇文章的时候，我刚完成了在 CSS-Tricks 和 CodePen 上进行的一些与性能相关的工作。

我想读一下这本书，学到更多知识，并获得更多 行动 的灵感。这里有一些精选的引言，以及它们与我一直在做、想要做和思考的事情之间的关系。

速度很重要

网页性能影响的不仅仅是电子商务网站；页面速度优化带来的改进适用于任何类型的网站。用户会回到速度更快的网站

我们只是 知道 网站需要快速，对吧？我喜欢一个古老的格言，网页性能是那些客户没有要求但所有客户都想要的特性之一。

一些最令人信服的关于网页性能工作效果的证据来自一些网站，这些网站在改进后销售额上升。我喜欢 Lara 指出速度对所有网站都有益，因为回头客和 SEO 排名都会上升，而且无论你想要使用哪些指标，流量总是你想要上升的指标之一。

更不用说，随着全球移动使用量的猛增，性能改进可能是人们能够使用你的网站 还是 不能使用以及使用效率如何之间的区别。

底线是，你优化网站的努力会影响你用户的整个体验，包括电池续航时间。

响应时间

用户点击链接或点击按钮...需要一些时间才能发生某些事情。人们对此有何感受？这很有道理

不到 100 毫秒的延迟对用户来说感觉是瞬间的，但 100 到 300 毫秒之间的延迟是可以感知的。300 到 1000 毫秒之间的延迟让用户感觉机器正在工作，但如果延迟超过 1000 毫秒，你的用户可能会开始在心理上切换上下文。

“心理上切换上下文”。这很可怕，不是吗？他们点击一个按钮。它需要稍微长一点的时间才能发生某些事情。“我今晚该做什么菜？”你可能已经失去他们了。

在我最近对 CSS-Tricks 的重新设计中，我注意到延迟（以及只有：focus 状态才会在点击链接时触发的令人讨厌的行为），因此我实现了 Fastclick。但请注意，这不是解决网站性能问题的答案，它只是在没有帮助解决此问题的浏览器中回收大量毫秒的免费方法。

谁负责？

即使你的职位名称不包含“设计师”一词，如果你正在对网站的外观和感觉做出决策，你就是在做出直接影响该网站性能的决策。性能是共同的责任，你的团队中的每个人都会影响它。

我想到 CodePen 的我们三个人。我正在做一些事情，比如优化图像，减少请求的大小和数量，以及通常用更少的资源做更多的事情。Alex 正在减少文件的大小，并关注 YSlow 和 PageSpeed 等工具及其建议。Tim 正在监视服务器，确保各种请求都能快速返回。每个人的职责对性能都至关重要。

后来，Lara 提醒我们要做导师。这是关于图像的，但它适用于任何东西

你可能不是网站上唯一创建和更新图像的人。可能还有其他设计师和开发人员需要了解这些技术…

持久连接

您的浏览器获取一些 JavaScript，然后使用此打开的连接获取字体文件，然后是图像，然后再需要建立另一个新连接来获取更多内容。

…

重要的是要查看加载页面需要多少个连接。如果你看到很多连接，那么你的内容可能分布在太多域名上…

我没有像我应该的那样经常考虑这一点。我记得在不太久远的日子里，将资产拆分到多个域名上（例如 assets1.site.com、assets2.site.com）被认为是一种最佳实践，以增加同时连接的数量，因为这些连接的数量受域名限制。这听起来似乎不再是一个好方案。

我相信将资产放在无 Cookie 子域名 CDN 上是一个好方案。在你使用它的根域名和这个之间，你可能没问题（不需要为了并行下载而添加额外的子域名）。

跟踪时间变化

…重要的是要跟踪你的页面权重随时间的变化，以确保在你的网站不断发展并添加更多内容或设计迭代时，不会出现任何重大且意外的变化。

我承认在这方面做得不好。我倾向于在短时间内专注于性能，在那里我会在一两周内把它当作一件大事，然后就忘记它了。然后，只有当它 开始成为一个问题 时，我才会重新审视它。

正在出现一些工具可以更轻松地管理此过程。查看 SpeedCurve 和 Calibre。Lara 在书中有一整张图表，显示了不同的工具以及在哪些时间点和间隔使用它们是有意义的。

关键渲染路径

当你的用户最初加载页面时，它将是空白的。空白空间是一个糟糕的用户体验；它让用户感觉什么也没发生。要解决此用户体验问题，你需要优化你的 关键渲染路径。

这是最好的表达方式。从空白到 至少有一些内容，这样观看你网站的人就知道正在发生某些事情。感知就是一切；毫秒很重要。

我对这个想法既着迷又毫无作为。

延迟 JavaScript 加载是（相当）容易的。把它放在页面底部。延迟非关键 CSS 很困难。你需要一个好的系统来声明关键 CSS。有一些工具可以为你找到关键 CSS，这很酷，但你只是把它放在头部并重复它在延迟样式表中吗？或者你是否以某种方式从延迟样式表中删除重复的部分以提高效率？或者，选择对布局和颜色等最重要的 类型 的 CSS，让其他 CSS 稍后出现，是否更明智？

我让一些小事阻碍了我尝试新事物。

疫情式增长

图像字节数在过去一年中 增长了 30% 以上，平均网页上如此。

网站权重增长的速度非常快。思考 为什么 会发生这种情况很有趣，但也许我们可以在下次再做。

…优化图像可以说是提高网站页面加载时间的最大捷径。

同意 - 而且它非常令人满意。我偶尔会这样做：下载整个网站上使用的所有图像，无论在哪里。将它们通过 ImageOptim 运行。推回实时。理想情况下，优化会在工作流程中完成，通常也是这样，但这可以确保整个网站偶尔会得到覆盖。

字体

自定义字体是我现在最爱恨交加的东西。我们已经把自己搞到这种地步，你几乎*必须*使用它们。网站没有它们看起来有点不对劲。然而，它们可能和图片一样大甚至更大，更难正确实现，加载速度也更慢。

我从来没有想过这本书里的小技巧

@media (min-width: 1000px) { 
  body {
    font-family: 'FontName', Fallback, sans-serif; 
  }
}

浏览器足够智能（需要引用）只加载它们知道要使用的字体，所以也许只在屏幕较大的情况下使用它们，因为在这种情况下你的性能可能更高。

所有资产也是如此

对于你的响应式网站，首先考虑你最小的屏幕尺寸。重新排序你的 CSS，优先提供小屏幕样式，并使用渐进增强在屏幕尺寸变大时添加内容和功能。

这里还有更多

请记住，我只是挑出了一些对我来说比较突出的部分。这里每个人都有适合他们的东西。

例如，这里有我读过的关于使用哪种图片格式以及可以调整哪些设置才能充分利用它们的最佳部分。这里有一些巧妙的东西，教你如何使用替代绘图技术完全避免使用图片。处理响应式网页设计可能需要额外的资产。甚至还有关于如何提高 HTML 和 CSS 的整体效率的内容。

我喜欢关于 95% 百分位数的部分。我猜你得买这本书才能阅读它。

(╭ರ_•́)