性能优化-核心指标-SI 的介绍与优化
什么是 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，转载请注明出处
