性能链接 IV | CSS-Tricks

HTTP 缓存是一种超能力 — Hugh Haworth 阐述了 Cache-Control 头部是如何成为 Web 性能中一种极具效力的要素。我一开始误读了标题，以为是要读关于 HTML 缓存的内容。 Hugh 稍微涉及了它（比如如何在论坛等页面内容快速变化的情况下谨慎使用它），但我认为这通常是一个很少谈论的话题。也就是说，通常人们根本不缓存 HTML，因为它变化最多，而且作为大多数其他缓存的父级存在风险。我现在之所以这样做，是因为 Cloudflare 支持它.
为什么 Web 组件可以使用框架 — 我承认，想到 Web 组件需要框架，更别说是对各种随机框架的大杂烩表示认可，让我很不舒服。但 Nolan Lawson 深入探讨了其中的细微差别。一两 KB 的代码可能懒加载/代码拆分，这并不是什么大不了的事，尤其是考虑到框架可能会针对运行时性能进行优化。
web-vitals-element — Stefan Judis 开发的一个 npm 包，它启动一个 <web-vitals> Web 组件，用于显示您的 CLS、FID、LCP 和 BVD (演示)。奇怪的是，它无法在 Skypack 上构建.
十大性能陷阱 — 我可能无法猜到 Jake 和 Surma 在这个十大列表中涵盖的任何东西。我猜测性能方面唾手可得的成果要么通过技术改进变成了一堆无关紧要的问题，要么被网站所有者和托管商普遍处理，因此，一组新的问题成为了最主要的罪魁祸首。
如何消除渲染阻塞资源：深度解读 — Sia Karamalegos：渲染阻塞资源是“暂停”关键渲染路径的文件。它们会中断一个或多个步骤。您应该非常清楚任何渲染阻塞的内容，并仅按需渲染阻塞（例如关键 CSS），而不是让它意外发生。
我们如何将 Next.js 页面大小减少 3.5 倍并获得 98 分 Lighthouse 得分 — Colin Armstrong 阐述了动态加载资产、减小资产大小和使用响应式图像的优势。幸运的是，用于诊断性能问题的工具和用于解决性能问题的工具大部分都内置在 Next.js 中。关于 PurgeCSS 和 Tailwind 的部分内容在此显得尤为重要。我认为，如果您不使用 PurgeCSS 来删除未使用的 Tailwind 选择器（或使用 JIT 编译器仅创建所需的选择器），那么您基本上是在错误地使用 Tailwind。发送 350 KB 的 CSS 而不是您需要的 10 KB 是不可接受的。
提高文本输入的响应速度 — Nolan Lawson 阐述了如何使用 requestIdleCallback 对 UI 更新进行批处理，以防止“昂贵”的主线程工作阻塞 input 事件。
矢量？光栅？为什么不两者兼备！ — Zach 通过将图形分成两个部分来获得最佳的文件大小：一个 SVG（矢量）用于 SVG 擅长的部分，以及一个超级优化的光栅图形（理想情况下为 AVIF）用于它擅长的部分，然后将它们叠加在一起。