Как ускорить сайт на Tilda: что действительно влияет на скорость, а что можно не трогать

На большинстве промо-сайтов изображения весят больше, чем весь остальной контент. Причина обычно простая: фотографию загружают прямо из телефона или фотобанка, не меняя размер и формат.
Например, картинка шириной 5000 пикселей может занимать на экране блок всего 600 пикселей. Браузер всё равно скачает большой файл, а затем уменьшит его при отображении. Посетитель заплатит за лишние мегабайты временем ожидания и мобильным трафиком.
Что сделать с каждым изображением

1. Определить реальный размер в блоке. Не загружайте фотографию в пять раз шире, чем она будет показана.
2. Выбрать подходящий формат. Для фотографий обычно подходит WebP или JPG. Для логотипов, иконок и простой графики — SVG. PNG нужен там, где важны прозрачность или резкие детали.
3. Сжать файл. Сжатие должно уменьшать вес, но не превращать изображение в набор заметных артефактов.
4. Убрать лишнее. Если на фотографии не важны края, лучше обрезать их заранее, а не оставлять огромный холст ради небольшого объекта.
5. Проверить мобильную версию. На телефоне картинка может занимать весь экран, поэтому чрезмерное уменьшение тоже опасно.

Подготовить изображения перед загрузкой можно в конвертере изображений StyleDa. Он позволяет обработать файлы, выбрать WebP, JPG или PNG, настроить качество и изменить размер. Если файлов много, их удобнее обработать пачкой и скачать одним архивом.
Это особенно полезно, когда нужно быстро подготовить фотографии для каталога, несколько вариантов обложки или изображения для серии страниц.

Первый экран должен быстро объяснять три вещи:

• что предлагает компания;
• для кого это предложение;
• какое действие сделать дальше.

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

• Видно ли основное сообщение до окончания загрузки всех декоративных элементов?
• Можно ли нажать на кнопку, пока фоновые эффекты ещё запускаются?
• Нужны ли все изображения и анимации именно на первом экране?

Если ответ отрицательный, перенесите часть декоративных элементов ниже. Первый экран должен в первую очередь передавать смысл, а не демонстрировать все возможности конструктора.

Видео почти всегда тяжелее обычной фотографии. Даже короткий ролик может весить десятки мегабайт, особенно если загружен без подготовки.
Для фонового видео обычно достаточно:

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

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

Чем больше начертаний и гарнитур подключено, тем больше файлов должен получить браузер. На практике сайту редко нужны сразу Light, Regular, Medium, Semibold, Bold и ещё несколько вариантов кириллицы и латиницы.
Для большинства проектов достаточно:

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

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

HTML, CSS и JavaScript позволяют сделать на Tilda почти любую нестандартную механику. Но каждый внешний скрипт — это дополнительная работа для браузера.
Чаще всего проблемы появляются из-за:

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

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

1. страница открыта впервые;
2. пользователь быстро прокручивает её вниз;
3. ширина экрана меняется с десктопной на мобильную.

Если после модификации появилась горизонтальная прокрутка, прыжки блоков или задержка нажатия, проблема уже не косметическая — её нужно исправить до публикации.

Большая часть проблем становится заметной именно на телефоне. На нём меньше экран, слабее процессор и чаще нестабильнее соединение.
Проверьте мобильную версию вручную:

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

Особое внимание уделите формам. Быстрый сайт не принесёт пользы, если посетитель не может понять, что вводить в поле, или кнопка отправки находится слишком далеко от описания.

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

1. Открыть страницу из рекламной ссылки.
2. Дождаться появления первого экрана.
3. Прокрутить страницу до формы или карточек.
4. Отправить тестовую заявку.
5. Открыть страницу благодарности или следующий шаг.

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

Скорость сайта начинается не с попытки получить идеальную цифру в тесте. Она начинается с решений: не загружать фотографию в десять раз больше необходимого, не использовать видео там, где достаточно изображения, не подключать код ради эффекта, который никто не заметит.
Идите от самого тяжёлого к самому важному: сначала изображения и видео, затем шрифты, кастомный код и детали мобильной версии. После этого повторите проверку и убедитесь, что сайт стал удобнее для реальных посетителей.
А если нужно быстро подготовить изображения, видео или другие файлы для проекта, загляните в каталог бесплатных сервисов StyleDa. Инструменты работают прямо в браузере и помогают решить техническую задачу до загрузки материалов на сайт.
Если оптимизация превращается в бесконечный поиск причины, можно прислать нам ссылку на страницу. Мы посмотрим, что именно замедляет проект и какие изменения дадут заметный результат без потери дизайна.