最佳实践
- 首先学习浏览器的关键渲染路径。了解这一点将帮助您理解如何提高网站的性能。
- 使用资源提示，例如
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 性能 all about 用户体验和感知性能。正如我们在关键渲染路径文档中学到的，使用带有 rel="stylesheet" 的传统链接标签链接 CSS 是同步的，会阻塞渲染。通过移除阻塞性的 CSS 来优化页面的渲染。
要异步加载 CSS，您可以将 media 类型设置为 print，然后在加载后将其更改为 all。这需要 JavaScript，因此包含一个带有传统回退的 <noscript> 标签很重要。
html
<link
id="my-stylesheet"
rel="stylesheet"
href="/path/to/my.css"
media="print" />
<noscript><link rel="stylesheet" href="/path/to/my.css" /></noscript>
js
const stylesheet = document.getElementById("my-stylesheet");
stylesheet.addEventListener("load", () => {
stylesheet.media = "all";
});
这种方法的缺点是未样式化文本闪烁（FOUT）。解决此问题的最简单方法是内联 CSS，这些 CSS 是渲染在首屏（或在滚动之前在浏览器视口中看到的任何内容）所必需的。这些样式将提高感知性能，因为 CSS 不需要文件请求。
html
<style>
/* Insert your CSS here */
</style>
JavaScript
使用 async 或 defer 属性避免 JavaScript 阻塞，或者在页面 DOM 元素之后链接 JavaScript 资源。JavaScript 仅阻塞 DOM 树中出现在脚本标签之后的元素的渲染。
Web 字体
EOT 和 TTF 格式默认未压缩。对这些文件类型应用 GZIP 或 Brotli 等压缩。使用 WOFF 和 WOFF2。这些格式内置了压缩功能。
在 @font-face 中使用 font-display: swap。通过使用 font-display swap，浏览器不会阻塞渲染，并将使用定义的备份系统字体。优化字体粗细，使其尽可能接近 Web 字体。
图标 Web 字体
如果可能，避免使用图标 Web 字体，而是使用压缩的 SVG。要进一步优化，请在 HTML 标记中内联您的 SVG 数据，以避免 HTTP 请求。
工具
- 学习使用 Firefox Dev Tools 来分析您的网站。
- PageSpeed Insights 可以分析您的页面并提供一些改进性能的通用提示。
- Lighthouse 可以为您提供网站许多方面的详细分析，包括性能、SEO 和可访问性。
- 使用 WebPageTest.org 测试您页面的速度，您可以在其中使用不同的真实设备类型和位置。
- 尝试 Chrome 用户体验报告，它量化了真实用户指标。
- 定义一个性能预算。
API
- 使用 boomerang 库收集用户指标。
- 或者直接使用 window.performance.timing 收集
不该做的事（坏习惯）
- 下载所有内容
- 使用未压缩的媒体文件