Разработка и редизайн сайта для стоматологии “Стоматология профессора Бокой” Клиент: Стоматология профессора Бокой
О клиенте
Стоматологическая клиника профессора Бокой Валентины Георгиевны, работающая с 1991 года. Единственная профессорская стоматология в г. Омск.
Стек технологий
Основные задачи
- Увеличить скорость загрузки страниц
- Исправить ошибки валидации сайта
- Внедрить микроразметку
- Исправить ошибки интерфейса
- Сделать админ-панель более удобной
- Исправить баги, из-за которых некоторые урлы возвращают ошибку с кодом 500
- Скорректировать работу некоторых шаблонов сайта
- Полный редизайн сайта по новому макету
Для работы над проектом сделали слепок основного сайта, настроили Git-репозиторий и вынесли на наш тестовый сервер.
Увеличение скорости загрузки страниц
Все основные тесты производились через сервис PageSpeed. Исходная картина производительности выглядела так:
Если показатели для десктоп версии были еще оптимальные, то для мобильной все было в два раза хуже. Основная проблема, из-за которой показатели были снижены, в том, что страница долго отдавала контент, не давая пользователю работать с сайтом.
Для решения этой проблемы был просмотрен лог pagespeed. Мы выяснили, что больше всего тормозят страницу скрипты для отслеживания метрики от Яндекс и Google.
Вынесли все скрипты с метрикой в функцию, ожидающую полную загрузку страницы перед запуском. Настроили её поведение так, чтобы не искажать данные метрик, и выполнили очередной тест. Показатели сильно улучшились, но на этом мы не остановились.
Установили плагин для Bitrix, который бы обжимал изображения в формат .webp, подключили его на сайт и сделали генерацию. Теперь на страницу выводились легковесные изображения, сильно не нагружающие её.
Также подключили ещё одну библиотеку Jquery Lazy, настроили каждый шаблон под её использование, теперь к изображениям была применена ленивая загрузка, изображения подтягивались по мере того, что видит пользователь.
Основные показатели для мобильных устройств выросли почти до максимума.
Работа с микроразметкой
Перед началом работ пропустили каждую из основных страниц через валидатор w3 для css и html кода.
Валидатор выявил ряд ошибок в шаблонах, которые вскоре исправили.
По требованию заказчика после добавили микроразметку для типов Organization (главная страница), Breadcrumbs и Service (страницы услуг).
Вновь пропустили через валидатор, только уже с помощью Schema.org, чтоб убедиться, что ошибок нет и микроразметка настроена правильно.
Улучшение админ-панели
Потребность в улучшении возникла из-за постоянных проблем, возникающих при работе со стандартными свойствами Bitrix: где-то свойства были кастомные, но работали некорректно, из-за чего в некоторых блоках вовсе не отображался нужный контент, либо этот контент был статичный и не был настроен на работу с админ-панелью.
Для начала исправили первоочередные недочеты, связанные с отображением статей в блоге. Был проверен шаблон, внесли коррективы в логику, также вынесли статичные блоки в отдельные свойства, чтобы они могли настраиваться из-под админки. Те же действия были проделаны с шаблонами карточек услуг, где неправильно отображался прайс-лист.
Также была проблема с сохранением постов в блог: изменения вносились, но на странице не отображались, логика в шаблонах при этом была верная. Через инструменты Bitrix проверили стабильность сайта и выяснили, что причина была в ошибках базы данных. На месте запустили исправление, и ошибку в поведении работы сайта удалось решить.
Админ-панель полностью переработали, разнесли по вкладкам, внесли памятки для менеджера, создали отдельное кастомное свойство под потребности заказчика и отключили свойства, вызывающие ошибки на сайте.
По тому же принципу перебрали админ-панель для заполнения карточки услуг, специалистов, блога и т.д.
Редизайн сайта
В скором времени был подготовлен макет, в котором полностью переработали дизайн основных страниц сайта, потребовалось проделать крупную работу, вновь пересмотреть поля админ-панели, т.к. появились новые блоки. Вся работа велась на нашем тестовом сервере.
Дизайн до:
Дизайн после:
Чтобы клиент успел заполнить новые блоки, после того как всё будет сделано, мы вынесли всё в отдельный инфоблок, который будет скрыт от пользователей, но доступен для просмотра администратору, и, после того как всё заполнит, мы сделаем этот инфоблок основным.
Главная страница была сверстана быстрее всего, т.к. включает в себя информативные блоки из каталога.
Сверстали новый макет каталога и связали его с Bitrix.
Прочие изменения
Были переделаны страницы: прайс лист, страница со специалистами, о клинике и контакты, — по новому макету.
- Для страницы контакты добавили яндекс карты, добавили возможность загружать документы.
- Каждую страницу связали с админ панелью.
- Адаптировали под разные типы устройств.
- Правки/Пожелания от клиента, которые мы тоже внесли вне основного макета.
- Перед релизом вновь провалидировали вёрстку на предмет ошибок.
Результаты
- Ускорили сайт до максимальных значений по PageSpeed
- Улучшили админ панель
- Исправили множество багов и ошибок
- Полный редизайн сайта с адаптивной вёрсткой
- Множество исправлений, связанных с неправильной работой интерфейса