Что обычно тормозит hero
- фоновая фотография большого разрешения;
- видео с автозапуском;
- несколько декоративных PNG или SVG;
- собственный шрифт в нескольких начертаниях;
- анимация появления каждого элемента;
- синхронный сторонний код;
- тяжелые элементы сразу во втором блоке, которые начинают грузиться параллельно.
Как найти конкретную причину
Откройте DevTools - Network, включите ограничение скорости сети и перезагрузите страницу без кеша. Отсортируйте ресурсы по размеру и времени. Затем откройте Performance или Lighthouse и найдите LCP-элемент.
Если LCP - фотография, вы знаете главный объект оптимизации. Если LCP - заголовок, смотрите шрифт и блокирующие стили.
Фоновое изображение
Не загружайте в hero исходник, подготовленный для печати. Кадрируйте его под реальную композицию. Для мобильного можно использовать отдельную версию, потому что вертикальный кадр часто требует меньше пикселей, чем универсальный горизонтальный исходник.
Tilda автоматически оптимизирует изображения, но ручная подготовка исходника по-прежнему полезна. В справке Tilda рекомендуется уменьшать размер и сжимать изображения до публикации.
Видео
Фоновое видео почти всегда дороже статичного изображения. Если оно критично для презентации, используйте короткий оптимизированный файл, постер и проверяйте поведение на мобильном интернете. В некоторых проектах лучше запускать видео по клику после того, как человек уже увидел основное предложение.
Шрифт
Большой H1 делает задержку фирменного шрифта особенно заметной. Сократите число начертаний, загрузите WOFF2, при необходимости настройте запасной шрифт. На Tilda есть режим отображения текста до полной загрузки фирменного шрифта, но он может вызвать краткое изменение геометрии.
Анимация появления
Если текст уже загружен, но специально остается невидимым еще секунду из-за эффекта, пользователь воспринимает это как медленную страницу. На первом экране анимации должны быть короткими и не блокировать чтение оффера.
Скрипты до первого экрана
Временно отключите T123, чаты, коллтрекинг, карты и дополнительные виджеты. Если hero начинает появляться быстрее, возвращайте сервисы по одному. Некритичные можно загружать после DOMContentLoaded или первого действия.
Не забывайте второй блок
Браузер может начать загружать изображения следующего экрана почти сразу, особенно если отключен Lazy Load. Tilda рекомендует не отключать отложенную загрузку изображений без необходимости.
Как сохранить премиальный дизайн
Оптимизация не означает убрать фотографию, фирменный шрифт и композицию. Обычно достаточно оставить один сильный визуал, сократить технический вес слоев и перенести второстепенные эффекты на момент после первого отображения.
Контроль после правок
Тестируйте в трех режимах: быстрый десктоп, симулированный мобильный профиль и реальный телефон на мобильной сети. Если все три сценария стали быстрее, оптимизация затронула реальную проблему, а не только лабораторную оценку.
