Как ускорить сайт на Тильде: пошаговый гайд

Скорость сайта на Тильде: почему она проседает и что на это влияет

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

Сайт на Тильде запускается за день — это честное преимущество конструктора. Но за удобство готовых блоков платформа берёт свою цену: каждый блок тянет за собой платформенный JavaScript и CSS, и чем больше разнотипных блоков на странице, тем больше кода грузит браузер. Добавьте к этому три шрифтовых семейства, анимацию на каждом разделе и встроенную карту в контактах — и PageSpeed Insights покажет результат, который неприятно удивит.

Типичные причины медленной загрузки на Тильде складываются в короткий список:

• Несжатые изображения. Тильда автоматически уменьшает загружаемые картинки до 1680 px по большей стороне и отдаёт их в WebP, но исходное качество и вес файла остаются на совести владельца сайта: пережатый до нужного веса файл всё равно грузится быстрее, чем автоматически уменьшенный оригинал с фотоаппарата.
• Несколько шрифтовых семейств. Каждый подключённый шрифт — отдельный запрос к серверу. Два-три семейства с несколькими начертаниями каждого заметно увеличивают время до первого отображения текста.
• Анимации на каждом блоке. Эффекты появления элементов при прокрутке подключают дополнительные скрипты и нагружают браузер при рендеринге страницы.
• Встроенные карты и виджеты. Яндекс Карты, онлайн-чаты, виджеты обратного звонка — каждый из них инициализирует сторонние скрипты при загрузке страницы, даже если пользователь не собирается с ними взаимодействовать.

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

Скорость загрузки напрямую влияет на поведение посетителей: медленная страница увеличивает показатель отказов и сокращает время на сайте. Яндекс учитывает поведенческие сигналы при ранжировании, а метрики Core Web Vitals (LCP, INP, CLS) входят в набор сигналов, которые поисковики используют при оценке качества страницы — это особенно важно для продвижения в Яндексе.

Диагностику проводят в двух точках: PageSpeed Insights даёт технический срез с конкретными рекомендациями, Яндекс Вебмастер → «Качество сайта» → «Достижения и статистика» показывает индекс скорости — он считается по обезличенным данным Яндекс.Браузера при переходах из мобильной выдачи, то есть это полевые данные, но по узкому срезу аудитории. Яндекс Метрика → отчёт «Время загрузки страниц» позволяет отследить, какие конкретные страницы тормозят сильнее остальных.

Шаг 1. Оптимизировать изображения и медиафайлы

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

• Сожмите изображения перед загрузкой. Используйте Squoosh, TinyPNG или iLoveIMG; если работаете с JPEG — выставляйте качество 70–80%. Конвертировать в WebP вручную не нужно: Тильда делает это сама и отдаёт WebP браузерам, которые его поддерживают.
• Не загружайте изображения шире реального блока. Тильда всё равно уменьшит картинку до 1680 px по большей стороне, поэтому загружать оригинал в 4000 px смысла нет. Для блока с иллюстрацией или карточки товара обычно достаточно ширины около 800 пикселей.
• Проверьте, что ленивая загрузка (Lazy Load) не выключена. На Тильде она включена по умолчанию для всех сайтов: откройте «Настройки сайта → Ещё» и убедитесь, что галочка «Выключить Lazy Load изображений» не стоит. Для отдельной картинки в Zero Block режим задаётся параметром LAZYLOAD в настройках изображения.
• Уберите GIF-анимации. GIF в роли фона или иллюстрации весит в разы больше видео того же содержания. Замените на короткое видео в формате MP4 или на статичное изображение — страница загрузится заметно быстрее.
• Тяжёлое видео размещайте на внешнем видеохостинге. Загрузить свой файл прямо в Тильду можно (MP4 или WEBM, до 5 МБ на файл), но всё, что больше, лучше отдать хостингу — Rutube, VK Video, Kinescope или Vimeo. Учтите: встроенный плеер стороннего сервиса сам по себе тянет заметный объём скриптов, поэтому не ставьте видео на первый экран без необходимости.

Шаг 2. Сократить количество шрифтов и анимаций

Шрифты и анимации — второй по весу источник проблем после изображений. Каждое шрифтовое начертание — отдельный файл, каждая анимация — дополнительная работа браузера при отрисовке страницы.

Шрифты: сократить до минимума

• Ограничьте количество шрифтовых семейств до двух. Один — для заголовков, второй — для основного текста. Каждое семейство сверх этого добавляет HTTP-запросы и замедляет первую отрисовку.
• Там, где это допустимо по дизайну, используйте системные шрифты (Arial, Georgia и т. п.) — по оценке самой Тильды это экономит 100–400 КБ на странице, потому что шрифт вообще не нужно скачивать. Рассчитывать на «общий кеш» популярных шрифтов больше нельзя: с Chrome 86 (октябрь 2020) браузеры разделяют кеш по сайтам, и один и тот же шрифт скачивается заново для каждого домена.
• Если кастомный шрифт нужен — включите мгновенную отрисовку контента: «Настройки сайта → Шрифты → Продвинутые настройки». Текст покажется системным шрифтом сразу, а фирменный подставится после загрузки, и посетитель не смотрит на пустое место.
• Отключите неиспользуемые начертания. Откройте настройки шрифта в редакторе Тильды и снимите галочки с Bold, Italic, Light — всех вариантов, которых нет в реальном тексте страницы. Каждое начертание подгружается отдельным файлом, даже если вы его не используете.

Анимации: убрать с критического пути

• Отключите анимации появления блоков на первом экране. В настройках каждого блока (вкладка «Анимация» или «Animate») выберите «Без анимации» для hero-секции, заголовка и кнопки CTA. Анимация на этих элементах задерживает отрисовку — браузер ждёт завершения эффекта, прежде чем зафиксировать Largest Contentful Paint (LCP). Это напрямую ухудшает показатель скорости.
• Упростите или отключите анимации на остальных блоках. Если на странице 15 блоков с эффектами появления — браузер обсчитывает все 15 одновременно при загрузке. Оставьте анимацию максимум на 2–3 блоках ниже первого экрана, где она действительно работает на восприятие.
• Отключите параллакс на фоновых изображениях в первую очередь. Параллакс-эффект требует постоянного пересчёта позиций при скролле. На мобильных устройствах это создаёт заметные задержки и рывки при прокрутке. В настройках блока с фоновым изображением переключите тип прокрутки с «Параллакс» на «Фиксированный» или «Обычный».

Шаг 3. Настроить отложенную загрузку аналитики, карт и виджетов

Скрипты аналитики и сторонние виджеты — тихие пожиратели скорости. Браузер загружает страницу последовательно: встретил тег с внешним скриптом в <head> — остановился, дождался загрузки и выполнения, и только потом продолжил рендерить контент. Пользователь в это время смотрит на белый экран.

• Яндекс.Метрику — через раздел «Аналитика» в настройках Тильды. Откройте «Настройки сайта → Аналитика → Яндекс.Метрика» и вставьте номер счётчика. У Тильды есть опция «Отложенная инициализация счётчиков»: счётчик запускается спустя 2 секунды после загрузки страницы и не конкурирует с отрисовкой контента — её отключать не нужно. Код, добавленный вручную через HTML-блок или Zero Block, такой оптимизации от платформы не получает: Тильда не гарантирует оптимальное подключение стороннего кода.
• Отключите Вебвизор, если он вам не нужен постоянно. «Настройки сайта → Аналитика → Яндекс.Метрика» → опция «Отключить Вебвизор 2.0». Вебвизор записывает действия посетителей и заметно увеличивает объём передаваемых данных, особенно на страницах с анимацией. Выключить его при проблемах со скоростью рекомендует сама Тильда.
• Пиксели соцсетей и сторонние счётчики — по возможности через штатные поля раздела «Аналитика» в настройках сайта, а не блоком с HTML в теле страницы. Код, вставленный в тело, выполняется в момент рендера — именно это видит PageSpeed Insights в разделе «Устранить ресурсы, блокирующие отрисовку».
• Встроенные карты — заменить на статичный скриншот. Блок с Яндекс Картами или Google Maps загружает тяжёлый JavaScript-фрейм сразу при открытии страницы, даже если карта находится в нижней части лендинга. Сделайте скриншот карты с нужной меткой, загрузите как обычное изображение и добавьте на него ссылку для открытия карты в отдельной вкладке. Карта перестаёт тормозить загрузку, пользователь всё равно попадает туда, куда нужно.
• Виджеты обратного звонка и онлайн-чаты — вставлять блоком «HTML-код» (T123) в самом низу страницы, а не на первом экране. Чем ниже по странице стоит блок с кодом виджета, тем позже браузер до него доберётся и тем меньше он мешает отрисовке основного контента.

Проверьте результат: откройте PageSpeed Insights, введите URL страницы и найдите раздел «Устранить ресурсы, блокирующие отрисовку». Там будут перечислены все скрипты и стили, которые задерживают первую отрисовку. Если список пустой или в нём остались только платформенные файлы Тильды — сторонние скрипты подключены правильно.

Инструменты для проверки и оптимизации скорости сайта на Тильде

Шесть инструментов ниже покрывают весь цикл: от первичного аудита до сжатия конкретного файла. Используй их в паре — ни один не даёт полной картины в одиночку.

Порядок работы с инструментами. Начни с PageSpeed Insights: он даёт быстрый срез по Core Web Vitals и называет конкретные файлы, которые тормозят страницу. Параллельно проверь Яндекс Вебмастер → «Качество сайта» → «Достижения и статистика» — здесь цифра собрана не в лаборатории, а по обезличенным данным Яндекс.Браузера при переходах из мобильной выдачи. Расхождение между двумя отчётами нормально: PageSpeed Insights симулирует медленное соединение, а Вебмастер отражает поведение живых устройств, пусть и по узкому срезу пользователей — это важно учитывать при технической оптимизации сайта.

Если PageSpeed Insights указывает на конкретный скрипт или изображение, но непонятно, почему именно этот ресурс критичен — открой WebPageTest, запусти тест с сервера в Москве и изучи waterfall-диаграмму (диаграмму водопада запросов). Она покажет последовательность загрузки каждого файла и выделит те, что блокируют отрисовку.

Яндекс.Метрика → «Мониторинг» → «Время загрузки страниц» нужна на этапе приоритизации: смотри, какие страницы медленнее всего грузятся у реальных посетителей и с каких устройств. Часто оказывается, что проблема не на главной, а на карточках услуг или в блоге — там, где трафика больше всего.

Готовый чек-лист: как ускорить сайт на Тильде

1. Проверьте исходную скорость в PageSpeed Insights. Откройте pagespeed.web.dev, введите URL главной страницы и одной из ключевых внутренних. Зафиксируйте баллы для мобильных и десктопа — это точка отсчёта. Без исходных цифр непонятно, что именно дало результат.
2. Сожмите все изображения перед загрузкой. Прогоните файлы через Squoosh или TinyPNG с качеством 70–80% и не тащите на сайт оригиналы шире 1680px — Тильда всё равно уменьшит их до этого размера и сама сконвертирует в WebP. Частая ошибка: сжимают только новые изображения, забывая про старые, уже загруженные в медиатеку Тильды.
3. Убедитесь, что Lazy Load не выключен. На Тильде ленивая загрузка изображений работает по умолчанию: в «Настройки сайта → Ещё» галочка «Выключить Lazy Load изображений» должна быть снята. Картинки ниже первого экрана тогда грузятся только в момент прокрутки.
4. Уберите GIF-анимации и тяжёлые видео. GIF весом больше нескольких сотен килобайт замените на короткий MP4. Видео тяжелее 5 МБ размещайте на внешнем видеохостинге (Rutube, VK Video, Kinescope, Vimeo) — но не ставьте плеер на первый экран: скрипты стороннего плеера сами по себе весят немало.
5. Оставьте не более двух шрифтовых семейств, отключите лишние начертания. Где возможно — используйте системные шрифты, а для кастомных включите мгновенную отрисовку контента в «Настройки сайта → Шрифты → Продвинутые настройки». Каждое дополнительное начертание (Bold Italic, Light, ExtraBold) — отдельный файл и отдельный запрос. Если начертание не используется ни в одном блоке — отключите его.
6. Отключите анимации появления на блоках первого экрана, уберите или упростите параллакс. В настройках блока снимите галочку «Анимация появления» для тех блоков, которые видны без прокрутки. Параллакс-эффект вынуждает браузер пересчитывать позиции элементов при каждом скролле — на слабых устройствах это ощутимо тормозит страницу.
7. Перенесите коды аналитики в раздел «Настройки сайта → Аналитика» Тильды. Яндекс.Метрику подключайте именно здесь и не отключайте опцию «Отложенная инициализация счётчиков» — счётчик стартует через 2 секунды и не конкурирует с отрисовкой. Код, вставленный вручную в тело страницы, такой оптимизации от платформы не получает. Заодно выключите Вебвизор, если не пользуетесь им постоянно.
8. Замените встроенные карты на статичный скриншот со ссылкой. Iframe с Яндекс.Картами или Google Maps загружает десятки внешних ресурсов при открытии страницы. Замените карту на скриншот с кнопкой «Открыть маршрут» — или настройте отложенную загрузку iframe через Zero-block с атрибутом loading="lazy".
9. Перенесите виджеты чата и обратного звонка в конец страницы. Вставляйте их код блоком «HTML-код» (T123) в самом низу страницы, а не на первом экране. Тильда рекомендует запускать инициализацию таких скриптов примерно через 3 секунды после загрузки страницы — многие виджеты поддерживают это собственными настройками. Учтите, что просто дописать defer к чужому загрузчику не всегда безопасно: часть виджетов рассчитана на синхронное выполнение и после этого перестаёт работать — проверяйте виджет после изменения.
10. Повторно проверьте скорость в PageSpeed Insights и Яндекс Вебмастере. Откройте Яндекс Вебмастер → «Качество сайта» → «Достижения и статистика» и сравните индекс скорости с исходным. Учтите, что индекс рассчитывается только для сайтов с достаточным трафиком: если данных мало, шкала останется незаполненной. Обновляется он не реже раза в месяц, поэтому мгновенной реакции на правки не ждите. Если балл PageSpeed Insights вырос, а данные Вебмастера ещё не обновились — подождите: индекс считается на накопленных данных живых устройств, а не на синтетическом тесте, и обновляется медленнее.

Заключение

Ускорение Тильды — это не магия и не работа на неделю. Сжали изображения, убрали лишние шрифты, перенесли скрипты аналитики в отложенную загрузку — и сайт уже ведёт себя иначе. Используйте чек-лист из этой статьи как рабочий референс: открыли, прошли по пунктам, зафиксировали результат.