1. MDN 博客
  2. 监控和优化网站性能
Text reads monitoring and optimizing website performance. A graphic of a person sitting at a desk and working using desktop and keyboard
赞助

监控和优化网站性能

Author avatar DebugBear 阅读时间 12 分钟

一个性能良好的网站不仅能提升用户体验，还会影响可访问性、搜索引擎排名、转化率等。保持最佳性能需要持续监控你的网站，以发现性能退步。

本文探讨了与网站性能相关的关键概念以及你为什么要关注它。我们分享了实用的见解、工具和技术，帮助你监控和提升网站性能。

在本文中，我们将涵盖

  • 如何阅读网络请求瀑布图
  • 你可能会遇到的常见性能问题
  • 如何处理大型网页资源
  • 可用于测试网站性能的工具
  • 如何监控网站性能
  • 可以采用的性能优化技术

页面加载性能与运行时性能

尽管页面加载性能和运行时性能关注的是 Web 性能的不同方面，但它们并非完全独立的。让我们一起来看看两者

页面加载性能

页面加载性能指的是网页的初始加载。在页面加载期间，会发出网络请求以获取 HTML、CSS、JavaScript、图像和字体等资源。这种网络活动可以在名为网络请求瀑布图的图表中可视化。此图表显示了资源下载的顺序以及每个资源加载所需的时间。

在讨论页面加载性能时，以下是一些有用的指标

运行时性能

运行时性能指的是浏览器将像素呈现在屏幕上的速度以及页面对用户交互的响应速度。

仅仅因为网络资源下载完成，并不意味着屏幕上会显示任何有意义的内容。运行时性能可以帮助你了解页面变得可交互和可用所需的时间。

与运行时性能相关的一些指标包括

  • 交互到下一次绘制 (INP)：页面对用户交互的响应速度
  • JavaScript 执行：浏览器执行 JavaScript 代码的速度
  • 渲染性能：页面显示变化的速度

处理网络请求瀑布图

网络请求瀑布图是一种可视化，它展示了浏览器随时间加载网页资源的方式。这有助于你了解页面加载体验。大多数网络请求瀑布图可视化还包括一个电影胶片，这是一系列网站截图，显示了页面随时间加载的情况（如下方的请求瀑布图所示）。

你可以使用我们的“网站速度测试”为你的网站生成一个网络请求瀑布图。此工具会在受控的实验室环境中测试你的网站，并为你可视化网络活动。

注意： DebugBear 和浏览器开发者工具等工具是调查网站性能问题的互补手段。有了这两者在你的工具包中，你将拥有一个更全面的方法来发现和解决性能问题。

此报告捕获了网站的页面加载体验。它显示了许多有用的性能指标，并提供了指向其他数据（如 Lighthouse 报告和瀑布视图的 Requests）的链接。

DebugBear website speed test result. The report shows some web performance metrics like time to first byte, largest contentful point, and others. The user interface also has a sidebar with links to a Lighthouse report, Experiments, and more.

当你单击左侧窗格中的 Requests 选项时，会显示请求瀑布视图。

DebugBear request waterfall view. Different sections of the image have been marked with numbers from 1 to 4.

上图中带数字的标签对应以下组件

  1. 筛选选项：提供仅查看 CSS 资源或仅查看 HTML 资源的选项。
  2. 视图下拉菜单：更改电影胶片的外观，并显示/隐藏瀑布图上的列。
  3. 电影胶片视图：显示此报告中捕获的页面加载的视觉进度。
  4. 请求：列出了此录制期间发生的单个请求。

在瀑布图中，每一行代表一个单独的网络资源，例如 HTML 文件、CSS 文件或图像文件。资源在这些关键方面可能存在显著差异

  • 优先级：浏览器根据资源的重要性确定其优先级。
  • 大小：资源的大小可能不同，影响下载时间和带宽使用。
  • 阻塞行为：某些资源可能会延迟其他资源的加载。
  • 类型：每种资源类型都有其自己的加载行为，由浏览器管理。

瀑布图中资源的自上而下顺序对应于资源下载的顺序。你希望关键资源更接近顶部，而不那么重要的资源则更接近底部。

理解瀑布图元数据

DebugBear 的网络请求瀑布图视图为每个请求提供了元数据。元数据作为每行资源的列显示

Type, URL, Domain, Priority, Duration and Size headers in a DebugBear request waterfall

你可以通过单击单个资源来查看其他元数据。要自定义元数据列，请单击“列”下拉菜单，然后切换你想要查看的列。一些值得注意的元数据包括

  • 优先级：指示浏览器对资源的加载优先级
  • DNS：解析域名所需的时间
  • TTFB（首字节时间）：服务器响应所需的时间
  • 完整大小：资源的未压缩大小
  • 协议：使用的网络协议（例如，HTTP/2、HTTP/3）

网络请求瀑布图显示了渲染里程碑。你可以使用渲染里程碑（显示为垂直彩色线条）来了解网络活动如何影响页面的渲染。

红色垂直线表示最大内容绘制 (LCP)，而蓝色线表示首次内容绘制 (FCP)。

DebugBear waterfall lines showing FCP and LCP

使用瀑布图识别性能问题

分析瀑布图时，请查找可能影响网站性能的模式和问题。以下是三个最常见的问题

渲染阻塞资源

渲染阻塞资源是延迟页面初始渲染的资源。考虑此代码示例

html
<!doctype html>
<html lang="en">
  <head>
    <title>Online Shop</title>
  </head>
  <body>
    <p>Cookie banner</p>
    <script src="cookie-banner.js"></script>
    <h1>Shop for clothes</h1>
  </body>
</html>

在这种情况下，cookie-banner.js 脚本会阻塞 <h1> 元素的渲染。

事实上，许多网站在 HTML 文档的 <head> 元素中包含了渲染阻塞资源，这可能会延迟整个页面的渲染。无论是 CSS 还是 JavaScript，DebugBear 都会在网络请求瀑布图中突出显示渲染阻塞资源，从而更容易可视化这些问题发生的位置

对于渲染阻塞的 JavaScript 文件，你可以向 <script> 元素应用 async 属性，以防止它阻塞页面的渲染。

长请求链

当资源相互依赖时，会创建一系列请求，从而形成长请求链。以下是一个请求链的示例

index.html（第一个请求）:

html
<!doctype html>
<html lang="en">
  <head>
    <title>Online Shop</title>
    <script src="app.js"></script>
  </head>
  <body>
    <h1>Loading...</h1>
  </body>
</html>

app.js（第二个请求）:

js
import analytics from "./analytics.js";
import home from "./home.js";

document.addEventListener("DOMContentLoaded", () => {
  analytics.init();
  home.init();
});

home.js（第三个请求）:

js
function init() {
  const response = await fetch('/message');
  const message = await response.text();
  document.querySelector('h1').textContent = message;
}

export default { init };

此示例显示一个 index.html 文件加载一个 app.js 文件，而 app.js 文件又加载一个 home.js 文件。虽然此示例是一个简化，但它说明了长请求链如何影响页面加载体验。

注意： /message 端点仅在 DOMContentLoaded 事件之后才被调用，这进一步加剧了问题，因为获取消息不需要 DOMContentLoaded 事件。

浏览器非常擅长预读并获取可以从主 HTML 文件中发现的资源，但是当使用长请求链时，这种能力就会丧失。

错失预加载机会

有时，关键资源未能尽可能早地加载。通常，可以通过将关键资源从长请求链中移除并确保其可从主 HTML 文档中发现来提前加载；但在某些情况下，这不可能实现。

如果长请求链不可避免，你可以通过使用 <link rel="preload"> 元素来预加载关键资源，例如 LCP 图像元素，从而缓解此问题。

例如，根据先前的长请求链示例，index.html 文件可以更新以预加载 home.js 文件和消息端点，如下所示

html
<!doctype html>
<html lang="en">
  <head>
    <title>Online Shop</title>
    <link rel="preload" href="home.js" as="script" />
    <link rel="preload" href="/message" as="fetch" />
    <script src="app.js"></script>
  </head>
  <body>
    <h1>Loading...</h1>
  </body>
</html>

注意： 你不能过度使用 <link rel="preload">，因为它可能导致不必要的资源下载和增加带宽使用。

Chrome DevTools 在性能面板中有一个“LCP 图像在最早开始点 X 秒后加载”的消息。这可以帮助你识别错失的预加载机会。要找到此功能，请使用 DevTools 对页面加载进行性能记录，然后从性能洞察侧边栏打开LCP 请求发现部分。

DevTools LCP image details

在 DebugBear 请求瀑布视图中，当你单击单个资源并打开“显示请求发起者链”设置时，可以找到长请求链。下图中的请求链显示，一个字体文件（最后一个资源）由 typography.css 发起，而 typography.css 又由 style.css 发起，后者是从主文档请求的。

DebugBear request chains in a request waterfall view

处理大型资源

在 Web 开发领域，人们普遍认为大型资源会影响 Web 性能。当你的页面包含大型资源时，可能会导致

  • 整体页面加载时间变慢
  • 数据使用量增加，这对于使用按流量计费连接的用户来说可能会很昂贵
  • 移动设备电池消耗增加
  • 带宽拥塞，影响其他资源的加载

注意： 大型资源的影响不仅仅是下载时间。浏览器还需要解析和执行代码，即使是未使用的代码，这对于大型文件来说尤其耗时。

如何识别大型资源

要查找大型资源，请按大小对瀑布视图中的资源进行排序。在 DebugBear 中，你可以单击“完整大小”或“大小”列标题，分别按未压缩大小或压缩大小对资源进行排序。将最大的资源放在顶部，你可以轻松识别特别大的资源。

HTML / CSS 大小分析

大型资源通常归因于图像，但大型文件也可能由文本代码/内容引起，例如

  • HTML：主页面文档中过多的标记
  • JavaScript：由第三方库或未使用的代码组成的大型捆绑包
  • CSS：包含未使用规则的臃肿样式表

DebugBear 提供了 HTML 和 CSS 大小分析器工具，可帮助你分解这些文件的构成。这可以帮助你识别改进领域，例如删除未使用的样式或优化标记。

以下截图显示了 HTML 标记的大小分析。在此示例中，一个 JavaScript 框架为了水合的目的，将页面上的文本内容复制到一个 <script> 元素中。即使进行了压缩，这也会导致网络上浪费字节，并增加了浏览器处理 <script> 元素内数据所需的额外解析时间。

DebugBear HTML size analysis showing a roughly equal distribution for ~50% for textual content in paragraph elements, and for content within script elements

JavaScript 大小分析

要对 JavaScript 使用情况进行深入分析，浏览器 DevTools（Edge 或 Chrome）中的“覆盖率”选项卡可以显示你的 JavaScript（和 CSS）在页面加载期间实际使用了多少。

Chrome DevTools coverage panel

虽然 DebugBear 不提供专门的 JavaScript 大小分析器，但如果你的捆绑包包含 JSON 数据，你可以使用其JSON 大小分析器工具。

优化资源大小的方法

总的来说，无论你的资源有多大，都有标准的优化大小的方法，包括

  • 摇树：从你的捆绑包中删除未使用的代码。
  • 代码分割：将你的代码分割成更小的块，以便在页面加载期间只加载所需的部分。将非关键代码延迟到需要时或页面加载完成后再加载。
  • 压缩：通过对文本文件使用Brotli 或 Gzip，以及对图像使用 WebP 或AVIF 等现代格式，来减小资源的大小。

优化页面渲染

页面资源下载完成后，浏览器会构建页面并将其显示在屏幕上。有些网站资源加载速度飞快，但页面渲染速度却很慢，反之亦然。以下是一些常见的渲染问题以及如何解决它们。

慢速网络字体

根据浏览器以及已设置的任何 font-display CSS 属性，使用加载缓慢的网络字体可能会有效地阻止页面上文本内容的渲染。

即使最初使用了系统备用字体，延迟加载的网络字体也可能导致布局偏移，从而扰乱用户体验。这可能发生在浏览器最初使用备用字体渲染页面，然后在加载网络字体后将其替换掉。如果备用字体和网络字体具有不同的尺寸和指标，可能会导致布局偏移。

为了缓解这些问题，你可以采取以下一项或多项措施

  • 如果你的网络字体并非必须始终使用，你可以将 font-display: optional 或 font-display: fallback CSS 属性应用于你的字体声明。这允许浏览器管理网络字体的显示，平衡性能和用户体验。至少，使用 font-display: swap，它确保在网络字体加载之前使用备用字体。
  • 你可以预加载你的网络字体文件，这通常很有效，因为字体有时是在 CSS 文件中指定的。CSS 文件在 HTML 文件之后加载，从而创建了一个请求链。
  • 你可以使用字体描述符，以便更好地匹配备用字体和网络字体，减少布局偏移。

长时间运行的 JavaScript 任务

长时间运行的任务是执行时间超过 50 毫秒的 JavaScript 操作。这通常会阻塞主线程，阻止浏览器响应用户交互。在页面加载期间发生的长时间运行任务可能会延迟页面的渲染。这在大型 JavaScript 捆绑包中很常见，尤其是在移动设备上。DebugBear 可以在网络瀑布视图中突出显示这些长时间运行的任务。

你应该将长时间任务分解成更小的块，或者将它们卸载到 Web Worker 中在后台运行。像scheduler.yield这样的新 API 可以帮助你明确地将控制权交还给浏览器，使其能够处理用户交互并进行其他渲染工作。

测试网站性能

定期测试你的网站性能作为开发和调试工作流程的一部分是很有帮助的。以下是一些可以用来快速测试网站性能的工具

浏览器开发者工具： Firefox、Chrome、Edge 和 Safari 提供带有性能分析选项的开发者工具。

Lighthouse panel in Chrome DevTools

PageSpeed Insights：Google 的 Web 性能分析工具，提供评分和改进建议。

PageSpeed Insights home page

DebugBear： DebugBear 提供一套完整的性能测试工具。你可以运行免费的性能测试，获取网络请求瀑布图、核心 Web 指标分数等更多信息。

DebugBear home page

监控网站性能

虽然一次性测试很有用，但持续监控有助于你的网站长期保持良好性能。通过持续监控，你可以

  • 识别性能退步。
  • 追踪性能趋势。
  • 接收关键问题的警报。

DebugBear 提供持续的性能监控，包括警报、趋势分析、真实用户监控、自定义报告以及其他报告。

例如，当你的用户报告网站速度变慢时，你可以比较测试结果，以确定你网站上的哪些更改影响了性能。下图显示了 DebugBear 上跟踪的一系列网页的性能趋势。

The DebugBear project view showing performance trends for a list of web pages that are being monitored

实验室数据与现场数据

到目前为止，我们一直在讨论实验室数据，这些数据是在受控环境中收集的。在实验室环境中网站加载速度很快，但在实际环境中加载速度却很慢是可能的。你应该收集实验室和现场环境的数据，以全面了解你网站的性能。

了解实验室数据和现场数据之间的区别很重要

  • 实验室数据：在受控环境中收集，适用于一致的测试和调试
  • 现场数据：从真实用户处收集，提供对实际用户体验的洞察

DebugBear 提供两种类型的数据，为你提供网站性能的完整视图。

DebugBear test result

总结

这篇博文涵盖了可能影响你网站性能的一些关键方面。你了解了如何阅读网络请求瀑布图以及可以用来监控和缓解性能相关问题的工具和技术。但是，你应该注意，发现、理解和修复问题只是维护网站性能的一部分。一个真实世界的网站还需要持续监控潜在的性能问题，以帮助避免随着时间的推移出现退步。

这篇博文由DebugBear赞助。DebugBear 帮助网站开发者提供更好的用户体验并通过 Google 的核心 Web Vitals 评估。获取详细的页面速度建议并持续监控合成和真实用户页面速度指标。

© . Content available under a Creative Commons license.