Тема блога

Speed Index

Speed Index показывает, насколько быстро пользователь видит содержимое страницы во время загрузки. Здесь разобрано, как рассчитывается метрика, где её смотреть, как интерпретировать результат и что проверять при высоком значении.

1материал

Материалы

Последние публикации

Все темы →

Что такое Speed Index

Speed Index, или SI, это лабораторная метрика производительности, которая показывает, насколько быстро видимая область страницы заполняется контентом во время загрузки. В отличие от показателей, фиксирующих один конкретный момент, Speed Index оценивает визуальный прогресс страницы на протяжении загрузки. Чем меньше полученное значение, тем быстрее пользователь видит содержимое первого экрана.

Метрика используется в Lighthouse и WebPageTest. В PageSpeed Insights Speed Index относится к лабораторным данным Lighthouse. Он не входит в Core Web Vitals и не является показателем полевых данных CrUX. В реальных пользовательских данных PageSpeed Insights основными Core Web Vitals остаются LCP, INP и CLS. Поэтому Speed Index полезен прежде всего для диагностики визуальной загрузки, а не как самостоятельная оценка реального пользовательского опыта.

Что именно измеряет Speed Index

Speed Index отвечает на вопрос, насколько быстро пользователь начинает видеть страницу и насколько быстро видимая часть интерфейса приобретает завершённый вид.

Представим две страницы, которые полностью заканчивают загрузку примерно одновременно. На первой заголовок, текст, навигация и основное изображение появляются постепенно с первых секунд. На второй большую часть времени пользователь видит почти пустой экран, после чего содержимое появляется практически одновременно. Первая страница обычно получит лучший Speed Index, поскольку её визуальный прогресс начинается раньше.

Именно поэтому значение нельзя трактовать как обычное время наступления одного события. Speed Index описывает весь процесс заполнения видимой области страницы. Такой подход отличает его от FCP и LCP.

Как рассчитывается Speed Index

Во время лабораторного теста Lighthouse фиксирует процесс загрузки страницы и анализирует изменение изображения между последовательными кадрами. На основе этой последовательности определяется, насколько завершённым выглядит экран в разные моменты загрузки. Полученный визуальный прогресс используется для расчёта Speed Index.

На результат влияет не только сам сайт, но и условия тестирования. Значение зависит от размера области просмотра, производительности устройства, сетевых условий и других параметров лабораторного запуска. Поэтому сравнивать результаты корректно только при одинаковом режиме тестирования.

Если после изменения кода Speed Index стал лучше в одном запуске, этого недостаточно для уверенного вывода. Лабораторные показатели могут колебаться. Практически полезнее выполнять несколько сопоставимых тестов и смотреть, сохраняется ли улучшение.

Где смотреть Speed Index

Speed Index можно увидеть в отчёте Lighthouse, в том числе при запуске Lighthouse через инструменты разработчика Chrome. Метрика также отображается в лабораторной части PageSpeed Insights.

Важно не путать этот результат с блоком реальных пользовательских данных PageSpeed Insights. Полевые показатели получают из Chrome User Experience Report, а Speed Index рассчитывается во время отдельного лабораторного запуска Lighthouse. По этой причине отсутствие Speed Index среди данных CrUX является нормальным.

Для анализа конкретной проблемы имеет смысл смотреть не только на итоговое число, но и на визуальную последовательность загрузки, диагностические рекомендации Lighthouse и другие показатели производительности.

Какие значения Speed Index считаются хорошими

Lighthouse использует разные ориентиры для мобильного и настольного тестирования.

Для мобильного режима значение до 3,4 секунды относится к быстрому диапазону. Результат от 3,4 до 5,8 секунды считается умеренным, а значение выше 5,8 секунды относится к медленному диапазону.

Для настольного режима границы строже. Значение до 1,3 секунды относится к быстрому диапазону, от 1,3 до 2,3 секунды к умеренному, выше 2,3 секунды к медленному.

Эти значения следует использовать именно в контексте Lighthouse. Сравнивать мобильный результат с настольным напрямую некорректно, поскольку условия и шкалы оценки отличаются.

Чем Speed Index отличается от FCP и LCP

Speed Index и FCP

First Contentful Paint показывает момент, когда браузер впервые выводит на экран текст, изображение или другой элемент содержимого. Это ранняя точка загрузки.

Speed Index оценивает не первый появившийся элемент, а дальнейшее визуальное заполнение области просмотра. Поэтому хороший FCP ещё не гарантирует хороший Speed Index. Страница может очень быстро вывести небольшой элемент, а остальное содержимое показать значительно позже.

Speed Index и LCP

Largest Contentful Paint фиксирует момент отображения крупнейшего учитываемого элемента содержимого в области просмотра. Speed Index рассматривает визуальный прогресс более широко и учитывает то, как заполняется экран в целом.

Метрики дополняют друг друга, но не являются взаимозаменяемыми. Страница может иметь приемлемый LCP и при этом визуально собираться постепенно, что отразится на Speed Index.

Speed Index и Core Web Vitals

Speed Index не относится к Core Web Vitals. Для оценки Core Web Vitals Google использует LCP, INP и CLS. Speed Index остаётся лабораторным диагностическим показателем и помогает понять, насколько быстро пользователь видит страницу во время контролируемого теста.

Поэтому улучшение Speed Index полезно рассматривать как часть работы над производительностью, но не следует подменять им анализ Core Web Vitals.

Почему Speed Index может быть высоким

Высокое значение означает, что видимая область страницы заполняется содержимым слишком поздно или слишком постепенно. Причину нужно искать в цепочке, которая участвует в формировании первого экрана.

Большая нагрузка на главный поток

Если браузер долго выполняет JavaScript или другую работу на главном потоке, отрисовка содержимого может задерживаться. Lighthouse отдельно рекомендует при проблемах со Speed Index уменьшать работу главного потока и время выполнения JavaScript.

Это особенно заметно на страницах, где до показа основного интерфейса необходимо выполнить большой объём клиентского кода.

Ресурсы, задерживающие отображение

CSS, JavaScript, шрифты и ресурсы первого экрана могут определять момент, когда пользователь увидит страницу в завершённом виде. Если критически важный ресурс обнаруживается или загружается поздно, визуальное заполнение экрана также сдвигается.

При диагностике важно определить конкретный ресурс или этап, а не пытаться механически уменьшить каждый файл на странице.

Позднее отображение текста

Lighthouse отдельно обращает внимание на ситуацию, когда текст остаётся невидимым во время загрузки веб шрифта. Если значительная часть первого экрана появляется только после завершения загрузки шрифтов, визуальный прогресс страницы ухудшается.

Как улучшить Speed Index

Работу стоит начинать с анализа того, что именно пользователь видит во время лабораторного запуска. Если первый экран долго остаётся пустым, причина отличается от ситуации, когда основной контент появляется быстро, но отдельные крупные элементы дорисовываются значительно позже.

Ускорить появление содержимого первого экрана

Критически важный контент должен становиться доступным браузеру как можно раньше. Следует проверить загрузку основных стилей, изображений первого экрана, шрифтов и ресурсов, без которых браузер не может сформировать первоначальный вид страницы.

Цель состоит не в том, чтобы одновременно загрузить все ресурсы сайта, а в том, чтобы не задерживать то содержимое, которое пользователь должен увидеть первым.

Сократить лишнюю работу JavaScript

Если значительная часть времени тратится на выполнение скриптов, следует определить наиболее тяжёлые задачи, проверить сторонний код и убрать ненужную работу из критического этапа загрузки. Уменьшение времени выполнения JavaScript относится к рекомендациям Lighthouse для улучшения Speed Index.

Проверить отображение шрифтов

Текст первого экрана не должен без необходимости оставаться невидимым до загрузки пользовательского шрифта. При проблемном результате необходимо проверить стратегию подключения шрифтов и фактическую последовательность появления текста.

Анализировать результат вместе с другими метриками

Оптимизация только одного Speed Index может привести к неверным приоритетам. Например, визуальная загрузка способна улучшиться, но реальный LCP или отзывчивость интерфейса останутся проблемными.

Lighthouse сам рекомендует при отсутствии специальной причины не концентрироваться исключительно на одной метрике, а анализировать общую производительность и связанные диагностические данные.

Почему Speed Index может меняться между тестами

Лабораторный тест воспроизводит отдельную загрузку страницы, поэтому результат не обязан быть абсолютно одинаковым при каждом запуске. На показатели могут влиять изменение сетевых условий, сторонние ресурсы, рекламные системы, эксперименты и особенности среды тестирования. Lighthouse отдельно предупреждает о вариативности результатов Performance.

Поэтому оптимизацию лучше оценивать по серии тестов в одинаковых условиях. Сравнение имеет смысл проводить между одинаковыми типами устройств и одинаковыми режимами тестирования.

Как правильно использовать Speed Index при SEO анализе

Speed Index полезен как диагностический показатель визуальной скорости страницы. Он помогает заметить ситуацию, когда первый экран формируется медленно, даже если отдельная точечная метрика выглядит приемлемо.

При этом сам Speed Index не следует рассматривать как замену Core Web Vitals или как самостоятельную цель поисковой оптимизации. Для SEO важнее определить, существует ли проблема пользовательского опыта, понять её техническую причину и проверить результат после исправления.

Если проблемы скорости связаны с техническим состоянием сайта, анализ производительности можно включать в комплексное продвижение сайта в поиске, где скорость рассматривается вместе с индексированием, структурой и другими техническими ограничениями проекта.