Дизайн — статьи о сайтах
Клиент автосервиса часто ищет мастера в неудобный момент: машина не заводится, загорелась лампа на панели, нужно срочно записаться на ТО. Открывает он сайт обычно со смартфона и не всегда при хорошей связи. Если страница долго показывает белый экран, он вернётся в выдачу и позвонит в следующий сервис. Ниже — как понять, что тормозит ваш сайт, и что с этим сделать.
С чего начать: измерить, а не угадывать
Откройте главную страницу и самую посещаемую страницу услуги в PageSpeed Insights или во встроенном в Chrome инструменте Lighthouse. Они покажут, какие файлы самые тяжёлые и какие скрипты задерживают отображение страницы. Затем откройте сайт в Chrome с включённым режимом имитации медленного мобильного соединения (вкладка Network в инструментах разработчика). Посмотрите на три вещи: общий вес страницы, количество запросов и момент, когда на экране появляются заголовок и кнопка «Записаться». Эти значения станут точкой отсчёта: после правок вы сравните их с первоначальными.
Фотографии работ и акций: самый частый источник лишнего веса
В автосервисе много визуального контента: фото цеха, мастеров, выполненных работ, сертификаты, баннеры акций. Нередко в галерею попадают снимки прямо с камеры телефона на несколько мегабайт, которые в вёрстке сжимаются до ширины 300 пикселей. Браузер всё равно скачивает файл целиком. Что делать:
- загружать изображения в размере, близком к реальному отображению; для мобильных экранов не нужны файлы шириной 4000 пикселей;
- сжимать JPEG с умеренным качеством, часто разницу на экране не видно, а вес заметно меньше;
- для баннеров и логотипов с плоской графикой использовать SVG или PNG, а для фото — JPEG; формат WebP можно подключать с запасным вариантом, так как он поддерживается не всеми браузерами;
- галерею и фото ниже первого экрана подгружать отложенно, при прокрутке;
- задавать ширину и высоту изображений в разметке, чтобы текст не «прыгал» при догрузке.
Виджеты, карты и счётчики: что можно отложить или убрать
Онлайн-запись, чат, подмена номера для подсчёта звонков, счётчики, пиксели соцсетей, интерактивная карта — каждый подключает свои скрипты, иногда по несколько файлов. Они загружаются с чужих серверов, и вы не контролируете их скорость. Пройдитесь по списку и задайте себе вопрос: кто смотрит данные этого инструмента и принимает по ним решения? Если никто, скрипт стоит убрать.
Нужные скрипты подключайте с атрибутами async или defer, чтобы они не блокировали показ страницы. Интерактивную карту на странице контактов можно заменить статичной картинкой со схемой проезда и кнопкой «Открыть карту»: тяжёлый код загрузится только по клику. Чат и всплывающие окна не обязаны появляться в первую секунду, их можно запускать через несколько секунд после загрузки.
Условный пример: страница «Замена ремня ГРМ»
Представим типовую страницу услуги. В шапке слайдер из шести фотографий по 2–3 МБ, ниже таблица цен, отзывы, форма записи, внизу карта с отметкой сервиса. В коде подключены три счётчика, виджет чата и четыре начертания шрифта. На телефоне клиент видит пустую область вместо заголовка, потому что браузер сначала загружает слайдер и скрипты.
Что можно изменить в такой странице:
- слайдер заменить одной главной фотографией нужного размера, остальные снимки перенести в галерею ниже с отложенной загрузкой;
- заголовок, краткое описание, ориентир по срокам и кнопку «Записаться» сделать видимыми без ожидания тяжёлых файлов;
- таблицу цен оставить обычным HTML-текстом, а не картинкой: она быстро загрузится, её удобно читать и можно обновлять;
- оставить два начертания шрифта вместо четырёх, а в стилях добавить font-display: swap, чтобы текст показывался сразу системным шрифтом;
- карту загружать по клику, чат — с задержкой.
Содержание страницы остаётся тем же, но главное для клиента — описание услуги, ориентир по цене и кнопка записи — появляется раньше.
Хостинг, кэш и сжатие: что проверить у разработчика
Даже оптимизированная страница будет медленной, если сервер долго отвечает. Уточните у разработчика или хостинга, включено ли сжатие текстовых файлов (gzip или Brotli), настроено ли кэширование стилей, скриптов и изображений в браузере, работает ли протокол HTTP/2. Для сайтов на CMS важно кэширование готовых страниц: каталог услуг и прайс не нужно собирать из базы данных при каждом визите. Лишние плагины и модули тоже добавляют запросы и скрипты, поэтому неиспользуемые лучше отключить.
Проверочный список для владельца сайта
- Замерены главная и две-три страницы услуг на имитации медленного мобильного соединения.
- Самые тяжёлые файлы найдены; фото сжаты и подогнаны по размеру.
- Галерея и изображения ниже первого экрана загружаются отложенно.
- Кнопка записи и номер телефона видны без ожидания слайдеров и виджетов.
- Неиспользуемые счётчики, плагины и шрифты удалены.
- Сторонние скрипты подключены с async или defer.
- Карта и чат загружаются по действию или с задержкой.
- На сервере включены сжатие и кэширование.
- После правок замеры повторены, а форма записи проверена с телефона.
Скорость не гарантирует рост заявок или позиции в поиске, но снимает лишнее препятствие между человеком с проблемой и кнопкой «Записаться». Начните с измерений и самых тяжёлых элементов — обычно именно они дают самый заметный эффект.
