Улучшаем скорость загрузки сайта, который сделан на конструкторе

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

Во-первых, скорость загрузки сайта это важный показатель, от которого зависит ранжирование сайта (чем быстрее загружается сайт, тем выше он будет в поисковой выдаче).

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

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

Как проверить скорость загрузки сайта?
Все просто, переходите по ссылкам ниже, вводите URL вашего сайта, смотрите на количество баллов:)
https://pagespeed.web.dev/ — Сервис от Google.
https://sitespeed.ru/ — Аналогичный сервис, но не от Google.

Технические ограничения конструкторов сайтов

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

Но все-таки, если отбросить оптимизирование кода, то на скорость загрузки влияют показатели, которые мы можем вполне себе редактировать, а именно:

интеграция со сторонними сервисами;
использование оптимальных форматов и размеров для фото- и видео-контента;
сжатие фото- и видео-контента;
тяжелая и сложная анимация;
LazyLoad изображений.

Разберем все по пунктам:)

1)Интеграция со сторонними сервисами

Скриншот с сайта https://pagespeed.web.dev/

Возможно, для кого-то это будет новостью, но те самые сервисы, предоставляющие вам скрипт для вставки внутри тега <head>, могут замедлять загрузку вашего сайта.

История из практики:
Бывает такое, что заказчик, на один сайт может вешать 3−5 систем аналитики, добавлять сторонние сервисы обратной связи (jivosite и пр.), добавлять интеграции от сервисов, которые открывают поп-апы по таймерам, или создают квизы (marqiuz). В общем все то, что так любят маркетологи, но не любят разработчики:)

После того, как необходимость в использовании таких сервисов отпадает, владелец сайта забывает удалить ненужные скрипты, которые все еще находятся внутри тега <head> и замедляют загрузку сайта.

Что мы рекомендуем:

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

Проверили? Исправили? Отлично, идем дальше

2) Использование оптимальных форматов
и размеров для фото- и видео-контента

Размер изображения надо выбирать, исходя из его логики на сайте. Если изображение фоновое, которое будет растягиваться, то его размер должен быть минимум 1920 в ширину. Высоту смотрите исходя из высоты вашего блока).

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

Касательно форматов:

Иллюстрации, иконки и другие векторные изображения грузите в формате SVG
Если нужны изображения с прозрачным фоном, то тут без особых вариантов - PNG
Если это будет фото с большим количеством цветов и деталей, то JPG
Самое сильное сжатие по формату - это webP (но признаться честно, с ним мы почти не работаем, тк разница между сжатым PNG или JPG с webP, небольшая).
Если у вас на картинке присутствует анимация, то это gif (их кстати тоже можно сжимать по размеру, например в этом сервисе: https://gifcompressor.com/ru/)

Хотите получать больше полезного контента?

Тогда рекомендуем подписаться на наш телеграм-канал, а если хотите смотреть полезный контент в формате видео, подписывайтесь на наш YouTube

Подписаться на Telegram

Подписаться на YouTube

3) Сжатие фото- и видео-контента

Прежде чем загружать финальное изображение на сайт: 1) оно должно быть адекватных размеров и форматов; 2) оно должно быть сжато.

Про первый пункт рассказали выше, а касательно сжатия/оптимизации все просто. Изображение форматом .jpg или .png, надо сжать через любой из этих сервисов:
https://www.iloveimg.com/ru/compress-image
https://imagecompressor.com/ru/
https://compressor.io/
https://tinypng.com/
https://ezgif.com/optijpeg

Оговорка относительно SVG. Этот формат векторных изображений “легкий” по весу, но некоторые векторы, тоже надо оптимизировать. На практике такое бывает, но встречается не так часто.

Для сжатия SVG, воспользуйтесь этими сайтами:
https://www.iloveimg.com/ru/compress-image/compress-svg
https://products.aspose.app/imaging/ru/image-compress/svg
https://products.aspose.app/imaging/ru/image-compress/svg
https://compress-online.com/ru/compress-svg

4)Тяжелая и сложная анимация

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

Наши рекомендации по этому пункту такие:

Не используйте сложную анимацию на первом экране (тк помимо загрузки фото-, видео-контента, браузеру придется подгружать все скрипты, которые отвечают за анимацию, а чем она сложнее, тем дольше будет ждать пользователь);
Подумайте, от какой анимации можно отказаться, чтобы сайт не потерял свой визуальный стиль;
Step-by-step анимация это хорошо, но когда слишком много триггеров для нее, это не очень. Сюда же отнесем, слишком большое количество “шагов”, у одного объекта.

5) LazyLoad изображений

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

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

Без Lazy load, как только человек зайдет на страницу, у него будет загружаться все изображения, которые есть на странице.

С включенным Lazy load у него будут загружаться изображения, по мере скроллинга вниз:)

Проверь, включена ли это функция у вас на сайте:
перейдите в “Настройки сайта”, вкладка “Еще”, и проверьте, чтобы на этих двух пунктах, не было галочек:)