图中的每一行都是浏览器发出的单独请求。图表越长，加载网页的请求就越多。下载响应所需的时间。 对于每一行，瀑布图使用多色条来显示浏览器将时间花在加载该资源的位置，例如： 瀑布排更好 了解应用程序的每个阶段非常重要，因为您可以通过减少每个阶段所花费的时间来提高站点的速度。
以下是简要概述：
DNS 查找 [深绿色] – 在浏览器与服务器通信之前，它必须执行 DNS 查找以将主机 电话号码数据 名转换为 IP 地址。对此您无能为力，幸运的是，并非所有应用程序都会发生这种情况。 初始连接 [橙色] – 浏览器必须先建立 TCP 连接，然后才能发送请求。
这应该只发生在图表的前几行，否则会出现性能问题（稍后会详细介绍）。 SSL/TLS 协商 [紫色] – 如果您的页面通过 SSL/TLS 安全地加载资源，则这是浏览器设置该连接所花费的时间。随着 Google 现在使用 HTTPS 作为搜索排名因素，SSL/TLS 通信越来越普遍。
第一个字节的时间 (TTFB) [绿色] –
TTFB 是请求到达服务器、服务器处理该请求以及将响应的第一个字节传递到浏 昂贵的滚筒这是高价直销的绝佳例子 览器所需的时间。我们将使用这些测量结果来确定您的 Web 服务器是否功能不足或者您是否需要使用 CDN。 下载（蓝色）——这是浏览器下载响应所花费的时间。
这个阶段越长，资源就越大
理想情况下，您可以通过优化内容的大小来控制此阶段的长度。 您还会在瀑布图上看 消費者數據 到其他一些线。有一条绿色垂直线显示何时发生“开始渲染”。正如我们在上一篇文章中所讨论的，在开始渲染发生之前，用户会看到一个空白的屏幕。较长的启动渲染时间会让用户感觉您的网站速度缓慢且反应迟钝。
瀑布有一些额外的数据点
例如“内容下载”，但这些是更高级的主题，超出了本文的范围。 使用瀑布图优化性能 那么我们如何让网页加载速度更快并创造更好的用户体验呢？瀑布图为我们提供了 3 个很好的视觉辅助工具来帮助我们实现这一目标： 首先，我们可以优化我们的网站以减少下载所有资源所需的时间。
这减少了瀑布的宽度。瀑布越细，您的网站速度就越快。 其次，我们可以减少浏览器加载页面所需的请求数量。这降低了瀑布的高度。瀑布越小越好。 最后，我们可以优化资源请求的顺序以缩短渲染时间。这会将绿色起始渲染线移至左侧。线留得越远越好。 现在让我们更详细地考虑每一个。