在考虑页面速度时，速度指数 (SI) 是一个有趣的指标。 它绝对是您页面性能的指标，但它与其他以用户为中心的指标（例如 First Contentful Paint 和 Largest Contentful Paint）完全不同。 SI 表示您的网站加载首屏的速度。 或者换句话说，当用户视口中的所有内容都完全可见时。 查看页面的加载时间时，您不太可能因速度指数而受到惩罚或奖励。 这不是忽视它的理由。 作为一个单一的指标，它是为数不多的包含多个其他指标的指标之一，可以让您对网站的整体速度、效率和性能有一个全面的了解。
订阅我们的 YouTube 频道
什么是速度指数？
Lighthouse 是 Google PageSpeed Insights 的支柱，它会查看多个性能指标来为您的网站评分。 速度指数 (SI) 就是其中之一，报告将以秒为单位显示时间，而不是像其他一些指标一样以毫秒为单位。 Google 将 SI 定义为“页面内容可见填充的速度”。
很直接，对吧？
速度指数不考虑后端脚本或其他非绘制负载。 不过，它们确实会影响它。 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 的速度测试之类的工具来查看其实时数据显示的内容。 我们认为最好在不同时间使用多种工具测试您的网站，以获得最佳整体性能图。
如何优化您的速度指数得分
您可以采取多个步骤来优化您的速度指数分数。 如果您已经尝试优化您的网站以提高（或从技术上讲，降低）页面速度，那么您可能也以某种方式影响了您的 SI 分数。 我们将向您展示几种专门针对您的 SI 时间的方法，以便您的页面尽快加载，从而为您的访问者提供最佳体验。
减少渲染阻塞资源
更具体地说，减少 JavaScript 执行时间是提高速度指数得分的最佳方法之一。 渲染阻塞资源是脚本和代码，它们优先阻止您网站的其他部分加载。 与站点同时加载不同的元素不同，一些元素会暂停所有其他元素，直到它们完成。
这会降低您网站的速度指数。 为了解决这个问题，您可以推迟加载任意数量的脚本和代码位，直到可见元素绘制到 DOM 之后。 识别罪魁祸首实际上相对容易，因为您可以使用 Chrome Dev Tools 在您的网站加载时查看您的网站，并且该工具将指出是什么阻止了元素的渲染。
此外，WordPress 用户可以使用 W3 Total Cache 或 WP Rocket 等缓存插件（或站点优化插件）来处理此问题。 通常这些插件有一个简单的切换来延迟渲染阻塞资源。
Divi 用户也具有阻止此类资源的主要优势，因为主题选项允许您切换渲染阻止 CSS 延迟以及 jQuery 脚本。 最重要的是，主题的关键 CSS 功能分解了大量代码，这些代码可能会延迟您网站的内容并导致它们比其他方式加载得更快。 虽然其中一些是切换，但 Divi 会自动启用其他。 在大多数情况下，安装 Divi 应该会立即帮助您获得 SI 分数。
减少站点的主线程工作
与渲染阻塞资源一样，您可以通过加载占用服务器大量处理能力的不同元素来限制站点的性能。 减少这些可以帮助更快地将站点推送到浏览器。
最简单的解决方案是 停止使用这么多 JavaScript. GTmetrix 说得最好：
一般来说，页面的 JavaScript 越多，解析/编译过程就越长； 导致用户查看内容和与您的页面交互的等待时间更长。
我们认识到这可能并不容易。 您已将网站设计为以某种方式运行。 但是，您可能会删除未使用的代码，并且您可以优化加载到站点中的任何第三方 JavaScript。 另外，缩小您的 JavaScript。
在 JS 审计之上，确保你缩小了你的 CSS 和 HTML。 这将减轻更多的主线程压力。 缓存和优化插件通常也有这些选项。
Divi 用户再次在这里占据一席之地，因为该主题会自动将 CSS 和 JavaScript 缩小并将其拆分为一口大小的块，以提高吞吐量，从而消除对主线程大量关注的需要。
速度指数常见问题
速度指数是一个具有复杂影响的简单概念。 我们想回答一些关于 SI 的常见问题，以帮助您尽可能优化您的网站。
速度指数如何适应我网站的整体性能？
速度指数作为一个单一的指标，可以很好地表明您的网站在许多不同领域的表现。 由于它考虑了完全可见的首屏内容，因此您不仅可以将其用作衡量用户感知负载的指标，还可以粗略估计您的网站在许多不同区域的表现。
它实际上并没有为您提供很多关于您的网站正在做什么的信息。 它可以被视为一个包罗万象的指标，正如 GTmetrix 所说，它是“一个有用的整体基准，用于评估您网站的整体性能。”
我应该特别关注我的速度指数分数吗？
可能不是，不是。
虽然对您的网站进行基准测试非常有用，但关注其他更精细的问题，例如首次内容绘制 (FCP)、最大内容绘制 (LCP)、首字节时间 (TTFB) 和首次输入延迟 (FID)更重要。 您可以采取任意数量的步骤来单独改进这些步骤，从而提高您的速度指数。 当作为整体基准时，您可以看到您的优化通过 SI 的效果如何。
结论
页面速度优化是网站所有者永无止境的战斗。 您必须在可用性、体验和性能之间取得平衡，找到这种平衡可能很困难。 当测试在如此多的不同元素上返回如此多的不同分数时，可能很难知道将精力和资源放在哪里。 速度指数可以帮助解决这个问题，作为一个单一的指标，可以显示您的网站在您调整网站性能的其他更具体部分时的表现。
多年来，您为优化网站的速度指数做了哪些工作？
HappyDrawing/shutterstock.com 的文章特色图片
