Return to site

SEO专业人士的瀑布图指南

正如我们现在所知,从SEO和用户体验的角度来看,网页的速度非常重要。更快的页面具有更高的搜索引擎排名,用户将访问更多页面并在快速表现的网站上转换更高的页面。简而言之,聪明的SEO专业人员还需要考虑优化性能和内容。

正如我们在上一篇文章中所讨论的,WebPageTest是一个非常好的免费工具,可用于优化您的网站性能。WebPageTest工具最有用的输出之一是称为瀑布图的图形。瀑布图是Web浏览器加载的所有资源的图形视图,用于向用户显示页面,显示加载这些资源的顺序以及加载每个资源所需的时间。分析这些资源的加载方式可以让您深入了解什么会降低您的网页速度,以及您可以修复哪些内容以加快速度。

瀑布图很像Microsoft Excel:它们在概念上很简单,功能非常强大,但大多数人并没有充分利用它们。在本文中,我们将展示SEO专业人员如何使用WebPageTest等工具创建的瀑布图来识别和改善其网站的性能和用户体验。

如何阅读瀑布图
如果您还没有这样做,请转到WebPageTest并对您的站点进行测试。结果完成后,单击第一个测试结果以查看瀑布。下面是瀑布图示例

如上所述,瀑布图是级联图表,显示Web浏览器如何加载和呈现网页。图中的每一行都是浏览器发出的单独请求。图表越高,加载网页的请求就越多。每行的宽度表示浏览器请求资源和下载响应所需的时间。

对于每一行,瀑布图使用多色条显示浏览器花费时间加载该资源的位置,例如:

了解请求的每个阶段非常重要,因为您可以通过减少每个阶段所花费的时间来提高站点的速度。以下是简要概述:

DNS查找[深绿] - 在浏览器与服务器通信之前,它必须执行DNS查找以将主机名转换为IP地址。关于这一点,你无能为力,幸运的是,并非所有请求都会发生。
初始连接[橙色] - 在浏览器发送请求之前,它必须创建TCP连接。这应该只发生在图表的前几行,否则会出现性能问题(稍后会详细介绍)。
SSL / TLS协商[紫色] - 如果您的页面通过SSL / TLS安全地加载资源,则这是浏览器设置该连接所花费的时间。由于Google现在使用HTTPS作为搜索排名因素,因此SSL / TLS协商越来越常见。
第一个字节的时间(TTFB)[绿色] - TTFB是请求前往服务器,服务器处理它以及响应的第一个字节使其进入浏览器所需的时间。我们将使用该度量来确定您的Web服务器是否功能不足或者您是否需要使用CDN。
下载(蓝色) - 这是浏览器下载响应的时间。该阶段越长,资源越大。理想情况下,您可以通过优化内容的大小来控制此阶段的长度。
您还会注意到瀑布图上的其他几行。有一条绿色垂直线显示何时“开始渲染”。正如我们在上一篇文章中所讨论的,直到Start Render发生,用户正在查看一个空白的白色屏幕。较大的“开始渲染”时间会使用户感觉您的网站速度缓慢且无法响应。瀑布中还有一些额外的数据点,例如“内容下载”,但这些是超出本文范围的更高级主题。

使用瀑布图优化性能
那么我们如何更快地加载网页并创建更好的用户体验呢?瀑布图为我们提供了3个极好的视觉辅助工具来帮助实现这一目标:

首先,我们可以优化我们的网站,以减少下载所有资源所需的时间。这减少了瀑布的宽度。瀑布越瘦,你的网站越快。
其次,我们可以减少浏览器加载页面所需的请求数量。这降低了瀑布的高度。你的瀑布越短越好。
最后,我们可以优化资源请求的顺序以改善渲染时间。这会将绿色的“ 开始渲染”行移动到左侧。离开这条线越远越好。
现在让我们更详细地介绍其中的每一个。

减少瀑布的宽度
我们可以通过减少下载每个资源所需的时间来减少瀑布的宽度。我们知道瀑布的每一行都使用颜色来表示获取资源的不同阶段。您经常看到不同的颜色会显示您可以进行的不同优化,以提高整体速度。

有很多橙子吗?Orange用于为您的站点建立的初始TCP连接。只有对特定主机名的前2-6个请求才需要创建TCP连接,之后重新使用现有连接。如果您在图表上看到大量橙色,则表示您的网站未使用持久连接。下面您可以看到未使用持久连接的站点的瀑布图,并记下每个请求行开头的橙色部分。

启用持久连接后,每个请求行的宽度将减少一半,因为浏览器不必与每个请求建立新连接。
有长而紫色的部分吗?紫色是执行SSL / TLS协商所花费的时间。如果您在同一站点上反复看到很多紫色,则表示您尚未针对TLS进行优化。在下面的图表摘录中,我们看到了2个HTTPS请求。一台服务器已经过适当优化,而另一台服务器的TLS配置不好:

要优化TLS性能,请参阅我们之前的Moz文章。
有没有长蓝色部分?Blue是下载响应所花费的时间。如果一行有一个大的蓝色部分,则很可能意味着响应(资源)非常大。加速站点的一个好方法是简单地减少必须发送到客户端的数据量。如果你看到很多蓝色,请问自己“为什么这个资源如此之大?” 您可以通过HTTP压缩,缩小或图像优化来减小它的大小。例如,在下图中,我们看到一个PNG图像需要很长时间才能下载。我们可以告诉因为长蓝色部分。

进一步的研究表明,这个图像大小接近1.1 MB!原来设计师忘了从Photoshop正确导出它。使用图像优化技术减少了这一行,使整个页面加载速度更快。
有很多绿色吗?可能有很多绿色。Green是等待获取内容的浏览器。很多时候你会看到浏览器等待80或90毫秒的行,只花1毫秒下载资源!减少绿色部分的最佳方法是将静态内容(如图像)移动到更靠近用户的内容分发网络(CDN)。稍后会详细介绍。
减少瀑布的高度
如果瀑布图很高,则浏览器必须发出大量加载页面的请求。减少请求数量的最佳方法是查看您的网页所包含的所有内容,并确定您是否真的需要全部内容。例如:

你看到很多CSS或JavaScript文件吗?下面是AOL网站的瀑布图片段,我不小心,请求48个单独的CSS文件!

如果您的网站正在加载大量单独的CSS或JavaScript文件,您应该尝试将它们与CMS插件组合或作为构建过程的一部分。组合文件可减少请求数量,从而提高整体页面速度。
你看到很多“小”(小于2kb)的JavaScript文件或CSS文件吗?请考虑通过内联<script>,<code>或<style>标记直接在HTML中包含这些文件的内容。
你看到很多302重定向?重定向显示为黄色突出显示的行,表示页面上通常过时或错误制作的链接。这会产生不必要的重定向,这只会不必要地增加瀑布的高度。将这些链接替换为指向新URL的直接链接。
改善渲染时间
回想一下,“开始渲染”时间表示用户首次在页面上看到除空白页面之外的内容。

什么是开始渲染时间?如果超过1.5秒,你应该尝试改进它。为此,首先查看“开始渲染”行的“上方和左侧”的所有资源。这表示应优化考虑的所有内容,以改善渲染时间。

以下是一些提示:

你看到任何加载JavaScript库的调用吗?JavaScript包括可以阻止页面呈现,如果可能的话,在页面中移动它们。
你看到很多单独的CSS项目的请求吗?浏览器等到所有CSS下载后才开始呈现页面。你能组合或内联任何这些CSS文件吗?
你看到外部字体了吗?使用外部字体时,浏览器在下载该字体之前不会绘制任何内容。如果可能,请尽量避免使用外部加载的字体。如果这是不可能的,请确保您正在消除任何不必要的302重定向以加载该字体,或者(甚至更好)考虑在您自己的网络服务器上本地托管该字体的副本。
例如,这是瀑布图的顶部:

绿色开始渲染线刚刚超过1秒,非常好。但是,如果查看该行的左侧,您可以看到一些优化。首先,有多个JS文件。除了jQuery之外,这些可能会推迟到以后。还有多个CSS文件。这些可以合并。这些优化将改善开始渲染时间。

您可能需要与设计人员和开发人员协调以实现这些优化。然而,结果非常值得。没有人喜欢看空的白色屏幕!

其他因素
我的服务器足够快吗?
我们知道服务器的第一个字节时间是搜索引擎排名的一个因素。幸运的是瀑布告诉你这个指标。只需查看图表的第一行即可。这应该显示浏览器如何下载基本HTML页面的时间信息。看看TTFB测量。如果它超过大约500毫秒,您的服务器可能会动力不足或未经优化。与您的托管服务提供商交谈以改善您的服务器功能 下面是一个瀑布图的示例,其中服务器花了将近10秒的时间来响应!这是一个缓慢的服务器!

在此处添加文本段落
All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly