快速加载的网站可提供良好的用户体验并有助于提高转化率。Google 最近还更新了其文档，以确认其排名系统使用了核心网络生命力指标。

准备好让您的网站更快了吗？以下 7 条提示可帮助您分析网站速度并确定潜在的优化方法。

1. 分析网站的网络请求瀑布

请求瀑布可视化可以准确地告诉您打开网站时发生的情况。例如：

• 下载了哪些资源？
• 资源何时开始加载，每个请求需要多长时间？
• 这与访问者在网站加载时看到的内容有何关联？

此信息可作为确定最有影响力的优化的基础。您可以在您的网站上运行免费的页面速度测试以生成瀑布视图。

请求瀑布提供了大量细节，看起来令人生畏。让我们来详细分析一下您需要寻找的内容。

要解释瀑布，请寻找网站加载过程中的三个关键里程碑：

• 首次字节时间（TTFB）：网站服务器需要多长时间返回 HTML 文档？
• 首次内容绘制（FCP）：第一页内容何时可见？
• 最大内容绘制（LCP）：最大的内容元素何时可见？

除非有重定向，否则 HTML 文档将是瀑布中的第一个请求。在 TTFB 里程碑之前，没有其他资源可以开始加载，也没有内容可见。因此，您的服务器 TTFB 代表 FCP 和 LCP 分数的最小值。

接下来，我们将查找阻止渲染的请求。这些请求是需要先加载重要的附加资源，然后页面内容才会显示出来。

在此示例中，我们可以看到有四个阻止渲染的 CSS 样式表请求。这些文件加载​​完成后，我们可以在右上角的渲染幻灯片中看到第一个内容。

为了优化 FCP，您可以：

• 彻底删除阻碍渲染的资源。
• 减少CSS文件的下载大小。
• 异步加载阻止渲染的脚本。
• 加快资源请求本身的速度。

例如，在上面的例子中，我们可以看到 app.css 文件大小超过 100 KB。这可能需要一些时间才能下载，尤其是在移动数据连接速度较慢的情况下。

为了加快请求速度，您还需要查看浏览器在打开页面时连接到的服务器。每个加载资源的新域都需要建立新连接，并且每个新服务器连接都需要一些时间来建立。

您可以通过查找主请求前面的三个小矩形来识别瀑布图中的服务器连接。这些矩形代表 DNS 查找、TCP 连接和 SSL 连接所需的网络往返次数。

最后，我们来看看 LCP 里程碑。如果最大的内容元素是图像，通常可以通过在瀑布视图中查找“LCP”徽章来清楚地看到这一点。

下载完 LCP 图像后，浏览器会快速开始更新页面并显示图像。您可以在瀑布视图中看到用红线标记的 LCP 指标。

为了更容易分析请求瀑布数据，许多性能工具（如DebugBear）还包括自动页面速度建议。

<img class="wp-image-438652 entered exited" src="data:;base64,” alt=”DebugBear 页面速度建议” width=”864″ height=”315″ data-lazy-srcset=”https://searchengineland.com/wp-content/seloads/2024/03/DebugBear-March-2024-Image-6.png.webp 864w,https://searchengineland.com/wp-content/seloads/2024/03/DebugBear-March-2024-Image-6-600×219.png.webp 600w,https://searchengineland.com/wp-content/seloads/2024/03/DebugBear-March-2024-Image-6-800×292.png.webp 800w,https://searchengineland.com/wp-content/seloads/2024/03/DebugBear-March-2024-Image-6-200×73.png.webp 200w,https://searchengineland.com/wp-content/seloads/2024/03/DebugBear-March-2024-Image-6-768×280.png.webp 768w” data-lazy-sizes=”(max-width: 864px) 100vw, 864px” data-lazy-src=”https://searchengineland.com/wp-content/seloads/2024/03/DebugBear-March-2024-Image-6.png.webp” />

 

2. 首先加载最重要的内容

加载网站时，不太重要的内容不应占用更重要的请求的带宽。

在上面的例子中，LCP 图像应用了延迟加载。这意味着浏览器不会优先考虑此资源。一旦页面开始渲染，浏览器就会意识到该图像实际上很重要，并且请求优先级会发生变化。

因此，图片加载得比较晚，其他请求也会在此时占用网络带宽。我们可以通过查看瀑布图中请求中的深蓝色线条来看到这一点。深蓝色线条显示每个请求的响应数据何时收到。

为了确保 LCP 图像优先，您可以：

• 确保它不是延迟加载的。
• 使用fetchpriority属性将其标记为高重要性。
• 考虑使用预加载标签来帮助浏览器尽早加载图像。

 

3. 减少早期关键请求的下载大小

由于带宽有限，并且加载大量数据需要在客户端和服务器之间进行多次网络往返，因此文件越大需要下载的时间就越长。

例如，此屏幕截图显示了一个较大的 CSS 文件：

答：当我们深入研究时，我们可以看到它包含许多嵌入为文本的图像。这意味着加载这些图像会阻止渲染，即使它们对页面并不重要，甚至可能根本不会用到。

要减小文件大小，您可以：

• 使用现代图像格式，如 WebP 和 Avif。
• 对文本内容（如 HTML、CSS 和 JavaScript）使用Brotli压缩。
• 分析您的HTML或CSS代码以识别嵌入的图像、字体和数据。

 

4. 将真实用户数据与实验室数据进行比较

Google 在其PageSpeed Insights工具中提供了大多数网站的真实用户数据。将这些数据与实验室Lighthouse测试的结果进行比较，可以帮助您更好地了解网站上的情况。 

实验室测试结果通常报告的指标比实际用户数据更差。这是因为 Lighthouse 测试使用的网络连接和 CPU 比大多数访问者的网络连接和 CPU 更慢。

实验室测试结果比真实用户数据更快的两个常见原因：

• PageSpeed Insights 测试报告的数据不可靠。
• 实验室测试正在触及缓存，而大多数真实用户都会遇到服务器响应缓慢的情况。

 

5. 检查你的网站性能随时间的变化

Google 根据Chrome 用户体验报告 (CrUX)提供的真实用户数据集也包含历史数据，尽管 PageSpeed Insights 中没有报告这些数据。通过查看网站性能随时间的变化情况，您可以了解问题出现的时间并找出根本原因。

要查看您网站的历史核心网络生命力数据，您可以运行 DebugBear核心网络生命力测试，然后检查Web 生命力选项卡以了解 25 周的趋势。

每个 CrUX 数据值涵盖连续 28 天的时间段，如果出现问题，它将在接下来的四周内逐渐影响您的分数。

 

6. 设置持续网站速度监控

如果您想在回归发生时立即捕获它（即部署了对网站速度产生负面影响的更改），您需要为您的网站设置页面速度监控。

DebugBear是一种监控服务，提供两种类型的监控：

• 基于实验室的测试：在受控的实验室环境中按照计划运行页面速度测试。
• 真实用户监控：了解访问者如何体验您的网站。

设置您的网站监控将在出现回归时提醒您，然后比较前后的数据以找出速度变慢的原因。

 

7. 查看加载时间以外的指标

网站性能不仅仅指通过 LCP 指标衡量的初始加载速度。Google 还会考虑网站对用户交互的响应速度，该指标通过3 月 12 日成为核心 Web 重要指标的交互到下一次绘制(INP) 指标来衡量。

虽然 LCP 主要取决于网络加载的内容，但 INP 会查看 CPU 处理情况以及页面处理交互和更新 UI 以准备下一次交互所需的时间。

测量 INP 需要用户交互，这使得在实验室环境中进行测试变得困难。有一些基于实验室的 INP 测试工具，如INP 调试器，但它们无法识别所有可能的用户交互，也无法告诉您用户最常与哪些元素交互。

为了改进与 Next Paint 的互动，您需要真实用户监控(RUM) 数据。这些数据可以告诉您：

• 哪些页面的 INP 速度较慢？
• 用户正在与哪些元素进行交互？
• 哪些脚本导致了延迟？

 

结论

要提高网站速度，首先必须了解是什么导致网站速度变慢。首先运行免费页面速度测试。

网站监控工具可帮助您跟踪一段时间内的核心 Web 指标并收到回归通知。您可以在此处开始免费试用 DebugBear 14 天。