Как сократить время загрузки страниц на сайте медицинского центра

Человек открывает сайт клиники с телефона и ищет телефон регистратуры, адрес или конкретного врача. Если экран долго остаётся пустым, а кнопка «Записаться» сдвигается в момент нажатия, он вернётся к выдаче и выберет другую клинику. Ниже разберём, где у медицинских сайтов обычно теряется время и что можно изменить без полной переделки.

Что чаще всего замедляет сайт клиники

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

• фотографии врачей и баннеры загружены почти в исходном размере с камеры;
• сторонние скрипты: онлайн-запись, чат, обратный звонок, коллтрекинг, счётчики, виджет отзывов, карта;
• тяжёлая тема или конструктор, который подключает десятки файлов стилей и скриптов на каждой странице, хотя нужны они только на некоторых;
• медленный ответ сервера: нет кэша, а каждый просмотр прайса запускает десятки запросов к базе данных.

Как измерить скорость до начала правок

Откройте PageSpeed Insights или Lighthouse и проверьте не только главную, но и три типа страниц: каталог врачей, страницу услуги и контакты. Обратите внимание на три показателя:

• LCP: за сколько появляется самый крупный блок экрана, чаще всего баннер или фото;
• CLS: насколько элементы смещаются в процессе загрузки;
• FID: как быстро страница реагирует на первое нажатие. В отчёте он есть, если у Google накопились данные реальных посетителей.

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

Условный пример: каталог «Наши врачи»

Представим страницу с 40 карточками. В каждой есть фото, ФИО, специальность, стаж и кнопка записи. Это гипотетический шаблон, но проблемы в нём типичны. Фото загружены в ширину 3000 px, хотя показываются в блоке шириной 300 px. Все изображения грузятся сразу, включая те, что находятся в самом низу. Размеры в разметке не заданы, поэтому текст «прыгает» по мере появления картинок. Фрагмент карточки после правки может выглядеть так:

<img src='doctor-300.webp'
     srcset='doctor-300.webp 300w, doctor-600.webp 600w'
     sizes='(max-width: 600px) 50vw, 300px'
     width='300' height='375'
     loading='lazy'
     alt='Врач-терапевт, ФИО'>

Здесь браузер получает файл подходящего размера, заранее резервирует место под фото и откладывает загрузку нижних карточек. Для первых 3–4 карточек, которые видны сразу, отложенную загрузку лучше отключить, иначе первый экран появится позже. Кнопку записи стоит сделать обычной ссылкой или кнопкой, а тяжёлый виджет подгружать только после нажатия. Список специальностей и фильтр лучше выводить на сервере, а не собирать скриптом после открытия страницы.

Виджеты записи, чаты, карты и счётчики

Для каждого стороннего скрипта нужно знать три вещи: кто за него отвечает, какую задачу он решает и на каких страницах он действительно нужен. Часто выясняется, что старый виджет остался от прошлого подрядчика, а три счётчика дублируют друг друга. Что можно сделать:

• подключать скрипты с атрибутами async или defer, чтобы они не блокировали отображение страницы;
• чат и обратный звонок загружать после первого действия посетителя или с небольшой задержкой;
• на главной вместо интерактивной карты показывать статичную заглушку с адресом и загружать карту по клику;
• объединить счётчики и пиксели через менеджер тегов и отключить лишние;
• ограничить число шрифтов и начертаний, добавить font-display: swap, чтобы текст был виден сразу.

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

Сервер, кэш и CMS

Если сервер долго отвечает, никакая оптимизация картинок не спасёт. Проверьте, включено ли кэширование страниц, сжатие текстовых файлов, актуальна ли версия PHP или другой серверной платформы. Лишние плагины и неиспользуемые модули стоит удалить, а не просто отключить. Прайс-листы и описания услуг хорошо кэшируются. Формы записи, личный кабинет и страницы с персональными данными целиком кэшировать нельзя: их нужно настраивать отдельно. Если пациенты приходят из разных регионов, подумайте о CDN для статических файлов.

Все статьи блога