网页性能资源
有很多 原因 导致您的网站应该尽可能地提高性能。以下是有关最佳实践、工具、API 的快速回顾，以及指向每个主题的更多信息的链接。
最佳实践
- 从学习浏览器的 关键渲染路径 开始。了解这一点将帮助您了解如何提高网站性能。
- 使用诸如
rel=preconnect、rel=dns-prefetch、rel=prefetch、rel=preload等资源提示。 - 将 JavaScript 的大小保持在最低限度。只使用当前页面所需的 JavaScript。
- CSS 性能因素
- 在您的服务器（或 CDN）上使用 HTTP/2。
- 对资源使用 CDN，可以显着减少加载时间。
- 使用 gzip、Brotli 和 Zopfli 压缩您的资源。
- 图像优化（如果可能，请使用 CSS 动画或 SVG）。
- 延迟加载视窗外的应用程序部分。如果您这样做，请为 SEO 制定备用计划（例如，为机器人流量渲染完整页面）；例如，通过在
<img>元素上使用loading属性。 - 同样重要的是要意识到对用户真正重要的内容。可能不是绝对的时间，而是用户感知。
快速获胜
CSS
Web 性能是关于用户体验和感知性能。正如我们在 关键渲染路径 文档中了解到的那样，使用传统的链接标签（rel="stylesheet"）链接 CSS 是同步的，并且会阻止渲染。通过删除阻塞 CSS 来优化页面的渲染。
要异步加载 CSS，可以将媒体类型设置为打印，然后在加载后更改为所有。以下代码段包含 onload 属性，需要 JavaScript，因此务必包含具有传统回退的 noscript 标签。
html
<link
rel="stylesheet"
href="/path/to/my.css"
media="print"
onload="this.media='all'" />
<noscript><link rel="stylesheet" href="/path/to/my.css" /></noscript>
这种方法的缺点是会出现无样式文本闪烁（FOUT）。解决此问题的最简单方法是在折线以上渲染的任何内容（即您在滚动之前在浏览器视窗中看到的内容）中内联所需的 CSS。这些样式将提高感知性能，因为 CSS 不需要文件请求。
html
<style>
/* Insert your CSS here */
</style>
JavaScript
Web 字体
EOT 和 TTF 格式默认情况下不会被压缩。对这些文件类型应用 gzip 或 Brotli 等压缩。使用 WOFF 和 WOFF2。这些格式内置了压缩功能。
在 @font-face 中使用 font-display: swap。通过使用字体显示交换，浏览器将不会阻止渲染，并将使用定义的备份系统字体。尽可能优化字体粗细 以与 web 字体尽可能匹配。
图标 web 字体
如果可能，请避免使用图标 web 字体，并使用压缩的 SVG。为了进一步优化，请在 HTML 标记中内联 SVG 数据以避免 HTTP 请求。
工具
- 学习使用 Firefox 开发者工具 来分析您的网站。
- PageSpeed Insights 可以分析您的页面并提供一些提高性能的一般提示。
- Lighthouse 可以详细分析您网站的许多方面，包括性能、SEO 和无障碍性。
- 使用 WebPageTest.org 测试您的页面速度，您可以在其中使用不同的真实设备类型和位置。
- 尝试 Chrome 用户体验报告，该报告量化了真实用户指标。
- 定义 性能预算。
API
- 使用 boomerang 库收集用户指标。
- 或者直接使用 window.performance.timing 收集。
不应做的事情（不良做法）
- 下载所有内容
- 使用未压缩的媒体文件