Дизайн — статьи о сайтах
Человек, у которого сломался телефон или ноутбук, часто ищет сервис с мобильного, на ходу и не всегда при хорошей связи. Ему нужны три вещи: цена, срок и кнопка «Позвонить». Если страница грузится долго, он вернётся к выдаче и откроет сайт конкурента. Ниже разберём, где у сайтов сервисных центров обычно теряется время и что с этим делать.
С чего начать: измерьте типовые страницы, а не только главную
Возьмите три страницы разных типов: главную, страницу услуги (например, «Замена экрана») и страницу с прайс-листом. Проверьте каждую в PageSpeed Insights или Lighthouse. Обратите внимание на три показателя: LCP (когда появился главный элемент экрана), INP (как быстро сайт реагирует на нажатие) и CLS (сдвигаются ли блоки при загрузке). Затем откройте в Chrome DevTools вкладку Network, включите профиль медленной мобильной сети и отсортируйте файлы по размеру. Так видно, что именно тянет страницу вниз. Результаты лабораторных тестов служат ориентиром, а не гарантией для каждого посетителя.
Первый экран: что должно загрузиться раньше всего
На страницах услуг первым обычно появляется баннер или фото мастера за работой. Типичные ошибки: загружен оригинал с камеры, фон задан через CSS, из-за чего браузер находит его поздно, а слайдер подгружает сразу пять картинок. Что сделать:
- оставить одно изображение и подготовить несколько размеров через srcset, чтобы телефон не скачивал версию для широкого монитора;
- использовать WebP или AVIF с запасным JPEG;
- указать width и height, чтобы текст не прыгал;
- для главного изображения не включать lazy-загрузку, а задать fetchpriority="high";
- заменить слайдер статичным блоком с текстом: диагностика, гарантия, сроки.
Телефон, адрес и кнопка заявки должны быть обычным HTML, а не появляться после выполнения скрипта.
Прайс-лист и каталог моделей: как не утяжелить страницу
У сервисных центров длинные таблицы: десятки брендов, сотни моделей, несколько видов работ. Если всё это выводится одной страницей и подгружается скриптом, браузер долго строит страницу, а телефон тормозит при прокрутке. Лучше отдавать готовый HTML с сервера и разделить прайс по типам устройств и брендам. Для поиска нужен лёгкий фильтр по названию модели. Не добавляйте к каждой строке отдельную иконку: хватит одного набора SVG или текста. Страницы, которые меняются редко, можно кэшировать, но кэш нужно сбрасывать при обновлении цен, иначе клиент увидит устаревшие данные. Фотографии «до и после» показывайте уменьшенными превью с отложенной загрузкой, а полный размер открывайте по клику.
Карта, чат и счётчики: подключайте сторонние скрипты по очереди
Интерактивная карта в подвале, онлайн-чат, коллтрекинг и несколько счётчиков могут весить больше, чем весь остальной сайт. Решения такие:
- показывать адрес текстом, а интерактивную карту загружать по нажатию кнопки или при приближении блока к экрану;
- запускать чат после первого действия посетителя или с задержкой;
- удалить коды сервисов, которыми никто не пользуется, остальные подключать асинхронно;
- оставить один-два начертания шрифта в формате woff2 с font-display: swap;
- не показывать всплывающие окна сразу при входе: они закрывают кнопку звонка и могут сдвигать содержимое.
Условный пример: страница «Замена экрана ноутбука»
Представим типовую страницу. В начале стоит фото 4000 пикселей по ширине, ниже слайдер из пяти отзывов в виде картинок, затем таблица на 200 моделей, которая строится скриптом. В подвале сразу грузится карта, а справа подключены чат и два счётчика.
Как перестроить её, не меняя смысл. В начале остаются заголовок, фраза о диагностике, телефон и одно оптимизированное фото. Отзывы выводятся текстом, три-четыре самых информативных. Таблица делится на вкладки по брендам и приходит с сервера готовой. Под таблицей идёт блок с адресом и кнопкой «Показать карту». Чат загружается после прокрутки или нажатия, а счётчики подключаются асинхронно. После правок снова проверьте страницу на медленной мобильной сети: сравнивайте результаты на одинаковых настройках.
Проверочный список перед запуском правок
- Измерены главная, страница услуги и прайс на мобильном профиле.
- Главное изображение первого экрана сжато, имеет размеры и не грузится лениво.
- Слайдеры и автопрокрутка убраны или не нужны для первого экрана.
- Прайс выводится готовым HTML и разбит на разделы.
- Фото работ загружаются превью, остальные отложены.
- Карта и чат не мешают первому показу страницы.
- Лишние счётчики и шрифты удалены.
- Кнопка звонка и форма заявки работают сразу и не смещаются.
Быстрая загрузка не гарантирует позиций в поиске, но убирает лишнее препятствие между клиентом и заявкой. Начинайте с самых тяжёлых файлов и сторонних скриптов: обычно именно они дают самый заметный эффект при минимальных изменениях.
