Кейс: создание сайта для автосервиса

В мае обновили сайт Автоцентра на Троещине. Старая версия не обновлялась с 2015 года и уже порядком устарела по технической части. Основные проблемы были по части скорости загрузки и веса страниц. Кроме этого было затруднено масштабирование сайта и его дальнейшее развитие. В новой версии сайта добавлен функционал, который значительно упрощает редактирование страниц услуг. Об этом ниже остановлюсь отдельно.

Особенности сайта

Мобильная версия

Особое внимание было уделено мобильной верстке — перед созданием сайта сверили данные веб-аналитики и обнаружили, что более 70% трафика заходит с мобильных устройств. Чтобы этот трафик конвертировался максимально эффективно, реализовали два интересных элемента:

1. липкую кнопку меню;
2. липкую кнопку с телефоном.

Это позволяет пользователю, находясь в любой части сайта, совершить звонок или перейти на другую страницу.

Техническая оптимизация

По технической части сделано все, что позволяет облегчить сайт и ускорить загрузку:

• Все картинки загружаются в нужном разрешении, без избыточных пикселей. Используется формат webp;
• CSS и JS минифицированы и объединены для уменьшения количества запросов.
• Подключено серверное кеширование статических файлов.

В теории, можно улучшить оценку PageSpeed Insights, но дальнейшая оптимизация уже выходит за рамки стандартных методов и требует серьезных изменений сайта. Причем, не факт, что даст какие-то реальные улучшения. Исходя из нашей практике, результаты синтетических тестов не настолько критичны в плане продвижения: в этом легко убедиться, проверив сайты из ТОП-10 практически в любой тематике.

Управление контентом

Добавление и редактирование услуг

95% контента сайта — статические страницы услуг. Каждая из них состоит из блоков:

• заголовка первого уровня,
• картинки с плашкой стоимости,
• описания услуги,
• формы для записи,
• связанных услуг.

Для реализации такой структуры используются специальные поля.

Каждый блок (кроме картинки — она загружается автоматически по названию) редактируется в панели управления:

• service_shortname — короткое название услуги, которое используется в динамическом блоке связанных услуг.
• service_h1 — заголовок первого уровня. Задается отдельным полем для удобства редактирования SEO-специалистом.
• service_price — стоимость услуги. Это поле отображается в плашке на картинке и в блоке связанных услуг.
• service_related_services— связанные услуги, которые попадают в соответствующий блок на каждой странице.

Блок связанных услуг решает две важные задачи:

1. продвижение сопутствующих услуг, которые могут заинтересовать потенциального клиента; 
2. перелинковка для распределения веса страниц.

В текущей версии сайта этот блок задается вручную для каждой услуги, хотя и возможна его автоматическая работа на основании таксономий. Их, кстати, две:

1. Категории работ:
   • диагностика,
   • обслуживание,
   • ремонт,
   • дополнительные услуги.
2. Части автомобиля:
   • автокондиционер,
   • двигатель,
   • коробка передач,
   • кузов,
   • топливная система,
   • тормозная система,
   • ходовая,
   • электрооборудование.

Таксономии на данный момент не задействованы, но позволяют реализовать более удобную навигацию по услугам. Например, для продвижения и рекламы по запросам типа «диагностика автомобиля» будет генерироваться страница с перечнем услуг, которые находятся в категории «диагностика», а для запросов «кузовной ремонт» — с перечнем услуг, которые содержат метку «кузов». Этот функционал обсуждается с SEO-специалистом.

Также по максимуму задействованы специальные поля услуг. Одна из проблем старого сайта — ручное указание стоимости услуги в нескольких местах: на странице услуги, в виджете и в тайтле или дескрипшене. В новой версии цена указывается в одном месте и с помощью переменной service_price подтягивается в любое место. Такой подход позволяет не переживать за то, что где-то будет устаревшая информация.

Добавление отзывов

Один из разделов сайта — отзывы. Они добавляются вручную, как и услуги. У каждого отзыва есть два поля: имя автора и дата. При добавлении отзыва, он автоматически появляется в разделе.