DNS 查找 [深绿色] - 在浏览器与服务器通信之前，它必须执行 DNS 查找以将主机名转换为 IP 地址。对此你无能为力，而且幸运的是，这种情况不会发生在所有应用程序中。
初始连接 [橙色] - 在浏览器发送请求之前，必须建立 TCP 连接。这应该只发生在图表的前几行，否则会出现性能问题（稍后会详细介绍）。
SSL/TLS 协商 [紫色] - 如果您的页面通过 SSL/TLS 安全地加载资源，则这是浏览器建立该连接所花费的时间。 Google 现在使用HTTPS作为搜索排名因素，并且 SSL/TLS 交互变得越来越普遍。
第一个字节时间 (TTFB) [绿色] - TTFB 是请求到达服务器、服务器处理请求以及将响应的第一个字节传送到浏览器所需的时间。我们将使用测量结果来确定您的网络服务器是否动力不足或者您是否需要使用 CDN。
下载（蓝色） ——这是浏览器下载响应所花费的时间。这个阶段越长，资源就越大。理想情况下，您可以通过优化内容的大小来控制此阶段的长度。
您还会注意到瀑布图上的其他一些线条。有一条绿色垂 阿曼移动数据库 直线显示“开始渲染”的时间。正如我们在上一篇文章中讨论的那样，直到开始渲染发生之前，用户看到的都是一片空白的屏幕。较长的启动渲染时间会让用户感觉您的网站运行缓慢且没有响应。瀑布图中还有一些额外的数据点，例如“内容下载”，但这些是更高级的主题，超出了本文的范围。
那么我们如何让网页加载更快并创造更好的用户体验呢？瀑布图为我们提供了 3 个很好的视觉辅助工具来帮助实现这一目标：
首先，我们可以优化我们的网站，以减少下载所有资源所需的时间。这减少了瀑布的宽度。瀑布越薄，您的网站速度就越快。
其次，我们可以减少浏览器加载页面所需的请求数量。这降低了瀑布的高度。瀑布越小越好。
最后，我们可以优化资源请求的顺序以改善渲染时间。这会将绿色起始渲染线向左移动。这条线越往左越好。
现在让我们更详细地看一下每一个。