Лендинг ощущается быстрым, если первый экран - заголовок, обложка и кнопка - прорисовывается за секунду, даже когда остальная страница еще подгружается. Скорость загрузки сайта по счетчикам и скорость на глаз - разные вещи: можно ускорить сайт до зеленых цифр в PageSpeed и не заметить разницы, а можно обойтись без глубокой доработки и получить страницу с быстрой загрузкой сайта на вид.
Что заставляет посетителя чувствовать, что сайт тормозит
За скорость обычно отвечает одна цифра - время полной загрузки. Но посетитель не сидит с секундомером. Он смотрит на экран первые полторы-две секунды и за это время решает, остаться или закрыть вкладку. Если в эти секунды на экране пусто или картинка прыгает вниз, кажется, что сайт медленный, даже если полная загрузка укладывается в три секунды.
В моей практике разница между реальным и ощущаемым временем доходит до двух-трех раз. Лендинг с честными 2,8 секунды по счетчику воспринимается быстрее конкурента с 1,9 секунды, если у конкурента первый экран рисуется рывками. Ускорить сайт по метрике и ускорить сайт на ощупь - разные задачи, и вторая обычно дешевле первой.
Что видит человек в первую секунду
На большинстве лендингов первый экран - это заголовок, короткий подзаголовок, кнопка и картинка или видео на фоне. Браузер должен успеть отрисовать текст и кнопку раньше, чем блоки с портфолио, отзывами и формой заявки. Метрика LCP (Largest Contentful Paint на web.dev) как раз про этот момент: не когда сайт полностью готов, а когда на экране появляется самый крупный заметный элемент. Порог хорошего результата - 2,5 секунды.
Посетитель не читает отчет PageSpeed. Он либо видит кнопку через секунду, либо закрывает вкладку.
Проверить просто: откройте лендинг на телефоне через мобильный интернет и засеките, когда появляется кнопка с призывом к действию. Если она рисуется одновременно с последним блоком страницы, браузер грузит все параллельно, без приоритета.
Как ускорить сайт, если цифры в PageSpeed уже зеленые?
Бывает так: разбор скорости лендинга сделан, PageSpeed показывает 95 баллов, а клиент все равно пишет "сайт грузится долго". Дело не в реальной скорости, а в порядке появления элементов. Зеленые цифры мерят суммарные метрики, а не то, что видно глазами в первую секунду.
Три правки заметны быстрее, чем что-либо в структуре кода:
- убрать с первого экрана автовоспроизводимое видео тяжелее двух-трех мегабайт;
- подключить шрифты в начале загрузки, чтобы текст не появлялся с миганием;
- зафиксировать высоту блоков с задержкой - счетчик отзывов, виджет чата, баннер акции.
Почему картинки без размеров дергают страницу
Если у тега картинки не заданы width и height, браузер не знает размер заранее и сначала рисует блок нулевой высоты. Как только картинка подгружается, текст под ней сдвигается вниз - посетитель уже начал читать заголовок, и тут страница прыгает. Это называется смещением макета. Документация web.dev про CLS считает нормальным порог 0,1 условных единиц.
На лендингах это особенно заметно в блоке портфолио и в отзывах с фото автора - там картинок сразу несколько. Лечится одной парой атрибутов у каждого img, даже если картинка тянется по ширине блока через CSS: браузер резервирует место заранее, и сдвига не происходит.
Пустой экран или скелетон
Пока форма заявки или блок с ценами еще не подгрузились, на их месте можно оставить белое пятно, а можно нарисовать серый прямоугольник в форме будущего блока - скелетон. Разница небольшая по факту и большая по ощущению: серый контур читается как "сайт работает", а пустое место - как "что-то сломалось".
Для лендинга скелетон не нужен на весь сайт. Достаточно там, где контент подгружается с заметной задержкой - калькулятор с формулами, виджет отзывов из внешнего сервиса, карта с адресом. Статичный текст и кнопки грузятся сразу вместе с HTML, там скелетону делать нечего.
Что грузить сразу, а что - потом
Атрибут loading="lazy" у картинок ниже первого экрана - самая дешевая правка по соотношению эффекта к трудозатратам. Браузер не тратит канал на изображения, которые посетитель еще не долистал, и первый экран получает ресурсы сразу. Если на странице десяток фотографий проектов, статья про фото и видео на лендинге разбирает, какой вес для них нормальный.
Обратная сторона - не откладывать то, что и так на первом экране. Встречал лендинги, где lazy loading повесили на обложку в шапке: она видна сразу, а грузится как будто спрятана. Итог - секунда белого места там, где должен быть герой-баннер. Правило простое: видимое без прокрутки грузится в первую очередь, остальное - по требованию.
Шрифты: почему текст иногда пропадает
Если сайт использует кастомный шрифт, а браузер еще его не скачал, часть браузеров прячет весь текст до полной загрузки шрифта. Секунда-две - и заголовок с кнопкой просто отсутствуют на экране, хотя формально страница уже загрузилась. Лечится параметром font-display: swap в подключении шрифта: браузер сразу показывает системный шрифт, а потом подменяет на нужный.
На лендингах фирменный шрифт часто держит весь заголовок первого экрана. Если он не настроен верно, посетитель первую секунду видит белый лист вместо оффера. Проверить легко: отключить кеш в инструментах разработчика и перезагрузить страницу на медленном интернете.
Как выглядит быстрая загрузка сайта на телефоне?
На телефоне ощущение скорости зависит не только от загрузки, но и от прокрутки. Если страница тормозит при свайпе - подгружаются картинки, включаются анимации, - кажется, что сайт медленный, даже если он загрузился быстро. Мобильный трафик у лендингов обычно 60-70% от всего, и перепад между реальной и ощущаемой скоростью здесь сильнее всего: сеть 4G нестабильна, и то, что на компьютере грузится ровно, на телефоне рвется.
Проверять стоит не только на своем телефоне с хорошим Wi-Fi. В инструментах разработчика браузера есть режим ограничения скорости сети, и там видно, в каком порядке появляются элементы первого экрана. Если заголовок и кнопка рисуются последними, порядок загрузки стоит пересмотреть в первую очередь.
Пять приемов и что каждый дает
Ничего из таблицы не требует переписывать сайт заново. Каждый прием внедряется отдельно, и эффект виден уже на следующей проверке.
| Прием | Что дает | Сложность | Где чаще забывают |
|---|---|---|---|
| width и height у картинок | убирает сдвиг макета | низкая | портфолио, отзывы |
| font-display: swap | текст виден сразу | низкая | шрифт заголовка |
| loading="lazy" ниже экрана | первый экран быстрее | низкая | галереи, кейсы |
| скелетон вместо пустоты | ощущение, что сайт работает | средняя | калькулятор, форма |
| приоритет первого экрана | кнопка видна за секунду | средняя | автовидео, баннеры |
Частые вопросы
Можно ли поднять ощущаемую скорость без смены хостинга?
Да, большинство приемов из статьи - это верстка и порядок загрузки, а не сервер. Хостинг влияет на время ответа, но порядок появления элементов зависит от кода страницы.
Стоит ли убирать анимации совсем, чтобы сайт казался быстрее?
Нет, тормозит не анимация сама по себе, а тяжелая анимация на первом экране, которая мешает браузеру сначала отрисовать текст и кнопку. Легкое появление блока при прокрутке на ощущение скорости почти не влияет.
Как проверить, что именно тормозит на моем лендинге?
Откройте страницу в режиме инкогнито на медленном мобильном интернете и посмотрите, что появляется первым - заголовок с кнопкой или что-то другое. Если что-то другое, порядок загрузки стоит пересмотреть.
Скелетон нужен на каждом лендинге?
Нет, только там, где есть блоки с заметной задержкой - виджеты, калькуляторы, отзывы из внешнего сервиса. На простом лендинге из текста и фото скелетону обычно негде применяться.
Влияет ли ощущение скорости на позиции в поиске?
Косвенно да, через Core Web Vitals на web.dev: часть этих метрик как раз измеряет то, что видит человек в первые секунды, а не только итоговое время загрузки.
Коротко
Реальная скорость загрузки сайта и скорость на ощупь связаны, но не совпадают. Первая измеряется счетчиком и хостингом, вторая - порядком, в котором посетитель видит элементы экрана. Ускорить сайт по метрикам дороже и дольше, чем навести порядок в том, что грузится первым.
Если лендинг уже работает, жалоб от PageSpeed нет, а ощущение "тормозит" осталось - начните с таблицы выше. Каждый прием занимает от получаса до пары часов работы верстальщика и не требует трогать сервер.
Проверить эффект можно без инструментов: откройте лендинг на телефоне через мобильный интернет, а не через Wi-Fi в офисе. Если кнопка и заголовок появляются раньше, чем вы успели моргнуть, дело сделано.
