Курс «Режим разработчика для интернет-маркетолога», урок 4 из 5
Клик по объявлению уже оплачен, а посетитель всё ещё смотрит на белый экран. Медленная страница съедает бюджет незаметно: в отчётах это выглядит как высокий процент отказов и дорогие заявки. Хорошая новость: главные причины тормозов видны в DevTools за несколько минут.
Вы проверяете лендинг на рабочем компьютере с быстрым интернетом, а посетитель из РСЯ или VK открывает его со смартфона в метро. Чтобы увидеть сайт его глазами, в DevTools есть ограничение скорости сети — throttling.
Время в тренажёре ускорено, но секундомер показывает реальное время загрузки. Смотрите, когда появляется текст, а когда — главная картинка.
Картинки — самая частая причина медленных лендингов. Фотограф прислал снимок 4000 пикселей в ширину на 2–5 МБ, его загрузили на сайт как есть, а показывается он в блоке шириной 1200 пикселей. Посетитель скачивает лишние мегабайты, которых даже не видит.
Как найти. Во вкладке Network нажмите кнопку Img — останутся только картинки — и кликните по заголовку столбца Size, чтобы отсортировать по размеру. Тяжёлые файлы окажутся наверху. Реальный размер картинки на странице видно во вкладке Elements: наведите мышь на адрес картинки в теге img, и подсказка покажет, в каком размере она показывается и какое у неё исходное разрешение.
Правила для картинок:
loading="lazy" откладывает их загрузку, пока посетитель не прокрутит страницу. Главной картинке первого экрана он, наоборот, вреден.Перед вами все запросы страницы. Найдите самую тяжёлую картинку и подберите для неё разумный размер и формат.
Чем сжимать. Удобный бесплатный инструмент — Squoosh (squoosh.app): загружаете картинку, выбираете ширину и формат, сразу видите размер и качество. Многие конструкторы, включая Тильду, умеют сами отдавать уменьшенные копии картинок. Но исходник всё равно лучше загружать разумного размера.
Google и Яндекс оценивают скорость не одной цифрой «время загрузки», а несколькими метриками, которые описывают ощущения посетителя. Главные три называются Core Web Vitals:
| Метрика | Что измеряет | Хорошо |
|---|---|---|
| LCP | Когда появился самый крупный элемент первого экрана: главная картинка или заголовок | до 2,5 с |
| INP | Как быстро страница реагирует на клики и нажатия | до 200 мс |
| CLS | Насколько элементы прыгают и сдвигаются при загрузке | до 0,1 |
Lighthouse — вкладка DevTools, которая загружает страницу, имитируя средний смартфон с медленным интернетом, и выставляет оценку от 0 до 100. Вместо INP он показывает TBT — время, когда страница «зависла» и не реагирует, потому что выполняет скрипты. Ещё две метрики: FCP — когда появился первый текст, и Speed Index — как быстро заполняется экран.
Ниже оценки Lighthouse даёт список рекомендаций с примерной экономией. Его удобно отдать разработчику как готовое техзадание.
Оценка Lighthouse скачет. Это лабораторный замер одного прогона, и он зависит от вашего компьютера и расширений. Запускайте 2–3 раза в окне инкогнито и смотрите на порядок цифр, а не на единицы. Реальные данные посетителей популярных сайтов показывает сервис PageSpeed Insights, а в Метрике есть отчёт о времени загрузки страниц.
Запустите анализ, разберитесь в метриках и выберите исправления, которые вытянут оценку в зелёную зону.
Знакомая ситуация: вы целитесь в кнопку, а в последний момент сверху догружается баннер, всё съезжает вниз, и палец попадает не туда. Это сдвиг макета, его измеряет метрика CLS. Он раздражает посетителей и крадёт клики по кнопкам.
Частые причины: картинки и баннеры без заданных размеров, всплывающие сверху плашки про cookies и акции, рекламные блоки и виджеты, которые появляются с задержкой, смена шрифта после загрузки.
Увидеть сдвиги помогает вкладка Rendering: меню ⋮ в правом верхнем углу DevTools → More tools → Rendering. Галочка Layout Shift Regions подсвечивает синим каждую область, которая сдвинулась. А вкладка Performance показывает текущие значения LCP, CLS и INP прямо во время работы со страницей.
Перед вами первый экран лендинга. Обновите страницу и посмотрите, что происходит с кнопками в первую секунду.
Онлайн-чат, квиз, обратный звонок, второй счётчик, пиксели, виджет отзывов — каждый сервис добавляет свои скрипты. По отдельности они кажутся лёгкими, а вместе могут весить больше всего сайта и надолго занимать телефон посетителя.
Чтобы оценить вклад конкретного виджета, в Network кликните по его запросу правой кнопкой и выберите Block request URL. Обновите страницу: она загрузится так, как будто виджета нет. Если разница в скорости заметная, стоит обсудить с клиентом, нужен ли этот сервис и можно ли загружать его позже — например, через несколько секунд после открытия страницы. Не забудьте потом снять блокировку.
Откройте свой лендинг на Slow 4G с Disable cache и засеките, через сколько секунд появляется кнопка заявки. Найдите три самые тяжёлые картинки и прогоните главную через Squoosh. Запустите Lighthouse в режиме Mobile и выпишите три рекомендации с наибольшей экономией — это готовый список задач для разработчика.
Разберём, что происходит при отправке формы и почему «лиды пропадают», проверим передачу меток в заявку и посмотрим, какие счётчики, виджеты и сервисы стоят на сайтах конкурентов.