Как ускорить сайт на Тильде: чек-лист из 12 пунктов

Средний сайт на Тильде набирает 35 – 55 баллов в PageSpeed Insights на мобильных. Это красная зона — Google учитывает скорость при ранжировании, а пользователи уходят, если страница грузится дольше 3 секунд.

Ускорить сайт на Тильде реально. На наших проектах после оптимизации PageSpeed вырастает на 25 – 40 баллов. Ниже — чек-лист из 10 шагов, которые дают максимальный эффект.

1. Включите Lazy Load

Lazy Load — отложенная загрузка изображений. Картинки грузятся только когда пользователь до них доскролливает, а не все разом при открытии страницы.

Как включить: Настройки сайта → ещё → Lazy Load → включить.

Эффект: время загрузки первого экрана падает на 30 – 50%, потому что браузер не тянет все 20 – 40 изображений страницы сразу.

2. Оптимизируйте изображения до загрузки

Тильда автоматически конвертирует изображения в WebP и масштабирует под контейнер. Но это не заменяет ручную оптимизацию перед загрузкой. Загружать фото 4000×3000 px и ждать, что Тильда сожмёт — плохая стратегия.

Правила:

Максимальная ширина изображения — 1920 px (для фулскрин-обложек), 1200 px для контентных блоков
Формат: JPEG для фото (качество 80%), PNG только если нужна прозрачность
Размер файла: до 200 КБ для обычных изображений, до 500 КБ для обложек
Инструменты: TinyPNG, Squoosh (от Google), Sharp для автоматизации

Результат на реальном проекте: вес страницы с 8.9 МБ до 2.8 МБ — в 3 раза легче.

3. Сократите количество блоков на странице

Каждый блок в Тильде — это отдельный DOM-узел с обёрткой, стилями и скриптами. Страница из 40+ блоков будет тяжёлой, даже если контента мало.

Что делать:

Объединяйте смежные блоки одного типа в один
Используйте Zero-блок вместо 3 – 4 стандартных блоков — один Zero заменяет несколько секций
Удалите скрытые блоки, которые не отображаются, но всё равно загружаются
Целевой ориентир: 15 – 25 блоков на страницу

4. Подключите шрифты через Google Fonts напрямую

Тильда загружает шрифты со своих серверов. Иногда это медленнее, чем Google Fonts CDN. Особенно если используете популярные шрифты вроде Inter, Montserrat, Roboto.

Как сделать:

В блоке T123 (HTML-код) в <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Затем в CSS переопределите шрифт:

body, .t-text, .t-title, .tn-atom {
  font-family: 'Inter', sans-serif !important;
}

Параметр display=swap критичен — текст отрисуется системным шрифтом, пока кастомный загружается. Без него пользователь видит пустое место.

5. Отложите загрузку видео

Фоновое видео на первом экране — частая причина низкого PageSpeed. Видео весит 5 – 15 МБ и блокирует рендеринг страницы.

Решения:

Замените автоплей-видео на статичный первый кадр + кнопку Play
Если видео обязательно — сожмите через HandBrake (формат MP4, кодек H.264, битрейт 1500 – 2500 kbps)
Установите preload="none" через кастомный код, чтобы видео не грузилось до начала воспроизведения
Для фонового видео: разрешение 1280×720 достаточно, 1080p — излишне

6. Удалите неиспользуемые внешние скрипты

Каждый подключённый скрипт — это дополнительный сетевой запрос. Типичные «забытые» скрипты на сайтах Тильды:

Скрипт	Влияние на загрузку
Яндекс.Метрика с вебвизором	+200 – 400 мс
Facebook Pixel	+150 – 300 мс
JivoSite / Carrot quest	+300 – 500 мс
Roistat	+200 – 350 мс
Несколько чат-виджетов одновременно	+500 – 800 мс

Что проверить:

Отключите вебвизор в Метрике, если не анализируете записи — он тяжёлый
Уберите скрипты, которые подключили «на тест» и забыли
Оставьте один чат-виджет, не три
Используйте отложенную инициализацию счётчиков (настройка в Тильде: Настройки сайта → ещё)

7. Уменьшите DOM-дерево

Google рекомендует не более 1500 DOM-элементов на странице. Средний сайт на Тильде — 3000 – 5000 элементов. Идеал недостижим, но сократить можно.

Как уменьшить:

Меньше блоков (пункт 3)
Меньше элементов в Zero-блоках — каждая фигура, текст, кнопка добавляет 3 – 5 DOM-узлов
Карточки каталога: ограничьте 12 – 16 на страницу, добавьте пагинацию
Удалите декоративные элементы, которые не видны на мобильных

8. Оптимизируйте первый экран

Первый экран определяет метрики LCP (Largest Contentful Paint) и FCP (First Contentful Paint) — ключевые показатели Core Web Vitals.

Правила первого экрана:

Одно фоновое изображение, сжатое до 100 – 150 КБ
Никаких каруселей и слайдеров — они грузят все слайды сразу
Текст поверх изображения — не текст внутри изображения
Минимум анимаций появления на первом экране — они задерживают LCP

9. Минифицируйте кастомный CSS/JS

Если вы добавляли кастомный код через блоки T123 — проверьте его.

Чек-лист:

Удалите закомментированный код
Минифицируйте CSS: cssnano.co или любой минификатор
Минифицируйте JS: terser.org
Объедините несколько блоков T123 в один — каждый блок это отдельный запрос

На практике это экономит 50 – 200 мс. Не критично по отдельности, но в сумме с другими оптимизациями — заметно.

10. Проверьте результат и мониторьте

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

Инструменты:

PageSpeed Insights — основной инструмент, показывает Core Web Vitals
GTmetrix — детальный waterfall загрузки
Chrome DevTools → Lighthouse → Performance — локальный аудит
Chrome DevTools → Network → сортировка по размеру — находите тяжёлые ресурсы

Целевые показатели для Тильды:

Метрика	Хорошо	Приемлемо
PageSpeed Mobile	60+	45 – 60
PageSpeed Desktop	85+	70 – 85
LCP	< 2.5 сек	< 4 сек
Total Blocking Time	< 300 мс	< 600 мс

100 баллов на Тильде — нереалистичная цель из-за архитектуры платформы. 60 – 75 на мобильных — отличный результат, который достижим по этому чек-листу.