前几天，我意识到网页性能是一个巨大的主题，涵盖了太多内容——从最小化资产到使用特定文件格式，在构建网站时需要牢记很多东西。对我来说，要记住这么多东西实在太难了！
所以我做了一个 网页性能检查清单。它是一个 Notion 文档，我可以将其分叉并使用它来标记完成的项目，无论何时我开始一个新项目。它还包含许多链接供参考。
此文档仍在进行中。有任何建议或链接吗？请随时在下面的评论中提出建议！
网页性能检查清单
DigitalOcean 提供适合您旅程各个阶段的云产品。 立即开始使用 $200 免费信用额度！
很棒的清单！感谢分享！只是注意到：也许您在“避免动画化除以下以外的样式：”中指的是“transform”而不是“position”？
如今，网页性能是一个非常复杂的主题，需要平衡很多方面，因此在 30 多个要点中涵盖它是一个有趣的挑战。
但是，如果要添加一个东西，我会建议包含 HTML 性能优化以及为生产环境删除可选标记（可选标签、不需要的引号，同样也不需要引用默认值的属性-值对）。我曾经提供过一个 概述，但是可能还有一些其他文档可以添加必要的细节。
由于这是关于 css 的，您是否会添加关于可扩展性或针对不同屏幕尺寸的备用图像的内容？
感谢分享网页性能检查清单。也许，这是任何开发者都需要不时检查的重要检查清单。即使能够将加载时间缩短 1 秒，也会对访客的第一印象产生巨大影响。
嗯，看起来不错！如果可能，我会切换到 openlitespeed 网页服务器。使用 litespeed，上面几乎所有内容都已包含在内。
删除未使用的 CSS。这是经常发生的事情。我们添加新组件或删除一些旧组件，我们切换了一些东西，但我们没有触碰 CSS。经过一段时间后，CSS 文件会开始变重，而这种重量会转化为缓慢的加载时间。
此外，如果可能，使用 webm 视频（实际上不知道它们是否完全受现代浏览器的支持）。
将 CSS 和 JS 链接/导入放在正确的位置。不要混淆它们，否则您可能会看到一些奇怪的布局出现。
这是一个很棒的检查清单，我也正在努力！
我喜欢的另一个测试工具是 https://tools.pingdom.com/
每种编程语言在优化方面都有最佳实践，例如对于 CSS，我们必须使用有效的选择器，在 PHP 和 SQL 中，我们必须进行有效的数据库查询，而在所有语言中，我们必须避免冗余。以下是 3 个有趣的资源
https://10up.github.io/Engineering-Best-Practices/css/#performance
https://10up.github.io/Engineering-Best-Practices/javascript/#performance
https://10up.github.io/Engineering-Best-Practices/php/#performance
合并资产仍然是提高 PageSpeed 得分的良好做法，但我不知道它在 HTTP/2 和并行请求中实际有多有用。例如，如果只有一个 .css 和 .js 文件位于中，则不好，最好的方法是将这些文件放在页脚中，并将关键 CSS 放在头部。
显然，最好的方法是在每个页面中仅加载该页面中使用的 css 和 javascript，很明显，但在使用像 wordpress 这样的 CMS 和大量插件时并不容易！例如，在 WordPress 中，有特定的函数和条件可以在不同的页面、存档或帖子中注册/取消注册样式和脚本，仅在我们需要它们的地方。
我知道检查清单试图成为一个通用的解决方案，而且我知道这可能存在争议，但如果我使用的是 HTTP/2，我可能不会急于减少所有 HTTP 调用并将所有文件合并。这会导致包含当前页面上未使用组件的 CSS/JS 的大型单个文件。由于 HTTP/2 多路复用更有效地利用了有限数量的连接，因此仅对页面实际需要的多个单个脚本/文件进行调用可能会更快。
值得测试，并且很大程度上取决于您的系统总共使用了多少个组件，以及每个页面需要多少个组件。我在非常大型的系统上看到了这种方法带来的速度优势，并且也看到了一些使用合并的 CSS/JS 文件更快的较小型网站。
我还会在列表中添加“异步加载 JavaScript”（不阻塞渲染），并使用“预连接”资源提示来打开与其他域的连接。我们的许多客户使用 GTM 在页面加载后添加大量的分析脚本，而能够在 GTM 请求脚本之前准备好 TLS 连接可以节省数百毫秒。
相关地，我不能再强调“避免多个分析脚本”了！我们许多客户的性能问题都可以追溯到 GTM 加载了大量的分析脚本……