Дизайн — статьи о сайтах
Клиент часто заходит на сайт перевозчика, когда ему срочно нужно узнать тариф, оставить заявку или проверить статус груза. Нередко он делает это с телефона и при нестабильной мобильной связи. Если страница грузится долго, он закроет её и откроет сайт конкурента. Ниже о том, что обычно замедляет такие сайты и как это исправить без полной переделки.
Что чаще всего тормозит сайт перевозчика
У транспортных компаний набор причин довольно типичный:
- фотографии автопарка и складов, загруженные «как есть» с камеры, по несколько мегабайт;
- слайдер на главной с пятью-семью крупными кадрами;
- встроенная интерактивная карта маршрутов или пунктов выдачи;
- калькулятор стоимости на тяжёлых скриптах или с запросами к сторонним сервисам;
- онлайн-чат, обратный звонок, несколько счётчиков статистики;
- много плагинов CMS, каждый из которых подключает свои файлы на всех страницах.
Каждый пункт по отдельности выглядит безобидно, но вместе они дают сотни килобайт или мегабайты лишнего и десятки дополнительных запросов.
Как измерить скорость до начала правок
Сначала зафиксируйте исходное состояние, иначе потом нельзя будет понять, помогли ли изменения. Возьмите три ключевые страницы: главную, страницу с калькулятором или тарифами и страницу отслеживания груза. Проверьте их в Google PageSpeed Insights или WebPageTest, а также во вкладке Network в инструментах разработчика браузера с включённым ограничением скорости соединения. Запишите общий вес страницы, число запросов и момент, когда на экране появляется первый блок с заголовком и кнопкой заявки. Повторите замер после каждой группы изменений.
Пример: страница направления «Москва — Казань»
Представим условную страницу межгородской перевозки. На ней есть слайдер из пяти фотографий шириной 2000 пикселей, карта маршрута, калькулятор, блок отзывов, чат, три счётчика и шрифт в четырёх начертаниях. На телефоне видна лишь малая часть этого, но браузер загружает всё сразу. Что можно сделать:
- слайдер заменить одним фото, подогнанным под реальную ширину блока, а остальные кадры вынести в галерею ниже;
- вместо живой карты показать лёгкую картинку маршрута с кнопкой «Открыть карту» и подключать скрипт карты только после нажатия;
- оставить два начертания шрифта вместо четырёх;
- чат запускать через несколько секунд после загрузки страницы или при первом движении пальца или мыши;
- скрипты счётчиков подключить асинхронно.
В результате первый экран с заголовком, ключевыми условиями и кнопкой заявки появляется раньше, а всё второстепенное догружается позже.
Изображения: где обычно больше всего лишнего веса
Начинайте с картинок: это самая простая и безопасная правка. Загружайте файл в том размере, в котором он показывается, а не в размере оригинала. Для фотографий подойдёт JPEG с умеренным сжатием, для логотипов и значков лучше SVG или один общий спрайт. Изображения ниже первого экрана (галерея парка, схема складов, отзывы) подгружайте отложенно, по мере прокрутки: для этого есть небольшие JavaScript-библиотеки. Для адаптивных страниц указывайте разные размеры одного изображения через srcset, чтобы телефон не скачивал версию для широкого монитора.
Калькулятор, карты и виджеты: как не дать им замедлить страницу
Сторонние скрипты не контролируются вами: если чужой сервер отвечает медленно, страдает ваша страница. Подключайте их с атрибутами async или defer, чтобы они не блокировали отрисовку. Калькулятор стоимости не должен тянуть на каждую страницу тяжёлые библиотеки: подключайте их только там, где он есть. Расчёт лучше делать запросом к вашему серверу с коротким ответом, а не перезагружать страницу целиком. Для страницы отслеживания груза задайте разумное время ожидания ответа от учётной системы и покажите понятное сообщение, если данные временно недоступны, а не пустой экран.
Сервер и кэш: настройки, которые часто забывают
Попросите разработчика или хостинг проверить следующее: включено ли сжатие текстовых файлов (gzip), выставлены ли сроки хранения в кэше браузера для картинок, стилей и скриптов, объединены ли и сжаты ли файлы CSS и JS. Если сайт работает по HTTPS и хостинг поддерживает HTTP/2, включите его: страницы с большим числом мелких файлов от этого загружаются быстрее. Для сайтов на CMS полезно включить кэширование страниц, чтобы информационные разделы не собирались заново при каждом заходе. Отдельно посмотрите время ответа сервера на главную: если оно заметно велико, проблема в хостинге, коде или базе данных, а не в картинках.
Проверочный список для владельца компании
- Есть замеры трёх ключевых страниц до и после изменений.
- Ни одно изображение не больше размера, в котором оно показано на странице.
- На главной нет слайдера с большим числом крупных кадров.
- Карта, чат и видео подгружаются позже основного содержимого или по нажатию.
- Сторонние скрипты подключены с async или defer.
- Подключены только нужные начертания шрифтов.
- Включены сжатие и кэширование статических файлов.
- Плагины CMS, которыми никто не пользуется, отключены.
- Страница с калькулятором и страница отслеживания проверены на мобильном соединении.
Если вы не можете проверить эти пункты самостоятельно, передайте список подрядчику и попросите отчёт по каждому пункту. Ускорение сайта редко требует переработки дизайна, обычно достаточно навести порядок в изображениях, скриптах и настройках сервера.
