Скорость сайта: что действительно влияет на заявки, а что миф
Какие задержки человек замечает, а какие нет, откуда берутся лишние секунды на мобильном интернете и почему сто баллов в синтетическом тесте не означают, что сайт быстрый.
- Заявки теряет не общий балл, а задержка до первого понятного экрана
- Главный источник лишних секунд — несжатые картинки и шрифты, а не код
- Сто баллов в тесте и быстрый сайт у клиента — разные вещи
- Начинать стоит с первого экрана: остальное можно грузить позже
Про скорость говорят много и в основном баллами. Но человек не видит баллов: он видит, за сколько появился текст, дёрнулась ли страница под пальцем и успел ли он нажать кнопку. Разберём, что из этого правда влияет на заявки.
Что человек реально замечает
| Задержка | Как воспринимается | Что делать |
|---|---|---|
| До 1 секунды | Мгновенно | Ничего |
| 1–2 секунды | Нормально | Держать этот уровень |
| 2–4 секунды | Сайт «думает», часть уходит | Разбираться с первым экраном |
| Больше 4 секунд | Уходит большинство пришедших из рекламы | Чинить до запуска трафика |
Откуда берутся лишние секунды
- Фотографии в исходном размере: снимок с телефона весит несколько мегабайт, а показывается шириной в 400 точек
- Шрифты: четыре начертания вместо двух, загружаемые до отрисовки текста
- Видео-фон на первом экране — самый дорогой способ произвести впечатление
- Сторонние скрипты: чаты, виджеты, пиксели, счётчики — каждый тянет свой файл
- Слайдер, который грузит все слайды сразу, хотя виден только первый
Мифы
- 01
«Нужно сто баллов»
Синтетический тест считает условную машину и условную сеть. Восемьдесят баллов при быстром первом экране лучше, чем девяносто пять при пустом белом поле на две секунды.
- 02
«Дело в хостинге»
Хостинг виноват, когда сервер долго отдаёт ответ. Чаще время уходит уже в браузере — на картинки, шрифты и чужие скрипты.
- 03
«Скорость важна только для поиска»
Поиск учитывает её умеренно. Гораздо заметнее она бьёт по платному трафику, где каждый визит куплен.
- 04
«Сайт на конструкторе всегда медленный»
Не всегда. Медленным его делают те же картинки и виджеты. Разница в том, что на конструкторе меньше рычагов, чтобы это исправить.
Порядок работ, который даёт результат
- 01
Сожмите картинки первого экрана
Современный формат, размер под реальную ширину показа. Обычно это минус мегабайты и минус секунда без единой строки кода.
- 02
Оставьте два начертания шрифта
Обычное и полужирное. Остальное — украшение, за которое платит посетитель.
- 03
Отложите всё, что ниже экрана
Картинки и блоки, которых не видно, грузятся по мере прокрутки.
- 04
Пересчитайте виджеты
Чат, карта, отзывы, пиксели. Уберите те, которыми никто не пользуется, остальные подключайте после отрисовки.
- 05
Зафиксируйте размеры блоков
Чтобы страница не прыгала, когда всё догрузится.
Как читать результат проверки
В любом отчёте о скорости смотрят на три величины и игнорируют остальное, пока эти три не в порядке.
| Что смотреть | Что означает | Норма |
|---|---|---|
| Время ответа сервера | Сколько сервер думал до первого байта | До 600 мс |
| Вес разметки и ресурсов первого экрана | Сколько всего скачивает браузер, чтобы показать верх страницы | До 1 МБ |
| Появление основного текста | Когда человек видит заголовок и оффер | До 2 с на мобильном |
Конструктор или свой код
Способы ускорения зависят от того, что у вас под капотом, и честнее это знать заранее.
| Что ускоряем | Конструктор | Свой код |
|---|---|---|
| Картинки | Обычно сжимает сам, но не всегда под нужный размер | Полный контроль: формат, размеры, отложенная загрузка |
| Шрифты | Ограниченный набор, лишние начертания убираются в настройках | Остаётся ровно то, что используется на странице |
| Виджеты | Часто грузятся все сразу | Подключаются после отрисовки первого экрана |
| Потолок | Упирается в шаблон платформы | Ограничен только временем работы |
Один день на ускорение
- 01
Утро: замер
Снимите текущие значения на телефоне и запишите. Без исходной точки вы не поймёте, помогло ли.
- 02
День: картинки и шрифты
Самая большая доля выигрыша. Пересохраните изображения первого экрана и уберите лишние начертания.
- 03
После обеда: виджеты
Отключите то, чем не пользуетесь, остальное переведите на загрузку после отрисовки.
- 04
Вечер: повторный замер
Сравните с утренними цифрами и зафиксируйте, что дало эффект. Это пригодится на следующей странице.
- Первый экран показывается меньше чем за 2 секунды на телефоне
- Картинки сжаты и отдаются под нужный размер
- Шрифтов не больше двух начертаний
- Ниже первого экрана всё грузится по мере прокрутки
- Сторонние виджеты подключены после отрисовки
- Страница не прыгает, пока догружается
- Проверено на мобильном интернете, а не на Wi-Fi
Насколько скорость влияет на позиции в поиске?
Влияет, но умеренно и вместе с остальным. Практический эффект заметнее в рекламе: та же кампания приносит больше заявок при том же бюджете.
Стоит ли переделывать сайт ради скорости?
Редко. Чаще хватает работы с картинками, шрифтами и виджетами. Переделка нужна, когда медленно из-за архитектуры: тяжёлый шаблон, десятки плагинов.
Что делать с видео на первом экране?
Заменить на статичный кадр с кнопкой воспроизведения. Тогда видео грузится только у тех, кто его включил, а остальные сразу видят страницу.
Проверьте страницу по ссылке: покажем время ответа, вес разметки и что на ней мешает оставить заявку.
Проверить страницуС этим мы помогаем
Читайте дальше
Проверка сайта перед запуском рекламы: 12 пунктов за пятнадцать минут
Что посмотреть на странице до того, как на неё пойдёт платный трафик. Список проверок, которые ловят самые дорогие ошибки: от отсутствия цены до формы, которая молча не отправляется.
Структура лендинга, которая приносит заявки: 9 блоков по порядку
Какие блоки нужны, в каком порядке их ставить и что писать в каждом. С чек-листом, по которому можно проверить свою страницу за десять минут.
Мобильная версия: 10 ошибок, которые видно с первого касания
Страница может выглядеть на телефоне прилично и при этом мешать оставить заявку: в кнопку не попасть, поле увеличивает экран, клавиатура не та. Десять ошибок, которые чинятся за день, и нормы, по которым их проверять.