Чек лист
Как сделать загрузку сайта более быструю,
а интерфейс понятным и удобным для пользователя.
Оптимизируем все изображения
Как правильно сохранять изображения. Сервисы сжатия PNG. Спрятанный функционал Тильды.
Помогаем ориентироваться по сайту
Анимируем все элементы, на которые можно нажать. Подсвечиваем пункты меню.
Плавный скролл
Как его добавить и его преимущества.
Эффект загрузки сайта
Как он влияет на восприимчивость сайта.
Кликабельный номер телефона
Почему это нужно делать и как это повысит конверсию.
Оптимизация изображений
Для быстрой и корректной загрузки сайта необходимо максимально сжимать все изображения.
Давайте разберем, что и как нужно делать, чтобы получить правильный результат:
Сохранение изображений
Для этого нам понадобится Adobe Photoshop

Файл > Экспортировать > Сохранить для Web
При данном способе мы будем иметь качественное изображение, но вес будет значительно меньше.

Итого мы имеем:
198 КБ против 366КБ
Размер изображений
Tilda Publishing разрешает загружать изображения шириной не больше 1680 px, а при включении дополнительной функции не больше 1920 px.
Как выставлять размер
При экспорте файла для Web, у вас появится вот такое окно, где можно указать нужный размер для изображения.
Тем самым мы выставляем нужный нам размер при сохранении изображения и экономим лишние килобайты загрузки страницы.
Сжатие PNG изображения
Для того, чтобы сжать PNG изображение, нужно будет перейти на сервис COMPRESSPNG.
Данный сервис умеет сжимать изображение от 50% до 80%, при этом его качество не изменяется
Настройка навигации по сайту
Чтобы пользователь сайта не терялся на сайте, нужно помочь ему с ориентированием.
Давайте разберем самые основные моменты:
Подсвечивание пунктов меню
В настройках блока меню, делаем цвет активного блока меню отличающимся от основного.

Настройки > Пункты меню > Активный пункт меню: цвет, подчеркивание
Благодаря этому действию, пользователь всегда будет в курсе, на каком именно разделе он находится
Настройка кнопок
На все кнопки, на которые можно нажать, обязательно нужно проставить смену цвета по ховеру. Данная функция показывает пользователю, что эта кнопка точно работает и при нажатии на нее произойдет какое-то действие.
ПРИМЕР
ПРИМЕР
Плавный и правильный скролл
Чтобы не путать пользователя и не пугать резкими скачками по сайту, мы добавляем блок плавного скролла
T178 в разделе "Другое"
Преимущества блока
Данный блок делает скролл по сайту плавным и пользователь понимает, куда он попал:
«Незаезжающая» шапка
Чтобы при навигации по меню, само меню не перекрывало часть контента, мы в блоке, в настройках, указываем необходимое расстояние.

Настройки блока T178 > Дополнительное смещение px
Дополнительное смещение ставим равную высоте шапки.
Эффект загрузки сайта
Для того, чтобы посетитель сайта не видел поэтапную прогрузку сайта, мы добавляем блок:
T228 в разделе "Другое"
Чего мы добьемся
Первые пол секунды загрузки сайта будет плавный белый экран, после чего он исчезнет и покажет весь контент прогруженным.
Отключение Lazy Load
В некоторых случая, чтобы все корректно работало, необходимо отключить Lazy Load изображений.

Настройки сайта > Еще > Выключить Lazy Load
Кликабельный номер телефона
Чтобы упростить пользователю жизнь, нужно обязательно делать кликабельные номера телефонов, почту и ссылки на все соц. сети.
Как это сделать в Zero блоке
Нажимаете на текстовый элемент с номером телефона. Справа в настройках ищите раздел "LINK", добавляете ссылку:
Как это сделать в стандартном блоке
Нажимаете 2 раза на нужный текст > Выделяете текст > в верхнем левом углу добавляете ссылку.
Полезные сервисы
Бесплатный пак сервисов для поиска иконок, картинок, видео. Все то, чем пользуюсь лично.