Посетитель сайта компании по монтажу систем безопасности часто приходит не просто посмотреть, а решить задачу: склад нужно закрыть к открытию, офис переезжает, сигнализация нужна к конкретному сроку. Он открывает сайт с телефона, иногда на слабом мобильном интернете. Если первый экран долго пустой, а кнопка заявки не нажимается, он вернётся в выдачу и откроет следующую компанию. Ниже порядок работ, который владелец может поставить перед разработчиком.
С чего начать: что измерять и на каких страницах
Не нужно ускорять «сайт вообще». Выберите 4–5 страниц, которые приводят к заявкам: главную, видеонаблюдение, СКУД, пожарную сигнализацию, страницу заказа замера. Прогоните их через PageSpeed Insights или Lighthouse и в отчётах Яндекс Метрики посмотрите, какая доля посетителей приходит с мобильных.
Следите за тремя показателями Core Web Vitals. LCP показывает, когда появился самый крупный элемент первого экрана, обычно фото или заголовок. INP показывает, как быстро сайт реагирует на нажатие. CLS показывает, сдвигается ли вёрстка при загрузке. Запишите значения до правок, иначе сравнивать будет не с чем.
Что чаще всего тормозит сайты монтажных компаний
У отрасли свои «тяжёлые» элементы, потому что доверие строится на демонстрации работ и документов:
- фотографии объектов и оборудования, загруженные в исходном размере с камеры или телефона;
- галереи «Наши работы» с десятками снимков, которые грузятся сразу;
- встроенное видео с примерами картинки камер, плеер которого подгружается при открытии страницы;
- сканы лицензий и сертификатов в больших файлах;
- виджеты: онлайн-чат, обратный звонок, карта зоны выезда, счётчики. У каждого свои скрипты;
- слайдер на первом экране и несколько начертаний веб-шрифтов;
- калькулятор стоимости, собранный на тяжёлом конструкторе ради пяти полей.
Условный пример: страница «Видеонаблюдение для склада»
Представим типичную страницу. Сверху слайдер из пяти фото складов, поверх него заголовок и кнопка. Ниже блок преимуществ, галерея из 24 снимков, встроенное видео, калькулятор, карта и чат в углу. Это пример структуры, а не описание чьего-то проекта. Что здесь можно изменить:
- Первый экран. Оставьте одно фото вместо слайдера. Задайте ему ширину и высоту, чтобы вёрстка не прыгала, и сожмите в WebP или AVIF с несколькими размерами через srcset. Для этого фото задайте fetchpriority="high" и не включайте отложенную загрузку. Заголовок и кнопку делайте текстом, а не частью картинки.
- Галерея. Покажите небольшие превью с loading="lazy", а полный размер открывайте по клику.
- Видео. Вместо готового плеера поставьте обложку с кнопкой запуска. Плеер загрузится только после нажатия.
- Карта и чат. Карту подгружайте, когда посетитель доскроллил до блока. Чат запускайте после первого действия на странице или с задержкой.
- Калькулятор. Если в нём несколько полей и простая логика, его хватит реализовать небольшим собственным скриптом без тяжёлой библиотеки.
В каком порядке работать, чтобы не тратить бюджет впустую
Сначала картинки и первый экран: это обычно самая заметная часть задержки. Затем сторонние скрипты: оставьте только те, которые приносят заявки или нужные данные. После этого шрифты и CSS: уменьшите число начертаний, добавьте font-display: swap и уберите неиспользуемые стили.
Последний шаг — сервер: кеширование, сжатие Brotli или gzip, современная версия HTTP, CDN, если клиенты находятся в разных регионах. Но сначала проверьте время ответа сервера (TTFB). Если оно большое, сжатие картинок проблему не решит, и придётся смотреть на хостинг, CMS и плагины.
Проверочный список для владельца и разработчика
- Выбраны ключевые страницы, значения LCP, INP и CLS записаны до правок.
- Главное фото первого экрана весит немного, имеет размеры и не загружается лениво.
- Остальные изображения имеют loading="lazy" и адаптивные размеры.
- Видео, карта и чат не грузятся, пока посетитель до них не дошёл или не нажал.
- Сканы лицензий открываются по ссылке как отдельные файлы, а не встроены полным размером.
- Подключено не больше двух начертаний шрифта, использован font-display.
- Телефон кликабелен, форма заявки работает сразу, без ожидания остальных скриптов.
- Проверено на реальном смартфоне при медленном соединении, а не только на компьютере.
Как не вернуть медленную загрузку через полгода
Сайт замедляется постепенно: редактор добавляет новые фото с объектов, маркетолог подключает ещё один виджет. Договоритесь о простых правилах: перед загрузкой фото уменьшать до нужной ширины, новые скрипты ставить только после согласования, а после каждого такого изменения заново замерять ключевые страницы. Скорость не гарантирует позиций в поиске, но убирает лишние причины, по которым посетитель уходит, не успев оставить заявку.
