Lazy load на Tilda: как работает отложенная загрузка и когда её отключать

Tilda по умолчанию старается не загружать все изображения страницы сразу. Картинки ниже первого экрана подгружаются, когда посетитель до них долистывает. На длинных лендингах с десятками фотографий это заметно экономит трафик и ускоряет открытие страницы. Но у механизма есть особенности, которые стоит понимать, если вы следите за скоростью и Core Web Vitals.

Где находится настройка

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

Как механизм работает на Tilda

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

Когда отложенная загрузка мешает

Обложка первого экрана

Если главный блок — обложка с большим фоновым фото, именно она будет элементом LCP. Любая задержка её загрузки ухудшает метрику. Проверьте в PageSpeed Insights, что указано элементом LCP и не упоминается ли отложенная загрузка в диагностике.

Zero Block с фоном

Фоновые изображения в Zero Block и крупные картинки первого экрана загружаются тем же механизмом. Если первый экран собран в Zero Block, следите за весом исходных изображений: оптимизированная картинка грузится быстро даже с задержкой старта.

Галереи и слайдеры

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

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

1. Уменьшите вес главного изображения: загружайте в Tilda исходник разумного размера, а не файл прямо с фотоаппарата
2. Используйте горизонтальные изображения под реальную ширину экрана
3. Уберите видео-фон на мобильных или замените его картинкой
4. Не ставьте на первый экран несколько тяжёлых блоков подряд
5. Проверьте, не загружаются ли на первом экране сторонние виджеты: чаты, карты, встроенные формы
6. Только после этого экспериментируйте с настройками отложенной загрузки на тестовой странице

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

• Запустите для адреса страницы проверку URL в Search Console и изучите скриншот и отрисованный HTML: видны ли на них картинки
• В Яндекс Вебмастере проверьте страницу на отображение
• Если изображения важны для поиска по картинкам, убедитесь, что у них заполнен alt и что они встречаются на индексируемых страницах

Каталоги и блоги

В каталоге Tilda и ленте публикаций карточки тоже показываются с отложенной загрузкой изображений, а сами карточки нередко подгружаются порциями. Это разные механизмы: первый откладывает картинки, второй — сами карточки. Если товар не находится поиском, проверяйте не отложенную загрузку картинок, а то, есть ли у карточки своя страница и попадает ли она в карту сайта.

Сдвиги макета

Когда изображения подгружаются, макет может сдвигаться, если место под них не зарезервировано. В стандартных блоках Tilda пропорции обычно заданы. В Zero Block задавайте размеры элементов явно и проверяйте мобильную версию: там сдвиги чаще.

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

• Отключить отложенную загрузку по совету «для ускорения» и получить более медленный первый экран
• Загрузить в обложку фото на десятки мегабайт и винить конструктор
• Использовать несколько разных видео на одной странице
• Не проверять страницу на телефоне со средним мобильным интернетом

Итог

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