All Things Smashing：每月更新

已发表: 2022-03-10

快速总结 ↬ 经历了这么多事情，我们的使命是帮助您掌握最新动态。当然，您可以在 Twitter、Facebook、LinkedIn 上关注我们并订阅我们的 RSS 提要，但是很高兴在一个地方对最重要的事情进行概览。

我们无法重复足够多的 Web 性能社区是多么美妙！有一些好人帮助使网络更快，他们的努力确实很重要。随着新的一年的到来，每个人的决心仍在接受考验，重现错误和修复问题等个人目标突然成为我们所有人的共同点：为所有相关人员改善网络。

随着这些年来各个性能领域变得越来越复杂和复杂，Vitaly 每年都会完善和更新他的前端性能清单。本指南几乎涵盖了从性能预算到单页应用程序再到网络优化的所有内容。在过去的几年里，它被证明对人们非常有用——任何人都可以编辑它（PDF、MS Word Doc 和 Apple Pages）并根据自己的个人需求进行调整，甚至可以将其用于他们的组织。

现在，事不宜迟，让我们看看 Smashing 都在做什么！

激动人心的时代：新的粉碎书

即将出版的名为“道德设计手册”的 Smashing Book 的封面你准备好下一本 Smashing 书了吗？好吧，就像我们出版的所有印刷书籍一样，每一本书都经过精心设计，以提供业内专家和从业者共享的深入知识和专业知识。道德设计手册不会有任何不同。这本书由 Trine Falbe、Martin Michael Frederiksen 和 Kim Andersen 撰写，将于 1 月底预发行。

与往常一样，将有预购折扣。我们预计将在 2 月下旬发货印刷精装本，但与此同时，请随时订阅图书邮件列表，这样您就可以成为第一批接触这本书的人！

少说话，多问问题

我们的 SmashingConfs 以友好、包容的活动而闻名，前端开发人员和设计师齐聚一堂，参加现场会议和实践研讨会。从现场设计到现场调试，我们希望您向演讲者提出任何问题——从命名约定到调试策略。对于每次演讲，我们将有足够的时间进行详细介绍，并在大屏幕上展示来自实际工作的真实示例。

一张 Dan Mall 站在舞台上的照片，解释了他身后屏幕上显示的代码 — Dan Mall、Brad Frost 和 Ian Frost 编码在纽约 SmashingConf 的舞台上直播。（图片来源：Drew McLellan）（观看视频）

如果您不想错过我们的 SmashingConfs 之一，那么您仍然可以购买早鸟票。如果您需要帮助说服您的老板派您参加活动，请告诉我们！我们支持你。

旧金山，4 月 21 日至 22 日
德克萨斯州奥斯汀，6 月 9 日至 10 日
弗莱堡，9 月 7 日至 8 日
纽约，10 月 20 日至 21 日

粉碎的味道……屏幕外

由 Drew McLellan 主持的 Smashing Podcast 我们已经完成了 Smashing Podcast 的第 7 集！我们为亲爱的朋友和同事 Drew McLellan 和 Bethany Andrew 如此出色地管理双周采访节目而感到自豪和激动！反馈非常积极，现在我们为更多的反馈感到兴奋！

在推特上粉碎播客
以前的剧集（包括成绩单）

在 TypeScript 上闪耀聚光灯

砸电视在不到两周的时间内（ 1 月 29 日），我们将与 Stefan Baumgartner 一起举办一场 Smashing TV 网络研讨会，他将阐明类型检查为创建和使用网络的人们所准备的内容。 TypeScript 一直是 2019 年最受炒作的技术之一——现在是时候超越炒作了！

标记您的日历并在伦敦时间 17:00 加入我们——我们很想听听您在职业生涯中的想法和经历。

SmashingMag 的热门话题

我们每天都会发布一篇关于网络行业当前各种主题的新文章。以下是我们的读者似乎最喜欢并进一步推荐的一些内容：

Frederick O'Brien的“野兽派 Web 开发的人格分裂”
没有装饰，还是带有洒水器的闪烁的霓虹灯装饰？ “野兽派”网站近年来蓬勃发展，但其指导理念仍不明确。
“为什么你应该选择 HTML5 <article> 而不是 <section>”，作者Bruce Lawson
在本文中，Bruce Lawson 解释了我们对<section>的用途以及作者应该如何标记对 AT 用户非常重要的标题。
“使用 CSS 包含属性帮助浏览器优化”， Rachel Andrew
CSS contain属性为您提供了一种向浏览器解释布局的方法，因此可以进行性能优化。 但是，它确实会在您的布局方面产生一些副作用。
Yusuff Faruq的“React 上下文 API 简介”
在本文中，您将学习如何使用 React 的 Context API，它允许您在 React 应用程序中管理全局应用程序状态，而无需借助 props 钻取。

我们时事通讯的最佳选择

随着全新十年的开始，我们决定从专注于 Web 性能的主题开始。有这么多才华横溢的人在从事出色的项目，我们很乐意宣传并给予他们应得的荣誉！

注意：非常感谢 Cosima Mielke 撰写和准备这些帖子！

哪些指标最重要？

第一次有意义的绘画，交互时间，第一次输入延迟，速度指数。有如此多的性能指标浮动，要为一个项目找到适当的平衡并不容易。在大多数情况下，这些指标本身就过于通用且不够精确，因此我们还需要用自定义指标来补充它们。在小型和大型公司中，通常会在 UI 中定义重要的像素，衡量我们可以多快开始渲染它们，以及我们可以多快为它们提供输入响应。

每个项目都可以从至少 4 个指标的组合中受益。交互时间(TTI)是了解用户必须等待多长时间才能无延迟地使用网站的关键指标。首次输入延迟(FID)很好地补充了 TTI，因为它描述了图片中缺失的部分：当用户实际与网站交互时会发生什么。

显示 JavaScript 获取、解析和编译加载阶段的图表 — JavaScript 获取、解析和编译加载阶段（图片来源）

总阻塞时间(TBT)有助于量化页面在变得可靠交互之前的非交互性严重程度。累积布局偏移(CLS)突出显示了用户在访问网站时遇到意外布局偏移（重排）的频率。所有这些指标都将出现在 Lighthouse v6 中，因为它于 2020 年开始推出。

此外，您可以查看 FrustrationIndex，它查看指标之间的差距，而不是单独查看它们、广告权重影响和组件级 CPU 成本。请注意，First Meaningful/Contentful Paint 正在被 Largest Contentful Paint 所取代，并且 SpeedIndex 的作用随着新指标的出现而降低。

性能优化的影响

性能对用户体验和业务指标有直接影响，这已经不是什么秘密了，有时，即使是看似很小的 Web 性能优化，比如缩短几毫秒的加载时间，也能带来更好的转化率。为了证明这种影响，WPO Stats 收集了来自产品和电子商务网站的案例研究和实验——成功案例和错误案例。鼓舞人心！

用户体验速度计算器 — 一个开源可视化工具，有助于解释页面速度、转换和跳出率之间的关系。（图片来源）

为了通过一些硬数据支持您的性能优化并帮助您更好地掌握它们的影响，Sergey Chernyshev 构建了 UX 速度计算器。它让您可以看到速度分布、错误率、跳出率和转化率如何与您输入的值相互交织。一个得心应手的小帮手。

自动压缩 PR 中的图像

图像优化可能是性能优化清单中最简单的任务之一。但是，如果您有很多图像要优化，它也可能会占用相当长的时间，并且在匆忙中，有些图像甚至可能会跳过这一步进入生产阶段。

图像动作 — Doug Sillars 的“网络状态：视频播放指标”（图片来源）

为了改变这一点，Calibre 的团队构建了一个 GitHub 操作，可以自动压缩您拉取请求中的所有 JPEG、PNG 和 WebP 图像。它快速、高效，并且对于近乎无损的压缩，它使用了可用的最佳图像压缩算法：mozjpeg 和 libvips。真正的节省时间。

保持性能领先的资源

网络社区中的很多人都致力于性能并帮助传播有关它的信息。其中之一是蒂姆·卡德莱克。在他的播客 Chasing Waterfalls 中，他邀请了致力于让每个人的网络更快的人们。三集已经发布，Reefath Rajali 分享了对 PayPal 绩效之旅的见解，Malek Kalim 探索如何在整个组织中扩展绩效文化，Katie Hempenius 谈论绩效预算、第三方挑战、JavaScript 和许多其他影响性能的事情。

由 Tim Kadlec 主持的追逐瀑布播客 — 与致力于让每个人的网络更快的人们的对话，由 Tim Kadlec 主持。（图片来源）

Ben Schwarz 和 Karolina Szczur 提供了另一个让您掌握 Web 性能的便捷资源。他们一起策划性能通讯，每月两次向您的收件箱提供 Web 性能工具、演讲和其他资源。还有一个以前的时事通讯问题的存档供您赶上，直到下一个问题将被发送出去。

Smashing Newsletter 的每一期都是用爱和关怀编写和编辑的。 没有第三方邮件或隐藏广告——你已经得到了我们的保证。