SI
Speed Index (SI) - это метрика производительности, которая измеряет, насколько быстро визуально наполняется содержимое страницы в процессе загрузки. В отличие от метрик, фиксирующих 1 момент (например, LCP), Speed Index оценивает весь процесс рендеринга, показывая, насколько плавно и постепенно появляется контент над сгибом (the fold).
SI - это лабораторная метрика, которая рассчитывается путём анализа видео загрузки страницы и суммирования промежутков времени, в течение которых экран был не полностью заполнен финальным контентом.
Значение метрики
[править]Низкий Speed Index означает, что пользователь быстро видит результат загрузки и может начать взаимодействовать с контентом, даже если какие-то элементы внизу страницы ещё догружаются. Высокий SI указывает на то, что страница долго остаётся пустой или частично заполненной, что создаёт ощущение медленной работы.
Как рассчитывается Speed Index
[править]Процесс расчёта SI включает несколько шагов:
- Запись видео процесса загрузки страницы с частотой несколько кадров в секунду.
- Сравнение каждого кадра с финальным состоянием страницы и расчёт процента визуальной завершённости для каждого кадра.
- Вычисление интегральной площади над кривой визуального прогресса. Чем быстрее страница достигает 100% визуальной завершённости, тем меньше площадь и тем лучше (ниже) показатель SI.
- Числовое значение SI выражается в миллисекундах.
Например, если страница достигает 60% визуальной завершённости за первую секунду, а оставшиеся 40% - за четвёртую, SI будет выше (хуже), чем если бы она плавно набирала 25% каждую секунду.
Факторы, влияющие на Speed Index
[править]На SI влияет всё, что задерживает отрисовку пикселей на экране:
- Медленная загрузка критического CSS и JavaScript, блокирующего рендеринг.
- Отсутствие явных размеров (width/height) у изображений, что заставляет браузер перерисовывать страницу по мере их загрузки.
- Загрузка веб-шрифтов с неверными параметрами (font-display), вызывающая мигание или скрытие текста.
- Любые инлайн-скрипты, которые выполняются до того, как браузер сможет отрисовать контент.
Как улучшить Speed Index
[править]Оптимизация SI тесно связана с улучшением LCP и TBT, но имеет свою специфику.
- Минимизация критического пути рендеринга: Оптимизировать порядок загрузки ресурсов, необходимых для отображения первого экрана.
- Встроенный критический CSS: Размещать стили, необходимые для верхней части страницы, непосредственно в HTML (<style>...</style>), чтобы браузеру не приходилось ждать загрузки внешнего CSS-файла.
- Оптимизация доставки шрифтов: Использовать font-display: swap, чтобы текст отображался системным шрифтом до загрузки пользовательского.
- Атрибуты размеров для медиа: Всегда указывать width и height для изображений и видео, чтобы браузер мог зарезервировать под них место ещё до загрузки, предотвращая сдвиги и перерисовки.
- Ленивая загрузка (Lazy Loading): Откладывать загрузку изображений и iframe, которые находятся за пределами первого экрана. Однако важно не применять ленивую загрузку к LCP-элементу.
Где посмотреть Speed Index
[править]SI можно увидеть в отчётах таких инструментов, как Lighthouse и WebPageTest. В отличие от Core Web Vitals, SI не является официальным фактором ранжирования Google, но остаётся незаменимым инструментом для диагностики и тонкой настройки воспринимаемой производительности сайта.
