什么是 SI

速度指数 (SI, Speed Index) 衡量页面加载期间内容的视觉显示速度。SI 测量页面加载期间内容在视觉上填充的速度，分数越低越好。对于此指标，重点关注的是首屏内容的渲染进度，而不是单个元素的加载时间。

在此加载时间轴中，SI 通过计算每个时间点的视觉完成度来衡量页面加载的整体速度。

在上图中所示的加载时间轴中，SI 通过分析每个时间点页面的视觉完成百分比来计算得出。页面内容填充得越快，SI 分数就越低（越好）。

您会发现，SI 与其他指标如 FCP 和 LCP 不同，它不是测量单个时间点，而是衡量整个加载过程中的视觉进度，这使得它能够更全面地反映用户感知的加载速度。

SI 得分多少算好

为了提供良好的用户体验，网站应尽量将速度指数控制在 3.4 秒或更短的时间。为确保大多数用户都能达到此目标值，一个合适的衡量阈值是网页加载时间的第 75 个百分位数，并按移动设备和桌面设备进行细分。

更详细的数据可以参考 lighthouse 性能分计算

如何获取 SI

在实际开发中，SI 通常通过性能测试工具来获取，因为它需要分析视频帧来计算视觉完成度：

// 使用 Lighthouse API 获取 SI
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function getSpeedIndex(url) {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'json', port: chrome.port};
  const runnerResult = await lighthouse(url, options);

  const speedIndex = runnerResult.lhr.audits['speed-index'].numericValue;
  console.log('Speed Index:', speedIndex, 'ms');

  await chrome.kill();
  return speedIndex;
}

Speed Index 的计算需要通过视频分析来确定每个时间点的视觉完成度，因此通常依赖专业的性能测试工具。

通过测试 本网站的 SI 数值是 1.2s，在 3.4s 以内，属于性能优秀的。也验证了我们在 Lighthouse 性能分计算过程详解 过程中的高分结果

如何优化 SI

SI 反映的是页面内容的视觉填充速度，因此优化重点是加快首屏内容的渲染和减少渲染阻塞

🌐 优化网络

网络优化是web性能绕不开的话题，我们已经总结在 前端性能优化-网络篇 感兴趣的直接查阅即可。

这里给到优化思维导图：

🚀 优化关键渲染路径​

• 优先加载首屏内容​：使用 preload 预加载关键资源，确保首屏内容优先渲染

• 内联关键 CSS​：将首屏所需的 CSS 直接内联，避免额外的网络请求延迟

• 延迟非关键资源​：使用 async、defer 或动态加载非首屏资源

• 减少渲染阻塞：避免大型 JavaScript 文件阻塞页面渲染

⚙️ 渐进式渲染优化

• 骨架屏（Skeleton Screen）​：在内容加载时显示页面结构，提升感知性能

• 分块渲染​：将页面内容分成多个块，优先渲染重要内容

• 避免布局抖动​：为图片和广告预留空间，减少 CLS

🖼️ 资源优化

• 图片优化​：使用 WebP/AVIF 格式，合理设置图片尺寸

• 字体优化​：使用 font-display: swap 避免字体阻塞渲染

• 代码分割​：按需加载 JavaScript 代码，减少初始包大小

• 服务端渲染（SSR）​：预渲染首屏内容，加快初始显示

📊 监控和测量

• 持续监控​：使用 Lighthouse CI 或 WebPageTest 定期测试 SI

• 真实用户监控（RUM）​：收集真实用户的性能数据

• A/B 测试​：对比不同优化策略的效果

原文地址：https://webfem.com/post/performance-si，转载请注明出处