Разработка и редизайн сайта для стоматологии в Омске. Кейс “Стоматология профессора Бокой“

Заказчик

«Стоматология профессора Бокой» — клиника в Омске, работающая с 1991 года. Оказывает услуги по основным направлениям современной стоматологии.

Задача

Ускорить сайт, устранить технические ошибки, внедрить микроразметку, переработать админ-панель Bitrix и полностью обновить дизайн с адаптацией под разные устройства.

Заказчик: «Стоматология профессора Бокой», Омск.

Задача: ускорить загрузку сайта, устранить технические ошибки, внедрить микроразметку, переработать административную панель и провести полный редизайн сайта.

Исходные данные проекта

«Стоматология профессора Бокой» работает с 1991 года. Сайт клиники был разработан на «1С-Битрикс» с использованием PHP, jQuery и MySQL.

К моменту начала работ накопилось несколько групп проблем. Часть страниц медленно загружалась на мобильных устройствах, в HTML- и CSS-коде присутствовали ошибки, некоторые шаблоны и элементы интерфейса работали некорректно. Отдельные URL возвращали ошибку 500.

Административная панель также требовала доработки: часть стандартных свойств Bitrix использовалась некорректно, некоторые данные не отображались на сайте, а управление отдельными разделами было неудобным для сотрудников клиники.

Одновременно заказчик планировал полностью обновить дизайн.

Основные задачи проекта:

• увеличить скорость загрузки страниц;

• исправить ошибки HTML и CSS;

• внедрить микроразметку;

• устранить ошибки интерфейса;

• исправить причины появления HTTP 500 на отдельных URL;

• скорректировать работу шаблонов;

• упростить административную панель;

• провести полный редизайн с адаптивной версткой.

Перед началом работ сделали копию основного сайта, настроили Git-репозиторий и развернули проект на тестовом сервере. Все основные изменения сначала проверяли на тестовой версии.

Увеличили скорость загрузки страниц

Первую проверку производительности сайта стоматологии провели через PageSpeed.

Начальные показатели отличались в зависимости от типа страницы:

На десктопе показатели оставались приемлемыми, однако мобильная версия загружалась значительно хуже.

Анализ показал, что одна из причин задержки — скрипты систем аналитики Яндекса и Google. Страница продолжительное время ожидала загрузки этих ресурсов, прежде чем полностью отдать пользователю основной контент.

Скрипты аналитики перенесли в функцию, которая запускалась после полной загрузки страницы. При этом сохранили передачу данных в системы аналитики.

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

Оптимизировали изображения и добавили ленивую загрузку

На сайт установили решение для Bitrix, которое оптимизирует изображения и конвертирует их в современные форматы WebP и AVIF.

После генерации оптимизированных версий страницы стали загружать изображения меньшего размера.

Дополнительно подключили ленивую загрузку изображений. Шаблоны сайта настроили таким образом, чтобы изображения загружались по мере появления в видимой области экрана пользователя.

После этих изменений показатели мобильной версии значительно выросли.

На контрольной проверке PageSpeed производительность достигла 97 баллов.

Исправили ошибки в коде и внедрили микроразметку

Перед внедрением микроразметки основные страницы проверили валидатором W3C для HTML и CSS.

Проверка выявила ошибки на всех трех типах страниц

Ошибки в шаблонах исправили, после чего приступили к настройке структурированных данных.

Для главной страницы добавили микроразметку Organization. На страницах услуг внедрили BreadcrumbList и Service.

После внедрения страницы повторно проверили валидатором структурированных данных. Микроразметка проходила проверку без ошибок и предупреждений.

Микроразметка после внедрения проходит проверку без ошибок

Переработали административную панель

В процессе аудита выяснилось, что часть проблем сайта была связана с настройкой стандартных свойств Bitrix.

Некоторые свойства использовались как кастомные, хотя изначально предназначались для других задач. Из-за этого в отдельных блоках не отображался нужный контент либо данные выводились некорректно.

Сначала исправили проблемы в разделе блога. Проверили шаблон, скорректировали логику его работы и вынесли статичные блоки в отдельные свойства, чтобы сотрудники клиники могли редактировать их через административную панель.

Аналогичным образом переработали карточки услуг, включая управление прайс-листами.

Отдельная проблема возникала при сохранении публикаций в блоге: изменения записывались, однако на странице обновленная информация не отображалась.

Проверка через инструменты Bitrix показала ошибку базы данных. После ее исправления корректное сохранение и отображение информации восстановили.

В результате административную панель переработали:

• распределили параметры по вкладкам;

• добавили подсказки для менеджера;

• создали отдельные пользовательские свойства под задачи заказчика;

• отключили свойства, которые вызывали ошибки;

• аналогичным образом настроили управление услугами, специалистами, блогом и другими разделами.

Переработали управление контентом в «1С-Битрикс»

Провели полный редизайн сайта

Параллельно с техническими доработками подготовили новый дизайн основных страниц.

Существующий сайт использовал голубые и зеленые цвета, небольшие текстовые блоки и устаревшую структуру подачи информации.

В новом макете изменили визуальную систему, структуру страниц и расположение ключевых элементов.

При разработке пришлось повторно пересмотреть поля административной панели, поскольку в новых макетах появились дополнительные блоки. Управление ими также связали с Bitrix.

Работы выполняли на тестовом сервере.

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

Затем сверстали новый каталог услуг и связали его с Bitrix.

ДО

ПОСЛЕ

Переработали страницы услуг

В новом дизайне страницу услуги разделили на самостоятельные смысловые блоки.

На примере имплантации появились:

• первый экран с описанием услуги, стоимостью и CTA;

• преимущества;

• показания к процедуре;

• варианты имплантов и стоимость;

• дополнительные услуги;

• примеры работ;

• информация о методах имплантации;

• форма записи на консультацию.

Такой подход позволил структурировать большой объем медицинской и коммерческой информации внутри одной страницы.

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

После заполнения блок можно было использовать в основной версии сайта.

Обновили остальные разделы

По новому макету также переработали:

• страницу специалистов;

• контакты;

• прайс-лист;

• страницу «О клинике».

На странице контактов добавили Яндекс Карты и возможность загрузки документов.

Все новые страницы связали с административной панелью, чтобы контент можно было редактировать без внесения изменений непосредственно в шаблоны.

Верстку адаптировали под разные типы устройств.

Дополнительно внесли правки и пожелания заказчика, которые появились уже в процессе реализации нового дизайна.

Перед релизом верстку повторно проверили валидатором на наличие ошибок.

В едином стиле переработали внутренние страницы сайта

Результаты проекта

В рамках проекта одновременно переработали техническую часть сайта, административную панель и пользовательский интерфейс.

По итогам работ:

• производительность мобильной версии в PageSpeed довели до 97 баллов на контрольной проверке;

• исправили ошибки HTML и CSS на основных типах страниц;

• внедрили и проверили микроразметку;

• устранили ошибки и баги, включая проблемы с отдельными URL и сохранением данных;

• переработали административную панель Bitrix;

• реализовали полный редизайн сайта;

• адаптировали новый интерфейс под разные устройства;

• связали новые страницы и контентные блоки с административной панелью.

Перейти на сайт