О скорости сайта обычно пишут одинаково: сожмите картинки, включите кеш, уберите лишние скрипты. Мы измерили собственную главную страницу — и ни один из этих советов не касался проблемы.
Что показал замер
Мобильная оценка нашей главной: 63 балла. Раскладка по составляющим объясняет, куда они делись.
| Показатель | Значение | Вес | Потеряно баллов |
|---|---|---|---|
| Первое появление контента | 2,0 с | 10 | 1,6 |
| Индекс скорости | 5,7 с | 10 | 4,8 |
| Появление главного элемента (LCP) | 7,5 с | 25 | 24,0 |
| Время блокировки (TBT) | 310 мс | 30 | 6,9 |
| Сдвиг макета (CLS) | 0 | 25 | 0 |
Один показатель держит 24 балла из 32, которых не хватает до 95. Остальные вместе — восемь. Это и есть ответ на вопрос, с чего начинать.
Самый медленный элемент оказался абзацем
Дальше — самое интересное. Элемент, появление которого и даёт те 7,5 секунды, — это подзаголовок под главным заголовком. Текстовый абзац. Он весит несколько килобайт и не грузит ничего.
Раскладка времени объясняет, как такое возможно:
- 63 мс — ответ сервера;
- 2 495 мс — ожидание перед тем, как текст отрисуется.
Текст уже был в HTML. Но браузер не рисует его, пока не получит файл стилей — а тот запрашивается отдельно, после того как пришёл сам документ. Один дополнительный поход в сеть, и на мобильном соединении он стоит две с половиной секунды.
Вывод, противоречащий большинству советов: медленной была не загрузка, а ожидание. Сжимать здесь нечего — надо убрать сам запрос, а не уменьшить файл.
Почему это касается вас
Схема повторяемая и очень распространённая. Признаки, по которым она узнаётся:
- LCP заметно хуже остальных показателей;
- самый большой элемент — текст или заголовок, а не картинка;
- время ответа сервера мало, а «задержка отображения» велика.
Если это ваш случай, сжатие изображений не даст ничего: картинка не была проблемой. Работает другое — уменьшить количество запросов, от которых зависит первый показ.
- Измерьте публичный адресВнешним инструментом, не локально. Локальный прогон измеряет ваш компьютер.
- Найдите самый большой элементЕсли это текст или заголовок — проблема в запросе, а не в весе. Сжимать нечего.
- Посмотрите раскладку времениОтвет сервера отдельно, задержка отображения отдельно. Вторая цифра обычно больше в десятки раз.
- Убирайте запрос, а не байтыМеньше походов в сеть до первого показа. Это и есть та секунда, которой не хватает.
Ловушка измерения, в которую легко попасть
Измеряет ваш сайт
- время ответа сервера
- количество и размер запросов
- порядок загрузки стилей
- сдвиг макета
Это свойства страницы. Они одинаковы с любого компьютера.
Измеряет вашу машину
- время блокировки главного потока
- общий балл в локальном прогоне
- всё, что зависит от процессора
На загруженном ноутбуке эта цифра бывает вчетверо хуже реальной.
Это не теория: у нас самих оценка блокировки на локальной машине показала больше двух секунд, и из неё был сделан вывод, что высокий балл недостижим из-за рекламных тегов. Внешний замер публичного адреса дал 310 мс. Теги были ни при чём — виноват был загруженный ноутбук.
Правило отсюда простое: мерьте публичный адрес внешним инструментом. Локальный прогон годится для сравнения «до и после» на одной машине и не годится для утверждений о сайте.
Что это значит для конверсии
Прямой формулы «минус секунда — плюс столько процентов» не существует, и любая названная цифра описывает чужой сайт.
Практически значимо другое: скорость — это множитель, а не отдельный фактор. Человек, ушедший до появления оффера, не увидел ни заголовка, ни доказательств, ни формы. Все усилия, вложенные в страницу, умножаются на долю тех, кто дождался.
Именно поэтому скорость стоит в чек-листе лендинга рядом с формами, а не в отдельном техническом разделе.
С чего начать
Измерьте свою главную внешним инструментом и посмотрите две вещи: какой показатель забирает больше всего баллов и что является самым большим элементом. Если это текст — ищите лишний запрос, а не тяжёлую картинку.
Дефекты, которые находятся вместе с этим, собраны в чек-листе CRO: они устраняются без всякого теста.
Если нужен взгляд со стороны на конкретную страницу — посмотрите, как мы работаем с конверсией.