优化 Web 性能：了解瀑布图

瀑布图是表示网站资源如何下载、由引擎解析的图表，它让我们有机会查看资源之间的顺序和依赖关系。 它有助于确定加载过程中发生重要事件的位置。 他们还可以让用户轻松看到他们的网站性能的好坏，从而准确显示哪些速度正在减慢您的网站。

Dotcom-Monitor平台中的瀑布图可帮助用户识别页面加载过程中发生重要事件的位置。 瀑布图让我们看到多个任务的级联效应，在几秒钟内，用户可以看到网站的性能有多糟糕/良好，例如有多少资源阻止并行下载或有多少行存在。 用户在设备上具有摘要，饼图上具有设备统计信息的描述性可视化。 用户还可以在浏览器窗口中观看实际的 URL 加载视频。

下面的屏幕截图是amazon.com瀑布图的示例，用于介绍瀑布图的外观。 正如您所看到的，在页面加载期间，会发挥许多不同的元素。 其中一些因素包括：

• URL
• 测试位置
• 浏览器（浏览器，火狐，互联网浏览器，移动浏览器等…
• 连接
• 测试次数
• 重复视图

瀑布图中使用的元素

交互式滑块：交互式滑块是每个元素以毫秒为单位性能的指示器。 在下图中，它指向箭头。 用户可以拖动交互式滑块以查看正在加载的元素以及时间点。 在此屏幕截图中，您可以看到突出显示的元素正在以第 531 毫秒加载。

加载时间网格：下面的突出显示区域称为加载时间网格。 它显示为每个元素加载所需的时间。

元素列表：元素存在于网页中，显示在元素列表中。 元素的扩展可以是 HTML、CSS、GIF 等。

元素性能：用户可以获得瀑布图中存在的每个元素的性能信息。

当用户单击特定元素按钮时，性能页面会欢迎他们，如下所示。

通过分析性能页面，用户对响应详细信息有了更深入的了解。 他们可以选择所需的是，并释放鼠标按钮以显示详细信息。 用户还可以通过关注红色标记区域来观察性能问题，这意味着存在性能下降期。

单个元素的加载时间详细信息：在瀑布图中，当用户将光标移动到特定条形上时，他会看到加载时间详细信息，这些详细信息是DnsTime，ConnectTime，SSLTime，RequestTime，FirstByteTime，ResponseTime，StartTime，EndTime，速度，指向红色椭圆形。

颜色编码说明：在 Dotcom 监视器平台中，加载时间详细信息的表示由以下颜色定义：

Navigation Timings： 它们可以显示为瀑布图中的列，以显示导航开始、重定向开始、重定向结束、提取开始、域查找开始、域查找结束、连接启动、安全连接启动、连接结束、请求启动、响应启动、响应结束、卸载事件开始、卸载事件结束、DOM 加载、DOM 交互、DOM 内容加载事件开始、DOM 内容加载事件结束，DOM 完成、加载事件开始和加载事件结束与颜色编码（如下所示在红色椭圆形）。

请务必注意，在 Dotcom 监视器平台中，用户可以在浏览器窗口中观看实际 URL 加载视频的功能（如下所示）。

通过了解瀑布图优化 Web 性能

网站的性能和速度起着巨大的作用。 如果您的网站速度不够快，用户不会等待它完成加载。 快速网站可提高转化率，并引导您在搜索引擎上表现良好。 为了了解网站的速度，使用瀑布图。 瀑布图可帮助您识别问题源，是诊断网页速度减慢的极好方法。

在瀑布图中，通过查找超过 1MB 的文件的大小可能会导致您的网站变慢。 借助瀑布图中的时间轴，用户能够发现资源加载的不同阶段，并了解哪些 阶段 会减慢其网站的速度。 下面介绍了一些阶段：

• 接收。 下载文件所需的时间。 这是时间线的第一阶段。 大型文件（如非优化的图像）会延迟下载时间并吸收更多带宽，从而导致网站上的延迟。 解决这一具体问题的解决方案是，用户应通过减小图像大小来优化媒体，同时不降低图像的质量。 为了提高带宽可用性，用户应将映像保留在云服务器上。
• 等待时间。 服务器为生成响应而捕获的时间。 如果等待时间过多，则可能意味着网络服务器过载，或者可能存在低效代码，必须由软件开发人员通过查找 Bug 和更正代码来修复该代码。 此外，缓存实用程序可能会减少等待时间。 在这种情况下，用户应从共享托管转移到专用托管。
• 排队的请求。 包括方便的连接HTTP/HTTP2，HTTP身份验证，CSS或JavaScript的执行，SSL连接时间，是时间线的重要阶段。
• DNS 查找。 包括 DNS 解析的时间，并为用户提供一大线索，是什么正在减慢网站的速度。 通常，由于 DNS 查找，大多数脚本会减慢网站的速度。

当用户在瀑布图的帮助下识别网页速度减慢的问题时，他们可以开始提出解决问题的解决方案。 下面就体现了一些问题及其解决办法。

向插件

即使是初学者用户也能通过观察瀑布图来快速了解网站速度放缓的具体原因。 例如，长柱表示相关元素加载时间过长，红色文本表示提取数据时出错，柱线之间的长间隙表示没有请求的时间。

如何使网站加载更快

通过使用瀑布图，我们可以通过更快地加载网页来创造出色的用户体验。

减小瀑布的宽度

网站性能可以通过减少下载资源所需的时间来提高，从而减小瀑布图的宽度。

如果瀑布图中有长长的紫色条
。 紫色是指执行 SSL/TLS 协商所花费的时间。 如果用户连续面对紫色，则表示网站未针对 TLS 进行优化。 用户必须优化 TLS 性能。

如果瀑布图里有很多橘子。 橙色表示为您的网站建立的初始 TCP 连接。 只有 2-6 个特定主机名的请求应创建 TCP 连接。 在 2-6 个请求后，将重用现有连接。 当用户面临大量橙色时，他们必须了解网站不使用持久连接。 建立持久连接时，每个请求的宽度将是一半，因为 Web 浏览器不会与每个请求建立新连接。

如果瀑布图中有长长的蓝色条
。 蓝色表示下载响应所花费的时间。 如果有一个长蓝色柱线，则很有可能是因为资源太大。 减小文件的文件大小有助于解决此问题。 用户可以通过图像优化或 HTTP 压缩减小大小。

如果有太多的绿色瀑布图
。 绿色表示浏览器正在等待获取内容。 要减少绿色，用户应将静态内容移动到 CDN。

降低瀑布图的高度

可以通过减少浏览器加载网页所需的请求数来提高网站速度，从而降低瀑布的高度。 用户必须查看每个页面中的所有内容，并决定他们是否真正需要它。

如果有太多的JavaScript/CSS文件小于2kb。

用户必须通过内联将这些文件的内容直接包含在 HTML 中， , or

标签。

如果瀑布图中有太多的 JavaScript/CSS 文件
。 用户必须将它们与 CMS 插件或作为生成过程的一部分进行组合。 此操作将减少发出的请求数，提高页面速度。

如果有太多的302重定向
。 黄色行表示重定向，这意味着页面上的链接被错误制作或过时，从而产生不必要的重定向，从而增加瀑布的高度。 解决办法是用直接链接替换这些链接。

增加渲染时间

为了缩短渲染时间，用户应优化资源请求的顺序，从而将绿色“开始渲染”行向左移动。

如果对单独的 CSS 文件的请求太多
。 在浏览器开始呈现页面之前，它们会等待，直到下载所有 CSS。 用户应内联或合并这些 CSS 文件。

如果用户看到调用加载 JavaScript 库
。 JavaScript 包括可能会阻止页面呈现。 用户应在页面中移动这些较低的内容。

如果用户看到外部字体
。 在浏览器下载外部字体之前，它不会绘制任何内容。 用户应避免使用外部字体。

第一次访问和重复访问。 什么是更重要的？

根据用户的访问，可以创建两种类型的瀑布图：第一次访问和重复访问。 有什么区别？

空缓存（第一视图）：用户首次访问网站，并且没有缓存的数据。 典型的基于浏览器的工具在发出请求之前会清除缓存。 换句话说，人们是第一次访问该网站。

缓存模式（重复访问）：用户第二次访问网站，从用户的角度模拟第二次访问，其中包括现在缓存在本地存储中的所有文件。 换句话说，因为人们事先访问了您的网站，现在他们可能有您的图像，CSS兑现在他们的浏览器，所以系统不必提供太多给他们。

在下面的屏幕截图中，您可以看到第一次访问瀑布图和重复访问瀑布图是多么不同。

需要实现的重要事项之一是，空缓存需要 6.8 秒才能加载，而重复缓存模式需要 1.9 秒。

如果网站运行良好，则在比较计时方面也是如此，空缓存比缓存版本占用更多时间。 原因是在第一次访问中，工具在发出请求之前将清空缓存，在重复访问中，系统将具有可缓存在本地存储中的文件，从而缩短加载网站的时间。

缓存模式（重复视图）图表的行数较少，这意味着加载的资源更少。 这是使用高效缓存的网站的一个很好的例子。

在不更改站点上的任何内容的情况下，由于缓存的元素，重复访问响应速度会更快。 第一次访问将比重复访问需要更多的时间。 如果网站上出现问题，使网站速度减慢，用户将更正。 他们再次测试网站。 它们考虑了地理位置、CDN 服务器和 PoP（存在点）等因素。 他们从瀑布图上可以看到哪个元素正在减慢该过程。 也许网站使用了太多的CPU。 更正后，他们可以再次测试网站。

首次访问很重要，因为用户了解下载图片和其他资源所需的时间。 重复访问也很重要，因为缓存过程后，用户应评估加载其余项目所需的时间。 此外，用户通过查看第一次访问和重复访问的瀑布图来观察缓存哪些资源。 这是用户如何理解网站的性能和资源的内容问题。

想要了解哪些元素可能会减慢您的网站速度？ 运行免费网站速度测试，并通过瀑布图和性能报告查看结果。

如何使用瀑布图来监视正确的 CDN 分布

内容交付网络 （CDN） 是经过优化的地理分布服务器组，用于向最终用户提供静态内容。 此静态内容几乎可以是任何类型的数据，但 CDN 通常用于提供网页及其相关文件、音频、流式视频和大型软件包。

CDN 利用率

CDN 的边缘服务器通过缩小网站资源与其访问者之间的差距来提高速度。 用户无需直接向网站的来源发出请求，而是连接到提供商拥有的几个 CDN 分发平台。 请求传播得越近，所保存的时间就越多。 此外，CDN 托管可以容纳文件压缩，从而改进整体浏览，因为较小的文件大小相当于更快的加载速度。

使用瀑布图监视 CDN

在下面的瀑布图的屏幕截图中，”监视 URL”区域表示所有单个元素的列表，以及其大小和性能。

如果用户正在利用 CDN，他们可能会看到许多文件和资源来自该源，这是确定 CDN 是否正确配置的一种方式。

你需要CDN吗？

瀑布图允许用户发现延迟如何影响网站的速度。 回到本文前面的颜色编码图表，黄色条表示 Web 浏览器正在等待来自域名服务器 （DNS） 的数据。 通常，100ms 等待时间被接受为正常时间，而 400ms 被视为缓慢。 当存在速度问题时，它可以被解释为资源需要太多的时间下载或其大小过大。 此外，这可能意味着 Web 服务器的传输速度太慢。 对于此特定问题，使用 CDN 可能是减少等待时间的解决方案。

此外，如果用户遇到太多的等待时间来获得响应，则可能意味着网站的内容在物理上远离访问者。 为了能够决定是否需要 CDN，必须知道服务器的位置。 为此，可以使用 Dotcom-Monitor 这样的平台来监视离服务器最远的位置。 查看瀑布图和行的请求和资源。 如果等待时间超过 100 毫秒，用户应考虑使用 CDN。

尝试完整的
Dotcom-Monitor平台免费30天
。