速度指数(Speed Index):它是什么以及如何为此优化您的网站

1,808 阅读7分钟

考虑页面速度时,速度指数 (SI) 是一个有趣的指标。它绝对是您页面性能的一个指标,但它与其他以用户为中心的指标(例如First Contentful PaintLargest Contentful Paint )完全不同。SI 表示您的网站在首屏加载的速度。或者换句话说,当用户视口中的所有内容完全可见时。查看页面的加载时间时,您不太可能因速度指数而受到惩罚或奖励。这不是忽视它的理由。作为一个单一的指标,它是少数包含多个其他指标的指标之一,可以让您对网站的整体速度、效率和性能有一个全面的了解。

什么是速度指数?

Lighthouse 是 Google 的 PageSpeed Insights 支柱,它会查看多个性能指标来对您的网站进行评分。速度指数 (SI) 就是其中之一,报告将以秒为单位显示时间,而不是像其他一些指标那样以毫秒为单位。谷歌将 SI 定义为“页面内容可见填充的速度”。

很直截了当,对吧?

Speed Index 不考虑后端脚本或其他非绘制负载。不过,它们确实会影响它。SI 只是衡量用户完整查看您的内容所需的时间。那是踢球者。充分。虽然 LCP 等其他指标是在显示内容的最大部分时测量的,但速度指数考虑了实际应该显示的任何和所有内容

这不是整体页面速度的衡量标准。这考虑到浏览器何时呈现所有元素。包括影响性能的不可见脚本和元素。但是,如果您想很好地衡量用户何时认为页面已完全加载,那么 SI 是值得关注的指标。由于它以用户为中心,SI 可以很好地指示整体站点的健康状况,以及站点用户体验 (UX)的基线。

如何测量速度指数

与大多数网站性能指标一样,最常用的工具之一是 Google 自己的PageSpeed Insights。这个工具也是它返回的结果中最特别的工具之一。即使是最完善的网站,它也是相对挑剔的。PageSpeed Insights 最常根据过去 28 天的收集数据为您的网站提供实验室数据。但是,如果您有足够多的访问者通过 Chrome 将信息传递回 Google,您也可以从报告中获取真实的 现场数据。不过,并不是每个网站都能得到这个。

如您所见,其中许多指标的速度都是绿色的。这表明它们“好”。这显然是您想要您的网站的地方。但是,速度指数是 4.0 秒和橙色。用户要等很长时间才能看到首屏上的所有内容。

什么是良好的速度指数分数?

PageSpeed Insights 使用以下分数对您网站的速度指数进行排名并相应地对其进行颜色编码:

  • 绿色(良好)– 0 到 3.4 秒
  • 橙色(中等)– 3.4 至 5.8 秒
  • 红色(慢)——超过 5.8 秒

正如我们之前所说,PageSpeed Insights 在其测量中非常关键。如果您处于橙色或红色状态,您可能需要使用GTmetrix或 Pingdom 的Speed Test等工具来查看他们的实时数据显示的内容。我们认为最好在不同时间使用多种工具测试您的网站,以获得最佳的整体性能图片。

如何优化您的速度指数分数

您可以采取一些步骤来优化您的 Speed Index 分数。如果您已经尝试优化您的网站以提高任何类型的页面速度(或者,从技术上讲,降低),那么您可能在某种程度上也影响了您的 SI 分数。我们将向您展示一些专门针对您的 SI 时间的方法,以便您的页面尽快加载,从而为您的访问者提供最佳体验。

减少渲染阻塞资源

更具体地说,减少 JavaScript 执行时间是提高速度指数分数的主要方法之一。渲染阻止资源是通过优先加载阻止您网站的其他部分加载的脚本和代码。不是站点同时加载不同的元素,而是一些元素暂停所有其他元素,直到它们完成。

这会降低您网站的速度指数。为了解决这个问题,您可以推迟加载任意数量的脚本和代码位,直到可见元素绘制到 DOM 之后。识别罪魁祸首实际上相对容易,因为您可以使用Chrome 开发工具在加载时查看您的网站,该工具将指示哪些元素正在停止渲染。

减少站点的主线程工作

与渲染阻止资源一样,您可以通过加载占用服务器大量处理能力的不同元素来限制站点的性能。减少这些可以帮助将站点更快地推送到浏览器。

最简单的解决方案是 停止使用如此多的 JavaScriptGTmetrix说得最好:

一般来说,页面的 JavaScript 越多,解析/编译过程就越长;导致等待用户查看内容并与您的页面交互的时间更长。

我们认识到这可能并不容易。您已将网站设计为以某种方式运行。但是,您可能可以删除未使用的代码,并且您可能能够优化您正在加载到您的站点中的任何第三方JavaScript 。另外,缩小你的 JavaScript。

在 JS 审核之上,确保缩小 CSS 和 HTML。这将减轻更多的主线程压力。缓存和优化插件通常也有这些选项。

速度指数常见问题

速度指数是一个具有复杂后果的简单概念。我们想回答一些关于 SI 的常见问题,以帮助您尽可能优化您的网站。

速度指数如何适应我网站的整体性能?

速度指数作为一个单一的指标,可以很好地表明您的网站在许多不同领域的表现。因为它考虑了完全可见的首屏内容,所以您不仅可以将其用作衡量用户感知加载量的指标,还可以粗略估计您的网站在许多不同领域的表现。

就您的网站正在做什么而言,它实际上并没有为您提供很多信息。它可以被视为一个包罗万象的指标,正如 GTmetrix 所说的那样,它是“一个有用的整体基准,用于评估您网站的整体性能。”

我应该特别关注我的速度指数分数吗?

可能不是,不。

虽然对您的站点进行基准测试非常有用,但关注其他更细化的问题,例如首次内容绘制 ( FCP )、最大内容绘制 ( LCP )、首字节时间 ( TTFB ) 和首次输入延迟 ( FID )更重要。您可以采取任意数量的步骤来单独改进这些步骤,从而提高您的速度指数。当作为整体基准时,您可以看到您的优化在 SI 中的效果如何。

结论

页面速度优化是网站所有者战斗的永无止境的战斗。您必须在可用性、体验和性能之间取得平衡,而找到这种平衡可能很困难。当测试在这么多不同的元素上返回这么多不同的分数时,很难知道把你的精力和资源放在哪里。速度指数可以帮助解决这个问题,它是一个单一的指标,可以显示您的网站在您调整网站性能的其他更具体部分时的表现。