Оптимизация скорости загрузки сайта на Tilda в Google PageSpeed

Делимся простыми и эффективными способами, которые помогут ускорить сайт на Tilda без вмешательства в код и получить от 90 до 100 баллов в Google PageSpeed.

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

Tilda — это графический конструктор, у которого есть свои особенности и ограничения.

Tilda использует большое количество стандартных блоков с универсальным кодом, что увеличивает размер HTML, CSS и JavaScript.

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

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

Настройки кэширования на Tilda ограничены, что может замедлять загрузку страниц.

Скрипты от виджетов, аналитики и других инструментов увеличивают время загрузки.

На Tilda ограничен доступ к редактированию внутреннего кода страниц, это усложняет точечную оптимизацию.

Невозможно настроить серверные параметры, такие как gzip-сжатие, CDN или серверное кэширование.

Нельзя исключить лишние скрипты или убрать ненужные стили напрямую.

Прежде чем приступить к оптимизации, важно понимать, какие параметры влияют на общую оценку:

Теперь, когда мы разобрались с показателями, перейдем к шагам оптимизации.

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

В Tilda функция Lazy Load включена по умолчанию, но лучше в этом убедиться и исключить случайные изменения настроек, внесенные кем-то из команды, либо оставленные после тестирования.

Для этого перейдите в Настройки сайта → Ещё и убедитесь, что настройка Отключить Lazy Load изображений не активирована. Также проверьте, что данная функция включена для изображений и шейпов в Zero Block.

Используйте изображения в правильном формате и размере.

Для видео:

Тильда не разрешает загружать видео на свой сервер, поэтому видеоконтент лучше загружать на видеохостинге и после встраивать на сайт через ссылку.

Для загрузки видео на Tilda можно использовать следующие сервисы:

Эти платформы обеспечивают удобное размещение и стабильную загрузку видеоконтента.

Если вы используете модификации, такие как «видео на фон в Zero Block» или «конструктор видео для Тильда», где используются видео формата MP4, размещенные на Dropbox (видео загружается на сторонний сервис, а затем подключается на сайт через прямую ссылку), дополнительно сжимайте видео с помощью этого компрессора. Это поможет уменьшить размер файла и ускорить загрузку страницы.

Сократите количество используемых шрифтов и их начертаний. Чем больше шрифтов и стилей вы добавляете на свою страницу, тем больше запросов будет произведено во время загрузки. Рекомендуем ограничиться одним или двумя шрифтами с несколькими вариантами начертаний, чтобы снизить нагрузку на запросы.

По возможности используйте шрифты, уже встроенные в платформу Tilda, так как они обеспечивают высокую скорость загрузки.

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

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

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

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

Пересмотрите структуру страницы. Проверьте, что на странице находятся только необходимые блоки и элементы.

Если некоторые блоки не играют ключевой роли в передаче информации или функционале страницы, их лучше удалить или заменить на более легкие версии. Например:

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

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

Ограничение анимаций помогает ускорить загрузку страницы и сделать её более отзывчивой.

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

Если вы используете Яндекс.Метрику и Google Analytics, подключайте их через раздел «Аналитика» в настройках сайта. Обычно эти сервисы подключаются вручную с помощью вставки кода, но в Tilda есть настройки для упрощенного подключения: ошибок будет меньше, руками вставлять код не придется.

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

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

Яндекс Карты могут значительно замедлить загрузку сайта из-за сложного кода.

Например, страница, состоящая лишь из одного Zero Block с Яндекс.Картой, может получить оценку 55-60 в Google Page Speed. Чтобы улучшить ситуацию, вы можете воспользоваться Lozy Load, позволяющей оптимизировать загрузку Яндекс.Карт. Так карта будет загружаться только после того, как основной контент сайта станет доступен пользователю.

Вебвизор — это инструмент для создания тепловой карты сайта, отображающий действия пользователей и их взаимодействие с элементами страницы. Вебвизор записывает действия пользователей и отправляет скриншоты посещений в Яндекс Метрику.

Этот процесс может создавать дополнительную нагрузку — особенно если на сайте есть анимации или сложные элементы — и снижать скорость загрузки страницы.

Поэтому, если вы на самом деле не используете аналитику Вебвизора, его лучше отключить.

Для этого перейдите в Настройки сайта → Аналитика → Яндекс Метрика и деактивируйте Вебвизор 2.0.

Убедитесь, что ваш сайт оптимизирован для мобильных устройств.

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

Подключите Content Delivery Network (сеть доставки контента). Если ваш сайт использует много медиаконтента, подключение к CDN может значительно ускорить загрузку, особенно для пользователей из других регионов. Tilda интегрируется с несколькими CDN-сервисами, которые в этом помогут.

Когда на сайте включена настройка CDN, Tilda может выводить предупреждения о домене, который используется для проксирования контента. Это связано с тем, что CDN изменяет путь доставки файлов (например, изображений, стилей или скриптов), и Tilda может интерпретировать это как использование внешнего домена. Важно отметить, что предупреждения не влияют на работу сайта — сайт будет функционировать корректно. Но оно может отображаться в настройках Tilda.

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

Заполните метатеги и описания. Хотя это не влияет напрямую на скорость загрузки, правильные метатеги могут помочь улучшить SEO и, как следствие, увеличить трафик на ваш сайт. Убедитесь, что у каждой страницы есть уникальное и понятное название и метаописание.

Объединяйте ресурсы, когда это возможно. Tilda предлагает встроенные шрифты и стили, поэтому старайтесь избегать добавления лишних CSS- и JS-файлов. Используйте только те ресурсы, которые действительно необходимы.

Если на сайте используется стандартный шрифт Tilda или Google Fonts, который уже подключён по умолчанию, не добавляйте дополнительные шрифты, если они не изменяют внешний вид страницы.

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

Если вы используете стандартные блоки Tilda и не добавляете кастомный дизайн, не нужно подключать дополнительные CSS файлы. Например, если вы хотите изменить стили кнопки или текста, используйте встроенные настройки, а не добавляйте свои собственные CSS-правила.

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

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

Пример ненужных JS-файлов: если на сайте нет видеоплеера, то не нужно подключать скрипты для его работы.

Минимизируйте количество скриптов на сайте. Чем меньше скриптов вы используете, тем быстрее загружается страница. Избегайте размещения скриптов внутри тега <head> в настройках вашего сайта. Вместо этого по возможности переместите весь код в блоки T123.

Почему стоит избегать скриптов в <head> на Tilda:

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

В Tilda они всегда располагаются в начале кода и представлены в виде ссылки:

Удаление дубликатов поможет сократить количество запросов к сторонним серверам и улучшить скорость загрузки вашего сайта.

Если перечисленные меры не помогли оптимизировать ваш сайт, последним вариантом может стать установка прелоадера. Это своеобразная «ширма», которая скроет мигания и процесс подгрузки контента, удерживая внимание пользователя во время загрузки и создавая общее впечатление о быстрой загрузке страницы.

Ускорение загрузки сайта на Tilda — это комплексный процесс, который требует внимательного подхода. Применив эти простые советы, вы сможете значительно улучшить оценку в Google PageSpeed и сделать ваш сайт более привлекательным для пользователей. Оптимизация сайта — это не одноразовая задача, а постоянный процесс, который будет способствовать улучшению пользовательского опыта и SEO-показателей. Не забывайте периодически проверять скорость загрузки вашего сайта и вносить необходимые изменения.

Автор: Сергей Фуфаев, web-разработчик в Ant-Team.ru.

Подписывайтесь на наш телеграм-канал, чтобы первыми узнавать о выходе новых материалов. И смотрите наши бесплатные обучающие видео на YouTube, VK и Rutube.