通过访问者的眼睛查看您的网站负载
了解访问者在访问您的网站时的实际体验。
注意到任何加载缓慢或不合适的东西吗？ 这可以帮助您识别访问者遇到的重要滞后和转换问题。
显示 DebugBear Web 性能测试结果的屏幕截图，2022 年 10 月时间线幻灯片显示了网站随时间的渲染进度。
比如这个页面在 0.7 秒后开始渲染，主图在 1.3 秒后渲染。
当聊天小部件在 3.7 秒后显示时，网站已完全呈现，也称为视觉完成。
DebugBear 的屏幕截图，显示了 2022 年 10 月一段时间内网站的渲染进度在该工具中，您还可以观看渲染过程的视频记录。
这是向客户或团队其他成员展示绩效问题的影响的好方法。
屏幕截图显示了 DebugBear 中部分渲染网站的视频记录，2022 年 10 月通过查看您的真实加载统计数据来测试站点速度变化
假设您一直在优化您的网站，并且您想了解这些更改是否会产生影响。
该工具在最佳环境中运行“实验室测试”，以发现您是否正确优化了您的网站。
当你测试你的网站时，你会得到一个官方的“实验室分数”，它是来自谷歌 Lighthouse 工具的性能分数的六个性能指标的总结：
- First Contentful Paint（占总分的 10%）。
- 速度指数 (10%)。
- 最大含量的油漆 (25%)。
- 互动时间 (10%)。
- 总阻塞时间 (30%)。
- 累积布局偏移 (15%)。
使用这些数据，您将发现上一轮优化的帮助有多大，以及您可能需要更改哪些内容。
到目前为止，您可能想知道您需要更改什么。 让我们学习如何使用 Metrics Overview 的每个关键指标来优化您的网站。
如何优化网站速度
运行速度测试是您网站优化之旅的第一部分。
一旦你有了你的指标，你就需要知道如何解释它们以及如何修复它们。
在您的网站速度报告的指标概览区域中，您将看到我们将重点关注的关键指标，以帮助您加快网站速度：
- First Contentful Paint ：这可以通过修复服务器通信速度来加快。
- 最大的内容绘画：这可以通过优化媒体和资源来加速。
此外，您可以使用请求瀑布来查看请求需要多长时间以及这对这些指标有何影响。
如何加速首次内容绘制 (FCP)
让我们首先让您的网站更快地出现在您的访问者面前； 我们将首先处理 First Contentful Paint。
什么是第一个内容油漆？
First Contentful Paint 测量在访问者导航到该页面后页面内容首次开始出现的时间。
重要的是要快速显示您的关键内容，以防止您的访问者离开您的网站。 用户离开您的网站的速度越快，Google 就会越快了解到页面体验可能很差。
但是你怎么知道是什么导致你的网站加载缓慢呢？
您如何发现哪些服务器问题导致您的网站变慢？ 让我们来了解一下。
为什么我的第一个有内容的油漆需要这么长时间？
您的 FCP 可能会受到服务器连接速度、服务器请求、渲染阻塞资源等的影响。
这听起来很多，但有一种简单的方法可以准确地查看导致 FCP 速度变慢的原因——请求瀑布。
这个有用的工具显示您的网站提出了哪些请求以及每个请求何时开始和结束。
例如，在这个屏幕截图中，我们首先看到一个对 HTML 文档的请求，然后是两个加载文档中引用的样式表的请求。
屏幕截图显示了 DebugBear 中第一个 Contentful Paint 指标的调试数据，2022 年 10 月为什么第一次内容绘制会在 0.6 秒后发生？ 我们可以分解页面上发生的事情来理解这一点。
了解第一次内容丰富的绘画之前会发生什么
在您的网页上加载第一部分内容之前，您的用户浏览器必须首先连接到您的服务器并检索内容。
如果此过程需要很长时间，那么您的用户需要很长时间才能看到您的网站。
您的目标是在您的网站开始加载之前了解正在发生的事情，以便您可以查明问题并加快体验。
页面加载第 1 部分：浏览器创建服务器连接
在首次从服务器请求网站之前，访问者的浏览器需要与该服务器建立网络连接。
这通常需要三个步骤：
- 检查DNS记录以根据域名查找服务器的IP地址。
- 建立可靠的服务器连接（称为 TCP 连接）。
- 建立安全的服务器连接（称为 SSL 连接）。
这三个步骤由浏览器一个接一个地执行。 每个步骤都需要从访问者的浏览器到网站服务器的往返行程。
在这种情况下，建立服务器连接大约需要 251 毫秒。
DebugBear 屏幕截图显示用于建立服务器连接的网络往返，2022 年 10 月页面加载第 2 部分：浏览器请求 HTML 文档（此处为第一个字节的时间）
建立服务器连接后，访问者的浏览器可以请求包含您网站内容的 HTML 代码。 这称为 HTTP 请求。
在这种情况下，HTTP 请求需要 102 毫秒。 此持续时间包括网络往返所花费的时间和等待服务器生成响应所花费的时间。
在 251 毫秒创建连接和 102 毫秒发出 HTTP 请求后，访问者的浏览器终于可以开始下载 HTML 响应了。
这个里程碑称为第一个字节的时间 (TTFB)。 在这种情况下，这发生在总共 353 毫秒之后。
服务器响应准备好后，访问者的浏览器会花费一些额外的时间来下载 HTML 代码。 在这种情况下，响应非常小，下载只需要额外的 10 毫秒。
DebugBear 屏幕截图，显示 HTTP 请求的不同组件，2022 年 10 月页面加载第 3 部分：您的网站加载额外的渲染阻止资源
浏览器不会在加载文档后立即呈现或显示页面。 相反，通常会有额外的渲染阻塞资源。
如果没有任何视觉样式，大多数页面会看起来很糟糕，因此在页面开始呈现之前加载 CSS 样式表。
在这个网站速度测试示例中加载 2 个额外的样式表需要 137 毫秒。
请注意，这些请求不需要新的服务器连接。 CSS 文件从与以前相同的域加载，并且可以重新使用现有连接。
DebugBear 屏幕截图显示在 HTML 文档之后加载的其他渲染阻止资源，2022 年 10 月页面加载第 4 部分：浏览器呈现页面
最后，一旦加载了所有必要的资源，访问者的浏览器就可以开始呈现页面。 然而，完成这项工作也需要一些处理时间——在本例中为 66 毫秒。 这由瀑布视图中的橙色 CPU 任务标记指示。
DebugBear 屏幕截图显示了从加载 HTML 文档到呈现网页的步骤，2022 年 10 月我们现在明白为什么 FCP 会在 632 毫秒后发生：
- HTML 文档请求为 364 毫秒。
- 加载样式表需要 137 毫秒。
- 渲染页面需要 66 毫秒。
- 其他处理工作需要 65 毫秒。
其他处理工作包括运行内联脚本或在下载后解析 HTML 和 CSS 代码等小型工作。 您可以将此活动视为渲染幻灯片下方的灰色小线。
如何优化首次内容绘制 (FCP)
现在您了解了导致网站呈现的原因，您可以考虑如何优化它。
- 服务器能否更快地响应 HTML 请求？
- 可以通过同一个连接加载资源而不是创建一个新连接吗？
- 是否有可以删除或更改为不再阻止渲染的请求？
既然您网站的初始部分加载得更快，是时候专注于加快整个网站的加载速度了。
如何使用 DebugBear 的建议加速最大内容绘制 (LCP)
有很多方法可以加快您的 LCP。
为方便起见，DebugBear 在他们的建议部分为我们提供了很好的后续步骤。
让我们看一下建议的一些示例，并了解如何加快本网站的 LCP。
建议 1：从 HTML 文档发起 LCP 图像请求
如果页面上最大的内容元素是图像，则最佳做法是确保 URL 直接包含在初始 HTML 文档中。 这将有助于它尽快开始加载。
然而，这种最佳实践并不总是被使用，有时浏览器需要很长时间才能发现它需要下载主图像。
在下面的示例中，使用 JavaScript 将最大的内容（即图像）添加到页面中。 因此，浏览器需要先下载并运行一个 200 KB 的脚本，然后才能发现图像并开始下载它。
DebugBear 屏幕截图显示了导致图像请求的顺序请求链，2022 年 10 月如何修复：根据网站的不同，有两种可能的解决方案。
解决方案 1：如果您使用 JavaScript 延迟加载大图像，则优化图像大小并删除延迟加载脚本或将其替换为不需要 JavaScript 的现代 loading=”lazy” 属性。
解决方案2：在其他情况下，服务器端渲染会阻止必须在页面渲染之前下载JavaScript应用程序。 然而，这有时可能很难实现。
建议 2：确保以高优先级加载 LCP 映像
加载页面的 HTML 代码后，访问者的浏览器可能会发现，除了您的主图像之外，可能还需要加载大量附加资源，例如样式表。
此处的目标是确保加载更大的主图片以满足 Google 的最大内容绘制要求。
其他资源，如第三方分析脚本，不如您的主图像重要。
此外，在页面呈现后，您网站的 HTML 中引用的大多数图像都将位于首屏下方。 有些可能完全隐藏在嵌套的标题导航中。
因此，浏览器最初将所有图像请求的优先级设置为低。 页面渲染完成后，浏览器会找出哪些图像很重要并更改优先级。 您可以在下面的屏幕截图中看到一个示例，如优先级列中的星号所示。
DebugBear 屏幕截图显示以低初始优先级加载的 LCP 图像，2022 年 10 月瀑布图显示，虽然浏览器很早就知道该图像，但它并没有开始下载它，如灰色条所示。
如何修复：要解决此问题，您可以使用称为优先级提示的新浏览器功能。 如果将 fetchpriority=”high” 属性添加到 img 元素，浏览器将从头开始加载图像。
建议 3：不要使用 CSS 隐藏页面内容
有时您可能会查看请求瀑布，并且所有渲染阻止资源都已加载，但仍然没有显示页面内容。 这是怎么回事？
A/B 测试工具通常会隐藏页面内容，直到将测试变体应用于页面上的内容元素。 在这些情况下，浏览器已呈现页面，但所有内容都是透明的。
如果无法移除 A/B 测试工具怎么办？
如何修复：检查您是否可以将该工具配置为仅隐藏受 A/B 测试影响的内容。 或者，您可以检查是否有办法让 A/B 测试工具加载得更快。
DebugBear 屏幕截图显示了一个渲染幻灯片，其中内容被 A/B 测试工具隐藏，2022 年 10 月使用 DebugBear 监控您的站点速度
想要不断测试您的网站？ 试用我们的付费监控工具，免费试用 14 天。
这样，您可以检查您的性能优化是否有效，并在您的网站出现任何性能下降时收到警报。
显示 DebugBear 中网站速度趋势的屏幕截图，2022 年 10 月
屏幕截图显示 DebugBear 中的 Core Web Vitals 数据，2022 年 10 月