Скорость прелендинга: почему теряется трафик и что делать

Прелендинг теряет трафик, когда первый экран появляется слишком поздно, особенно на мобильном интернете. Почти всегда виноваты тяжёлые картинки, внешние скрипты, шрифты с чужого CDN и видео в первом экране. Большую часть этого можно исправить за один рабочий час: сжать изображения, встроить критичные стили и отложить всё, что не нужно для первого экрана.

Что тормозит одностраничный прелендинг

Текст на прелендинге почти ничего не весит. Тормозят его надстройки: четыре источника ниже встречаются чаще всего.

Тяжёлые изображения

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

Внешние скрипты

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

Шрифты с CDN

Веб-шрифт с внешнего сервиса добавляет запрос до того, как текст станет читаемым. Без стратегии показа вместо заголовка какое-то время видна пустота. Лишние начертания усугубляют проблему, а для прелендинга часто хватает системного шрифта или одного-двух начертаний.

Видео

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

Как проверить скорость

Платные сервисы не нужны, хватает трёх бесплатных инструментов:

• PageSpeed Insights даёт быстрый отчёт с приоритетными рекомендациями и разделяет мобильный и десктопный результат.
• Lighthouse в Chrome DevTools запускается локально и позволяет проверить страницу до публикации.
• WebPageTest показывает «водопад» загрузки: что и в каком порядке грузится, где возникают паузы.

Что смотреть в отчёте

Четыре вещи: когда появляется первый экран, какой элемент самый тяжёлый, какие ресурсы блокируют отрисовку и сколько запросов уходит на сторонние домены. Последнее удобно смотреть во вкладке Network в DevTools, отсортировав запросы по размеру и домену.

Как тестировать правильно

Выбирайте мобильный профиль и включайте ограничение сети: на быстром офисном Wi-Fi проблем не видно. Делайте несколько прогонов и ориентируйтесь на общую картину. Сравните страницу с пикселями и без них, так видно, сколько времени съедают сторонние коды. Общий подход к оценке данных описан в нашей методике.

Шпаргалка: симптом, причина, решение

Что сделать за час

Порядок такой, чтобы самый заметный эффект пришёл первым.

1. Сжать картинки

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

2. Встроить критичные стили

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

3. Отложить скрипты

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

4. Привести в порядок шрифты и видео

Оставьте минимум начертаний и задайте запасной шрифт на время загрузки основного. Автозапуск видео замените на постер с загрузкой по клику.

Частые ошибки

• Оптимизируют только на десктопе. Быстрый компьютер создаёт ложное спокойствие, а трафик чаще приходит с телефонов.
• Гонятся за оценкой, а не за ощущением. Красивый балл не гарантирует, что пользователь вовремя увидит оффер. Смотрите на момент появления первого экрана.
• Копят пиксели «на всякий случай». Каждый лишний код замедляет страницу. Оставьте те, по которым принимаются решения.
• Сжимают картинки до «мыла». Агрессивная компрессия портит креатив, страница выглядит дёшево. Проверяйте результат глазами.
• Игнорируют хостинг. Лёгкая страница на медленном сервере всё равно грузится долго. Другие типовые промахи собраны в разделе ошибок.

Вопрос–ответ

Почему прелендинг медленно грузится, хотя он состоит из одной страницы? Одна страница не значит лёгкая. Основной вес дают картинки, сторонние скрипты, шрифты и видео, а текст и разметка занимают малую часть объёма.

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

Какие инструменты использовать для проверки? PageSpeed Insights, Lighthouse в Chrome DevTools и WebPageTest, все бесплатные. Тестируйте с мобильным профилем и ограничением сети, делайте несколько прогонов.

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

Нужно ли отказываться от веб-шрифтов? Не обязательно. Сократите число начертаний и задайте запасной шрифт на время загрузки. Для многих прелендингов хватает системного.

Влияет ли хостинг на скорость страницы? Да, ответ сервера и расстояние до пользователя входят в общее время загрузки. Если после оптимизации страница всё равно медленная, проверьте площадку.