Wiki · Техническая оптимизация
Speed Index
Speed Index – это лабораторный показатель Lighthouse, который оценивает, как быстро первый экран страницы визуально заполняется содержимым во время загрузки. Значение выражено в секундах: чем оно меньше, тем раньше человек видит почти готовую страницу.
Возьмём две страницы, которые полностью загружаются за 3 секунды. Первая уже через секунду показывает почти весь первый экран и потом догружает мелочи. Вторая три секунды держит белый экран, а потом показывает всё разом. По времени загрузки они равны, но первая ощущается заметно быстрее. Показатель эту разницу видит, потому что оценивает весь процесс отрисовки, а не один момент.
Как Lighthouse считает Speed Index по кадрам
Lighthouse записывает видео загрузки первого экрана и для каждого кадра определяет, насколько он похож на финальный: на 0%, 40%, 90%. Затем складывает, сколько времени экран оставался недорисованным и насколько. Методика пришла из сервиса WebPageTest, в Lighthouse её считает модуль Speedline.
Условный расчёт для двух страниц из начала статьи:
| Момент | Страница А | Страница Б |
|---|---|---|
| от 0 до 1 с | белый экран | белый экран |
| от 1 до 3 с | готово 90% экрана | белый экран |
| 3 с | готово 100% | готово 100% |
| Speed Index | 1 + 2 × 0,1 = 1,2 с | 3 с |
Каждая секунда белого экрана добавляет целую секунду, а секунда почти готового экрана всего десятую часть. Поэтому показатель награждает страницы, которые быстро показывают основное и спокойно догружают остальное.
Пороги Lighthouse и место среди других показателей
| Оценка Lighthouse | Мобильные | Компьютеры |
|---|---|---|
| Быстро | до 3,4 с | до 1,3 с |
| Средне | 3,4–5,8 с | 1,3–2,3 с |
| Медленно | больше 5,8 с | больше 2,3 с |
В общей оценке производительности Lighthouse 10 у Speed Index вес 10%. Для сравнения: у Total Blocking Time 30%, у LCP и CLS по 25%.
От FCP и LCP индекс отличается тем, что смотрит на весь процесс, а не на один момент:
| Показатель | Что фиксирует | Входит в Core Web Vitals |
|---|---|---|
| FCP | Момент появления первого контента | Нет |
| LCP | Момент появления самого крупного элемента | Да |
| Speed Index | Весь ход заполнения первого экрана | Нет |
Главное отличие: индекс скорости существует только в лаборатории. Его нет в полевых данных реальных посетителей, нет в отчётах Search Console и нет среди Core Web Vitals. Это диагностический показатель, который подсказывает, где искать причину медленной отрисовки.
Где смотреть и как разобрать плохой Speed Index
В отчёте PageSpeed Insights показатель стоит в блоке лабораторных данных рядом с FCP, LCP, TBT и CLS. Ниже есть лента кадров загрузки: по ней хорошо видно, сколько времени экран был белым и когда появилось основное. В Chrome DevTools тот же отчёт строит вкладка Lighthouse, а детальную покадровую запись даёт вкладка Performance со снимками экрана.
Разбор обычно идёт так:
- Прогоните страницу в PageSpeed Insights в мобильном режиме три раза и возьмите типичное значение, а не лучшее. После правок замер повторяют в тех же условиях.
- Откройте ленту кадров и найдите момент, когда экран перестал быть пустым. Сравните его с FCP. Если между первым контентом и заполненным экраном большой разрыв, проблема в том, что догружается после старта отрисовки.
- Посмотрите в диагностике пункты про ресурсы, блокирующие отрисовку, и про время выполнения JavaScript.
- Проверьте глазами, нет ли на странице прелоадера, затемнения или блока, который появляется последним и занимает пол-экрана.
Так же удобно сравнивать себя с конкурентами: прогоните их похожие страницы тем же тестом и положите ленты кадров рядом. Нередко у соседа первый экран появляется за секунду, а у вас за три, хотя итоговые баллы почти равны.
Что держит белый экран и как его сократить
- Блокирующие CSS и JavaScript в head: пока они не загружены, браузер ничего не рисует. Критичные стили первого экрана встраивают в страницу, остальные загружают без блокировки.
- Сайт целиком собирается скриптом в браузере, и до выполнения JavaScript человек видит пустую страницу. Выход в том, чтобы отдавать готовый HTML первого экрана с сервера. Подробнее в статье JavaScript SEO: CSR и SSR.
- Прелоадер на весь экран, который висит, пока не загрузится всё. Для этой метрики это та же белая страница, так что его просто убирают.
- Веб-шрифты без запасного варианта: текст невидим, пока шрифт не скачался. С font-display: swap текст сразу виден системным шрифтом.
- Тяжёлая работа основного потока при загрузке: браузеру некогда рисовать. Сторонние скрипты сдвигают на после загрузки.
Speed Index и другие показатели загрузки мы разбираем в техническом аудите и улучшаем при доработке сайта.
Лента кадров, полевые данные и анимация: вопросы о Speed Index
Откуда взять Speed Index реальных посетителей?
Неоткуда: для расчёта нужна покадровая запись экрана, а снимать экраны посетителей браузер не даёт. У реальных людей вместо индекса смотрят FCP и LCP из полевых данных PageSpeed Insights.
Почему слайдер или анимация на первом экране портят Speed Index?
Готовность экрана считается по сходству каждого кадра с финальным. Пока слайды сменяют друг друга или блоки плавно выезжают, кадры не совпадают с последним, и для расчёта экран остаётся недорисованным. Человек страницу уже видит, а индекс продолжает расти.
Почему лента кадров в PageSpeed Insights не похожа на то, что вы видите у себя?
Тест открывает страницу как в первый раз, с пустым кешем, а в мобильном режиме ещё и имитирует недорогой телефон с медленным мобильным интернетом. У вас файлы сайта давно лежат в кеше браузера, а связь и процессор быстрее. Белый экран, которого вы ни разу не видели, у нового посетителя с телефона вполне реален.
Документация Lighthouse по Speed Index
- Chrome for Developers: Lighthouse, «Speed Index»
- Chrome for Developers: Lighthouse, «Performance scoring»
См. также: Скорость сайта, PageSpeed Insights, Core Web Vitals, Total Blocking Time.
Остались вопросы по теме «Speed Index»?
Напишите нам в Telegram или MAX. Ответит специалист, который отвечает за эту тему, или руководитель проектов в рабочее время.
Отвечает по темеСергей ПимкинВедущий SEO-специалистНад статьёй работали
Услуги
Услуги по теме
Кейсы
Кейсы по теме
Маркетинг · Медицина, центр репродуктивной медицины
SEO-продвижение клиники «Три Сердца»
Посетителей в 5,5 раза большеНа январь 2025 года: 5 500 посетителей в неделю вместо 1 000, обращение стоит 60–70 ₽
Маркетинг · Медицина
SEO-продвижение медцентра «Медюнион»
10 000 обращений в месяц из интернета3 года работы, ноябрь 2018 – октябрь 2021: больше 1 000 фраз в ТОП-10 при цели 800
Тарифы
Тарифы по теме
Стартовый тариф для небольшого бизнеса: наводим порядок на сайте и получаем первые заявки из Яндекса и Google.
- Техническая оптимизация сайта
- Контентная оптимизация
- Семантическое ядро под город или регион
- Настройка Яндекс Вебмастера и Google Search Console
- Цели в Яндекс Метрике
- Ежемесячный отчёт по позициям, трафику и заявкам
- Оптимизация поведенческих факторов
- Оптимизация коммерческих факторов и E-A-T
Тариф для растущего бизнеса. Работаем на количество заявок: считаем звонки через коллтрекинг и дорабатываем сайт под конверсию.
- Техническая оптимизация сайта
- Контентная оптимизация
- Семантическое ядро под город или регион
- Настройка Яндекс Вебмастера и Google Search Console
- Цели в Яндекс Метрике
- Ежемесячный отчёт по позициям, трафику и заявкам
- Оптимизация поведенческих факторов
- Оптимизация коммерческих факторов и E-A-T
Для масштабирования бизнеса: SEO, A/B-тесты, карточки в Яндекс.Бизнесе и 2ГИС, техподдержка сайта. Нейросети берут на себя рутину, итог проверяют специалисты.
- Техническая оптимизация сайта
- Контентная оптимизация
- Семантическое ядро под город или регион
- Настройка Яндекс Вебмастера и Google Search Console
- Цели в Яндекс Метрике
- Ежемесячный отчёт по позициям, трафику и заявкам
- Оптимизация поведенческих факторов
- Оптимизация коммерческих факторов и E-A-T
Проверим ваш сайт бесплатно
Экспресс-аудит за 24 часа: скорость, индексация, мета-теги, коммерческие факторы и цели Метрики.