URL скопирован в буфер обмена!
Зеленая зона — гайд по оптимизации сайта на Тильда
В этой статье мы расскажем как ускорить сайт на Tilda.
Содержание:
Содержание:
Как проверить скорость загрузки сайта
Для оценки скорости загрузки вашего сайта на Tilda, лучше всего использовать Google Page Speed. Этот бесплатный сервис покажет детальную информацию о вашем сайте и предложит рекомендации для его оптимизации. Процесс проверки максимально прост: переходим по ссылке, указываем адрес вашего сайта и нажимаем кнопку "Анализировать". Через 15-30 секунд покажет оценку производительности.
Важно отметить, что эта оценка показана для мобильной версии сайта. Вы можете переключиться на вкладку десктопной версии, чтобы увидеть оценку для нее, но как правило отталкиваться стоит именно от мобильной оценки.
Запомни! 90-100 это отличный результата оптимизации, 50-90 это нормально, 0-49 есть проблемы, нужно доставать бубен и шаманить с оптимизацией.
Общая оценка состоит из нескольких параметров:
First Contentful Paint (FCP) — это время, за которое первый контент отображается на экране пользователя. Нормальным считается значение до 3 секунд.
Total Blocking Time (TBT) — это время, которое браузер затрачивает на загрузку скриптов и другого контента, во время которого пользователь не может взаимодействовать с сайтом. Нормальным считается значение до 600 миллисекунд, но в рамках тильда такой показатель сделать сложно. Следите чтобы он был не больше 3000 миллисекунд.
Speed Index — это время, за которое основной контент становится доступным для пользователя. Нормальным считается значение до 5,8 секунд.
Largest Contentful Paint (LCP) — это время, необходимое для загрузки самого большого контента на странице, такого как изображения или каталог. Нормальным считается значение до 4 секунд.
Теперь мы знаем скорость загрузки страницы и можем переходить к шагам оптимизации.
После того как мы узнали скорость загуркзи страницы
First Contentful Paint (FCP) — это время, за которое первый контент отображается на экране пользователя. Нормальным считается значение до 3 секунд.
Total Blocking Time (TBT) — это время, которое браузер затрачивает на загрузку скриптов и другого контента, во время которого пользователь не может взаимодействовать с сайтом. Нормальным считается значение до 600 миллисекунд, но в рамках тильда такой показатель сделать сложно. Следите чтобы он был не больше 3000 миллисекунд.
Speed Index — это время, за которое основной контент становится доступным для пользователя. Нормальным считается значение до 5,8 секунд.
Largest Contentful Paint (LCP) — это время, необходимое для загрузки самого большого контента на странице, такого как изображения или каталог. Нормальным считается значение до 4 секунд.
Теперь мы знаем скорость загрузки страницы и можем переходить к шагам оптимизации.
После того как мы узнали скорость загуркзи страницы
Оптимизация изображений и видео на сайте
Для изображений:
Загружайте изображения в правильных форматах. Векторные иллюстрации и иконки в формате SVG, а вот если у нас картинки или фотографии, то JPG/PNG наши лучшие друзья.
Перед загрузкой изображений в формате JPG/PNG, обязательно сжимайте их с помощью компрессора, например TinyPng. Это позволит уменьшить размер файла без потери качества изображения. Ниже сравнение качества до и после сжатия. Изображение стало легче на 52%.
Загружайте изображения в правильных форматах. Векторные иллюстрации и иконки в формате SVG, а вот если у нас картинки или фотографии, то JPG/PNG наши лучшие друзья.
Перед загрузкой изображений в формате JPG/PNG, обязательно сжимайте их с помощью компрессора, например TinyPng. Это позволит уменьшить размер файла без потери качества изображения. Ниже сравнение качества до и после сжатия. Изображение стало легче на 52%.
Используйте правильные размеры контента. Загружайте изображения с размерами, соответствующими их отображению на вашем сайте. Например, если на вашем сайте изображение должно быть 600x200 пикселей, загружайте именно в таком размере изображение, чтобы избежать дополнительной обработки со стороны Тильда при загрузке страницы.
Если размер изображения превышает 1680 пикселей по любой из сторон, Тильда будет автоматически уменьшать его до этого размера перед отображением на сайте. На это будет уходить дополнительное время, поэтому есть смысл уменьшить размер больших изображений до 1680 пикселей.
Для видео:
Тильда не разрешает загружать видео на свой сервер поэтому лучше всего видео контент загружать на YouTube и затем встраивать на сайт через ссылку.
YouTube обеспечит стабильное хранение видео и быструю загрузку.
Если вы используете наши модификации, такие как "видео на фон в Zero Block" или "конструктор видео для Тильда", где используются видео формата MP4, размещенные на Dropbox, дополнительно сжимайте видео с помощью этого компрессора. Это поможет уменьшить размер файла и ускорить загрузку страницы.
Если размер изображения превышает 1680 пикселей по любой из сторон, Тильда будет автоматически уменьшать его до этого размера перед отображением на сайте. На это будет уходить дополнительное время, поэтому есть смысл уменьшить размер больших изображений до 1680 пикселей.
Для видео:
Тильда не разрешает загружать видео на свой сервер поэтому лучше всего видео контент загружать на YouTube и затем встраивать на сайт через ссылку.
YouTube обеспечит стабильное хранение видео и быструю загрузку.
Если вы используете наши модификации, такие как "видео на фон в Zero Block" или "конструктор видео для Тильда", где используются видео формата MP4, размещенные на Dropbox, дополнительно сжимайте видео с помощью этого компрессора. Это поможет уменьшить размер файла и ускорить загрузку страницы.
Управление загрузкой шрифтов
Старайтесь использовать шрифты которые установлены в саму платформу Тильда так как они имеют высокую скорость загрузки и могут сократить время загрузки страницы.
При использовании сторонних шрифтов, например из Google Fonts, подключайте только те начертания, которые фактически используются на вашем сайте. Не имеет смысла подключать все 8 начертаний шрифта, если используется всего 2.
При использовании сторонних шрифтов, например из Google Fonts, подключайте только те начертания, которые фактически используются на вашем сайте. Не имеет смысла подключать все 8 начертаний шрифта, если используется всего 2.
В настройках Тильда есть возможность включить отображение системного шрифта при загрузке страницы. Этот системный шрифт будет отображаться сразу при открытии страницы и заменится на ваш выбранный шрифт, когда он загрузится. Это может помочь ускорить отрисовку первого контента, особенно если вы используете собственный шрифт с большим количеством начертаний.
Включение системного шрифта может вызвать эффект мигания шрифта в момент загрузки, поэтому рекомендуется использовать эту опцию только в крайних случаях.
Оптимизация скриптов
Минимизируйте количество скриптов, используемых на сайте. Чем меньше скриптов, тем быстрее загрузится страница. Избегайте размещения скриптов внутри тега <head> в настройках вашего сайта. Вместо этого, по возможности, переместите весь код в блоки T123.
Если на вашем сайте есть несколько блоков с одинаковыми скриптами, например вы использовали несколько скриптов горизонтального скрола на странице, убедитесь, что вы удалили дубли библиотеки в скриптов. В наших модификациях они всегда идут в начале кода и выглядят в виде ссылки <script src='https://ссылка'></script>. Достаточно оставить всего в одном скрипте библиотеку. Удаление дубликатов библиотек поможет сократить количество запросов к сторонним серверам и улучшить скорость загрузки сайта.
Если на вашем сайте есть несколько блоков с одинаковыми скриптами, например вы использовали несколько скриптов горизонтального скрола на странице, убедитесь, что вы удалили дубли библиотеки в скриптов. В наших модификациях они всегда идут в начале кода и выглядят в виде ссылки <script src='https://ссылка'></script>. Достаточно оставить всего в одном скрипте библиотеку. Удаление дубликатов библиотек поможет сократить количество запросов к сторонним серверам и улучшить скорость загрузки сайта.
Отложенная загрузка метрики
Большое количество скриптов аналитики, горячих карт и счетчиков может существенно замедлить скорость загрузки вашего сайта. Подключайте только те аналитические инструменты и счетчики, которые действительно планируете использовать.
Если вы используете Яндекс.Метрику и Google Analytics, подключите их через раздел "аналитика" в настройках сайта. Это позволит активировать режим отложенной загрузки, при котором сначала загружается основной контент сайта, а затем через некоторое время происходит загрузка скриптов аналитики.
Убедитесь, что в настройках сайта включена функция "отложенная загрузка". Для этого отключите галочку тут:
Если вы используете Яндекс.Метрику и Google Analytics, подключите их через раздел "аналитика" в настройках сайта. Это позволит активировать режим отложенной загрузки, при котором сначала загружается основной контент сайта, а затем через некоторое время происходит загрузка скриптов аналитики.
Убедитесь, что в настройках сайта включена функция "отложенная загрузка". Для этого отключите галочку тут:
Отложенная загрузка Яндекс карты
Яндекс карты очень сильно замедляют скорость сайта из-за тяжелого кода. Страница состоящая всего из одного Zero Block в котором есть только Яндекс карта, в Google Page Speed будет иметь оценку 55-60. Чтобы это исправить можно воспользоваться нашей модификацией оптимизация загрузки яндекс карты. Карта будет загружаться после того, как основной контент сайта станет доступным для пользователя.
Оптимизация анимации
Тут максимально простые правила. Чем меньше анимации тем лучше для страницы. Сократите количество анимации на странице, особенно в первом блоке. Анимация по скролу или движения курсора тяжелее обычной пошаговой. Стандартную анимацию по типу Fade in лучше сделать через SBS анимацию так как она будет легче.
Прелоадеры
Если вся выше перечисленная магия не помогла оптимизировать ваш сайт, то остался последний вариант - установка прелоадера для сайта. Это своеобразная ширма, которая скроет все мигания и подгрузку контента, удержит внимания пользователя на время загрузки и в целом создаст видимость быстрой загрузки страницы.
