减少瀑布的宽度 我们可以通过减少下载每个资源所需的时间来减少瀑布的宽度。我们知道,瀑布的每一行都用一种颜色来代表获取资源的不同阶段。您看到不同颜色的次数表明您可以进行不同的调整以提高整体速度。 橘子太多了吗?橙色表示与您的站点建立的初始 TCP 连接。
只有对给定主机名的前
个请求才需要建立 TCP 连接,之后将重用现有连接。如果您在图表上看到很多橙色,。下面您可以 whatsapp 数据库 看到未使用持久连接的站点的瀑布图,并注意每个请求队列开头的橙色部分连接 – 错误一旦启用持久连接,每个请求队列的宽度将减半,因为浏览器不需要为每个请求建立新连接。
是否有长的紫色部分?
紫色是 SSL/TLS 协商所花费的时间。如果您在同一网站上反复看到大量紫色,则意味着您尚未 以找到最适合您的代发货业务的策略 针对 TLS 进行优化。在下面的图表片段中,我们看到 2 个 HTTPS 请求。一台服务器已正确优化,而另一台服务器的 TLS 配置很差:要提高 TLS 性能,请参阅我们之前的 Moz 文章。
有长蓝色的部分吗?
蓝色是下载响应所花费的时间。如果一行有很大一部分蓝色,则可能意味着响应(资源)太大。加快站点速 消費者數據 度的最佳方法之一是减少发送到客户端的数据量。如果您看到很多蓝色,请问自己“为什么该资源这么大?”您可以通过 HTTP 压缩、缩小或图像优化来减小其大小。
例如,在下图中,我们看到一个
PNG 图像需要很长时间才能下载。我们可以从长蓝色部分看出。长下载 进一步的研究表明,该图像的大小约为 1.1 MB!结果设计师忘记从 Photoshop 中正确导出它。图像优化技术的使用减少了这个队列,并使整体页面加载速度更快。
有很多绿色吗?绿色的可能性有很多。
GreenBrowser 正在等待接收内容。很多时候你会看到一个队列,浏览器等待了 80 或 90 毫秒,只花了 1 毫秒下载资源!减少绿色部分的最佳方法是将静态内容(例如图像)移动到距离客户更近的内容交付网络 (CDN)。
稍后会详细介绍。 降低瀑布的高度 如果瀑布图很长,浏览器就必须发出大量请求来加载页面。减少请求数量的最佳方法是检查页面上的所有内容并确定您是否真的需要全部内容。例如: 您是否看到大量 CSS 或 JavaScript 文件?下面是来自 AOL 网站的瀑布图片段,我没骗你,它请求 48 个单独的 CSS 文件!愚蠢的如果您的网站正在加载大量单独的 CSS 或 JavaScript 文件,您应该尝试将它们与 CMS 插件结合起来或作为构建过程的一部分。