Проверить скорость лендинга: чем тестировать прелендинг

Для быстрой проверки скорости прелендинга хватит Google PageSpeed Insights и Lighthouse, для глубокого разбора загрузки нужен WebPageTest, а мобильную вёрстку смотрим в Chrome DevTools device mode и обязательно на реальном телефоне. Ни один сервис не заменяет остальные: они отвечают на разные вопросы, поэтому перед заливкой прогоните страницу минимум через два из них. Как ускорить саму сборку, читайте в разделе про скорость прелендинга.

Что проверяем и почему это влияет на трафик

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

Скорость первого экрана

Первый экран — это то, что видно без прокрутки: заголовок, главная картинка, кнопка. Если при мобильном интернете экран пуст, человек закрывает вкладку. Для арбитражника это оплаченный клик, потерянный до начала диалога с оффером.

Вес страницы

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

Мобильная вёрстка

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

Отсутствие горизонтальной прокрутки

Если страница шире экрана, пользователь видит «уезжающий» контент и полосу прокрутки снизу. Частые причины: картинка с фиксированной шириной, длинная ссылка без переноса, блок с жёстко заданными размерами, забытый мета-тег viewport.

Критерии выбора инструмента

Лабораторные и полевые данные. Лабораторные получены в контролируемых условиях: один запуск, заданное устройство и сеть. Их удобно сравнивать до и после правок. Полевые собираются от реальных посетителей и появляются только у страниц с достаточным трафиком; у свежего прелендинга на новом домене их обычно нет.

Что нужно на выходе. Кому-то достаточно общей оценки, кому-то нужен список причин, а для разбора «почему долго» нужен водопад загрузки — последовательность запросов во времени.

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

Инструменты проверки скорости

Google PageSpeed Insights

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

Как читать: сначала блок Core Web Vitals (если он есть), затем рекомендации: они показывают, что именно замедляет страницу. Для арбитража приоритетна мобильная вкладка.

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

GTmetrix

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

Как читать: начните со сводки, затем откройте водопад и найдите самые длинные запросы. Плюсы: наглядный отчёт, сравнение замеров. Минусы: базовые проверки бесплатны, часть настроек зависит от тарифа; актуальные условия смотрите на сайте сервиса.

WebPageTest

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

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

Lighthouse в Chrome

Аудит запускается во вкладке DevTools и работает с локальной сборкой, поэтому прелендинг можно проверить до заливки. Категории отчёта: Performance, Accessibility, Best Practices, SEO.

Как читать: смотрите Performance и список возможностей для улучшения. Запускайте в режиме инкогнито без расширений, иначе они искажают результат. Плюсы: бесплатный, не нужен публичный адрес. Минусы: результат зависит от мощности компьютера и его текущей нагрузки.

Проверка мобильной вёрстки

Chrome DevTools device mode

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

Реальный телефон

Эмуляция не показывает реальную работу касаний, шрифты, поведение адресной строки и скорость на живой связи. Откройте страницу на двух телефонах (Android и iOS) и пройдите путь посетителя до кнопки.

Чек-лист

• Есть мета-тег viewport, страница масштабируется по ширине экрана.
• Горизонтальной прокрутки нет ни на одной ширине.
• Текст читается без зума, строки не слипаются.
• Кнопки достаточно крупные, рядом нет элементов, на которые легко попасть случайно.
• Заголовок и главная кнопка видны на первом экране.
• Картинки не выходят за границы и не растягиваются.
• Всплывающие элементы не перекрывают контент и закрываются.
• Форма или кнопка работают с касания; о выборе между ними — в материале про кнопку и форму.

Сводная таблица

Как выбрать

Для быстрой проверки перед запуском берите PageSpeed Insights: вставили адрес и получили список правок. Если страница ещё на локальной машине, запускайте Lighthouse. Когда непонятно, почему страница грузится долго, или нужен конкретный регион, подключайте GTmetrix или WebPageTest. Для вёрстки всегда связка: device mode для быстрого просмотра и реальный телефон для финальной проверки.

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

Наш вывод

Лучшая связка для большинства: Lighthouse на этапе сборки, PageSpeed Insights после публикации, WebPageTest при разборе проблем, а мобильную вёрстку подтверждаем на реальном телефоне. Критерии оценки: что инструмент показывает, насколько понятен результат, можно ли проверить страницу до заливки, доступен ли он бесплатно и насколько повторяемы замеры.

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

Чем проверить скорость лендинга, если нет опыта?

Начните с PageSpeed Insights: вставляете адрес, получаете оценку и понятные рекомендации. Исправьте самые заметные пункты и перепроверьте.

Можно ли проверить прелендинг до заливки на хостинг?

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

Почему результаты разных сервисов отличаются?

У них разные серверы, локации, профили устройств и настройки сети. Сравнивайте замеры одного инструмента до и после правок, а не разные сервисы между собой.

Достаточно ли проверки в DevTools без реального телефона?

Нет. Эмулятор не воспроизводит касания, реальную связь и особенности браузеров. Финальную проверку делайте на живом телефоне.