Скорость загрузки веб-сайта является решающим фактором, который существенно влияет на то, посмотрят ваш сайт или уйдут не дождавшись загрузки.
Для начала стоит разобраться, сколько по времени должен загружаться сайт. В идеале, от 1-5 секунд. Если скорость загрузки вашего сайта превышает этот промежуток, следует заняться его оптимизацией. Скорость загрузки сайта серьезно влияет на конверсию, поэтому если вы столкнулись с этим явлением, следует это исправить.
Что влияет на загрузку сайта?
1. Изображения
- Попробуйте сжать большие изображения, и следите за тем, чтобы они не теряли своего качества.
- Загружайте изображения в том формате, в котором это требует сервис. Например, при загрузке изображений Тильда предложит на выбор: добавить изображение, добавить вектор, кнопку, форму, галерею… В этом случае для прозрачных картинок выбирайте PNG. Для векторных формат SVG (вектор), для остального JPEG.
Так вы обеспечите не только хорошее качество изображений, но и их оптимальный вес. Чем меньше размер файлов, тем быстрее загрузится страница.
Примеры компрессоров:
2. Видео
Лучше загрузить видео на готовые платформы, например, Ютуб, а затем оттуда подключать их к сайту. Если такой возможности нет, то видеоролики тоже лучше сжать через компрессор.
Примеры компрессоров:
3. Блоки
Лучше использовать готовые тильдовские блоки вместо zero-блоков там, где это возможно, например, в заголовках или там, где только текст и картинка. Замените блоки с таким содержанием на стандартные блоки. Или их можно объединить с другими zero-блоками. Это сократит количество избыточных блоков и улучшит производительность страниц.
Не делайте слишком много блоков на странице. 40 шт – это перебор.
4. Адаптивность
Не стоит создавать слишком много вариантов адаптивности блока под устройства, используйте те, которые предлагает тильда (не забывайте, что ненужные можно отключать). Чем больше адаптивности, тем больше тильда создает css файлов для блока, которые также имеют вес.
Иногда можно создать отдельный блок, например, чисто для мобильной версии, и выставить в его настройках разрешения для отображения, а ненужные параметры адаптивности удалить. Это имеет смысл попробовать сделать, если на десктопной версии на экране слишком много элементов, а на мобильной версии – минимальный контент.
5. Шрифт
Желательно использовать системные шрифты, и возможно, включить: "показывать системный шрифт при загрузке" или display: swap. При использовании пользовательских шрифтов, встроенных в интерфейс, вы также упростите загрузку сайта.
6. Анимация
Сократите количество анимации, насколько это возможно. Или хотя бы уберите ее с основных страниц.
7. Мусор в коде
Убедитесь, что в head (голова сайта) сайта нет избыточного кода (в идеале, чтобы в head вообще ничего не было) и все метрики подключены правильно через инструменты тильды. Если вы используете стандартные блоки с большим количеством кода, то его можно прогнать через компрессор. После сжатия ОБЯЗАТЕЛЬНО перепроверьте его работоспособность. Частенько компрессор может положить код, поэтому с этим пунктом будьте особенно внимательны и используйте на свой страх и риск. Пример компрессора: https://htmlcompressor.com/compressor/
Все дописанные css-стили (написание кода, который отвечает за дизайн страниц) поместите в один блок и разместите его внизу. Скрипты можно тоже поместить в один основной блок и разместить внизу, либо размещать каждый блок со скриптом под тем блоком, к которому он относится. Важно отметить, что чем ниже находится блок со скриптом, тем быстрее прогрузится отображение.
8. Избыток аналитике
Проследите за тем, чтобы не перегружать сайт лишней аналитикой, лишними счетчиками и веб-визорами. Чем больше таких сервисов, тем больше времени придется затратить браузеру на обработку сервисов при загрузке страницы.
Большее количество подобных сервисов увеличивает количество запросов, которые страница отправляет к серверам при загрузке, и значительно увеличивает количество обрабатываемого браузером кода. Подключайте только критически важные системы аналитики, которые регулярно анализируются вами или маркетологом, и, по возможности, включайте тяжеловесные инструменты, например веб-визор, только на время маркетинговых исследований поведения пользователей на сайте.
Если вы прошлись по всем пунктам, но скорость загрузки сайта все еще остается долгой:
- Пользуемся методом взаимоисключения. Последовательно один за другим отключаем блоки, перезагружаем страницу и смотрим на скорость загрузки.
- Если таким методом вы дошли до того, что у вас на странице вообще не осталось блоков, значит есть смысл проверить браузер \ устройство \ интернет на наличие проблем и попробовать отчистить кеш \ загрузить сайт с другого устройства или интернета другого провайдера.
- Возможно стоит подумать над количеством контента на странице. Не стоит перегружать ключевые страницы вашего сайта, т.к. это может оттолкнуть пользователя.
Таким образом, оптимизация сайта для быстрой загрузки - это ключ к улучшению пользовательского опыта и повышению конверсии. Следуя простым шагам по сжатию ресурсов, оптимизации блоков и кода, вы сможете значительно улучшить производительность вашего сайта.
Если вам понравилась статья – ставьте лайк и подписывайтесь на канал. Здесь много интересного про маркетинг.
Если у вас остались вопросы касательно статьи - можете задавать их в директ или напитать в Telegram: @Target_rus
Переходите в чат-бота, чтобы узнать подробности работы с агентством
#тильда #сайты #загрузкасайта #настройки #htlm
#tilda #веб #сайт #оптимизация #оптимизациясайта #времязагрузкисайта #время #загрузкасайта #seo #вебдизайн