本教程主要参考Google 开发者网站文章和mdn文章，经过翻译和整理

Web 性能是 Web 开发的一个重要方面，侧重于网页加载速度以及网页对用户输入的响应速度。优化网站的性能可以为用户提供更好的体验。更好的用户体验在很大程度上帮助您实现您对网站的预期目标。

加载大型 JavaScript 资源会显著影响网页速度。将 JavaScript 拆分为较小的区块并仅下载网页在启动期间正常运行所必需的内容，可以极大地提高网页的加载响应能力，进而提高网页的互动到下一次绘制 (INP)。

当网页下载、解析和编译大型 JavaScript 文件时，可能会在一段时间内无响应。页面元素可见，因为它们是页面的初始 HTML 的一部分，并由 CSS 设置样式。但是，为这些互动元素以及页面加载的其他脚本提供支持所需的 JavaScript 可能需要解析和执行 JavaScript，以便它们正常运行。其结果是，用户可能会感觉互动受到严重延迟，甚至完全中断。

要想构建可快速加载的网站，第一步就是要及时从服务器接收网页 HTML 的响应。当您在浏览器的地址栏中输入网址时，浏览器会向服务器发送 GET 请求进行检索。网页的第一个请求针对的是 HTML 资源，因此，确保 HTML 以最短延迟快速到达是关键性能目标。

初始的 HTML 请求需要执行几个步骤，每个步骤都需要一些时间。通过减少在每个步骤上花费的时间，您可以缩短首字节时间 (TTFB)。虽然 TTFB 不是您在页面加载速度方面应该关注的唯一指标，但较高的 TTFB 确实会让您难以达到 Largest Contentful Paint (LCP) 和 First Contentful Paint (FCP) 等指标的指定“良好”阈值。

重要提示 ：下面是图片性能的一般概览。如需深入了解该主题，请参阅“学习图片”课程，详细了解特定文件格式和高性能图片工作流等内容。图片通常是网络上最庞大且最普遍的资源。因此，优化图片可以显著提升您网站上的广告效果。 在大多数情况下，优化图片意味着通过减少发送的字节数来减少网络时间，但您也可以通过传送适合用户设备大小的图片，从而优化发送给用户的字节数。

与其他类型的资源相比，图片和 <iframe> 元素消耗的带宽通常更多。对于 <iframe> 元素，加载和渲染其中的页面可能会消耗相当多的额外处理时间。

在延迟加载图片的情况下，延迟加载初始视口以外的图片有助于减少初始视口内更关键资源的带宽争用情况。在某些情况下，网络连接状况不佳时，这有助于提高网页的 Largest Contentful Paint (LCP)，并且重新分配的带宽有助于加快 LCP 候选版本的加载和绘制速度。

在上一个单元中，我们探索了关键渲染路径背后的一些理论，并说明了阻止渲染和解析器阻止的资源会如何延迟网页的初始渲染。现在您已经了解了其背后的一些理论，接下来就可以学习一些用于优化关键渲染路径的技巧了。

网页加载时，其 HTML 中会引用许多资源，这些资源通过 CSS 提供网页的外观和布局，并通过 JavaScript 提供互动性。在本单元中，我们介绍了一些与这些资源相关的重要概念，以及它们对网页加载时间的影响。

渲染阻塞

在本单元中，您将了解一些优化网页字体的方法。

网络字体会影响网页在加载时和呈现时的性能。 较大的字体文件可能需要一段时间才能下载完毕，并且会对 First Contentful Paint (FCP) 产生负面影响，而不正确的 font-display 值则可能会导致不必要的布局偏移，进而导致网页的Cumulative Layout Shift (CLS)。

在前几个单元中，您了解了延迟加载 JavaScript 和延迟加载图片和 <iframe> 元素等概念。延迟加载资源会在页面初始加载期间减少网络用量和 CPU 使用率，方法是在需要资源的位置下载资源，而不是预先加载资源，以免资源被闲置。这可以缩短初始网页加载时间，但如果驱动后续互动所需的资源在发生时尚未加载，则后续互动可能会出现延迟。

在关于优化资源加载的上一单元中，您了解了各种网页资源（如 CSS 和 JavaScript）对网页加载速度的影响，以及如何优化这些资源及其投放速度以加快网页的呈现速度。现在正好可以进入更高级的资源加载方面，这涉及使用资源提示帮助浏览器更快地加载它们。

资源提示可以告知浏览器如何加载资源并确定资源优先级，从而帮助开发者进一步缩短网页加载时间。一组初始资源提示（例如 preconnect 和 dns-prefetch）是最先引入的资源提示。不过，随着时间的推移，preload 和 Fetch Priority API 相继提供了额外的功能。

关键呈现路径是指网页开始在浏览器中呈现之前所涉及的步骤。为了呈现网页，浏览器需要 HTML 文档本身以及呈现该文档所需的所有关键资源。

之前的常规 HTML 性能注意事项单元介绍了如何将 HTML 文档发送到浏览器。不过，在本单元中，我们将详细了解浏览器在下载 HTML 文档以呈现网页之后会执行哪些操作。

渐进式渲染

网络是天生散布的。与在使用前安装的原生应用不同，浏览器不能依赖于具有呈现网页所需的所有资源的网站。因此，浏览器非常擅长渐进地呈现网页。原生应用通常包括安装阶段和运行阶段。但是，对于网页和 Web 应用，这两个阶段之间的界限没有明显，浏览器在设计时就考虑到了这一点。