Родители и школьники часто выбирают репетитора с телефона: в дороге, на перемене, при нестабильном мобильном интернете. Если страница курса долго остаётся пустой, человек возвращается к списку результатов и открывает сайт другого центра. Ниже разобрано, что обычно тормозит сайты репетиторских центров и как это исправить по шагам.
Что тормозит страницу курса и как это увидеть
У сайтов таких центров похожий набор «тяжёлых» элементов: крупные фотографии преподавателей, слайдер на главной, сканы дипломов и лицензии, виджеты соцсетей, карта проезда, онлайн-консультант, форма записи на пробное занятие. Каждый элемент добавляет запросы к серверу и килобайты, которые нужно скачать.
Начните с измерений. Откройте главную, страницу курса, страницу преподавателей и контакты в Google PageSpeed Insights или WebPageTest. Затем откройте вкладку Network в инструментах разработчика браузера. Смотрите на три вещи: общий вес страницы, число запросов и то, что загружается раньше текста с названием курса и кнопкой записи. Проверьте сайт и с телефона через мобильную сеть, а не только с офисного компьютера.
Условный пример: страница «Подготовка к ЕГЭ по математике»
Представим типичную страницу. Вверху слайдер из пяти фотографий шириной 1920 пикселей. Ниже двенадцать фото преподавателей: файлы по 2000 пикселей, а на экране они показаны размером 150. Дальше расписание, виджет группы в соцсети, чат-консультант, форма записи и интерактивная карта. Скрипты подключены в начале страницы, а шрифт загружается в пяти начертаниях.
Что можно сделать по порядку:
- Сделать копии фото в реальном размере показа и сжать их.
- Оставить в слайдере один главный кадр или заменить слайдер статичным блоком с кнопкой записи.
- Заменить виджет соцсети ссылкой на группу.
- Показывать карту картинкой, а интерактивную версию подгружать по клику.
- Перенести скрипты в конец страницы и оставить два-три начертания шрифта.
Текст, расписание и кнопка записи при этом остаются на месте, а страница быстрее становится читаемой.
Фото преподавателей и слайдеры: размер важнее количества
Изображения чаще всего занимают большую часть веса страницы. Делайте файл под реальное место показа: если фото выводится шириной 150 пикселей, для обычных экранов хватит примерно 300, а не 2000. Фотографии сохраняйте в JPEG с умеренным качеством, подбирая его на глаз, а PNG оставьте для логотипов и простых значков. Мелкие иконки (соцсети, телефон, адрес) удобно собрать в один файл-спрайт, чтобы не делать десяток запросов.
Для длинных страниц со списком преподавателей подойдёт отложенная загрузка: фото ниже первого экрана подгружаются скриптом, когда посетитель до них доходит. Заодно укажите в разметке ширину и высоту изображений, чтобы текст не прыгал при загрузке.
Виджеты, карта и чат: что можно загружать позже
Внешние виджеты тянут свои скрипты и стили с чужих серверов, и вы не контролируете их скорость. Для центра важны телефон, адрес, расписание и запись, а лента соцсети нужна не всем. Поэтому оставьте на странице только то, что помогает записаться, а остальное вынесите по ссылкам.
Карту на странице контактов можно показать статичным изображением с адресом и кнопкой «Показать на карте». Чат-консультант и счётчики подключайте после загрузки основного содержимого. Если на сайте несколько похожих плагинов (слайдер, лайтбокс, всплывающие окна), оставьте только нужные: лишний плагин — это ещё один файл скрипта и стилей.
Сжатие, кэш и хостинг
Попросите разработчика проверить три настройки сервера: сжатие текстовых файлов (HTML, CSS, JavaScript) через gzip, заголовки кэширования для картинок, стилей и скриптов и объединение мелких файлов стилей и скриптов с минификацией. Если сайт работает на CMS, включите плагин или встроенный модуль кэширования страниц, чтобы расписание и описание курсов не собирались заново при каждом визите.
Если после этого сервер всё равно отвечает медленно, посмотрите на хостинг. На перегруженном общем тарифе ускорение картинок даст мало, и стоит обсудить смену тарифа или площадки.
Проверочный список перед публикацией
- Страницы курса, преподавателей и контактов проверены в PageSpeed Insights или WebPageTest.
- Ни одно фото не загружается крупнее, чем показывается на экране.
- Фото ниже первого экрана подгружаются по мере прокрутки.
- Слайдер не занимает больше одного экрана без пользы для записи.
- Виджеты соцсетей заменены ссылками или загружаются после основного содержимого.
- Карта на странице контактов показана картинкой, интерактивная загружается по клику.
- Включены gzip, кэширование файлов и минификация стилей и скриптов.
- Подключены только нужные шрифты и плагины.
- Форма записи на пробное занятие появляется и работает без ожидания внешних скриптов.
- Сайт проверен с телефона через мобильный интернет.
Повторяйте проверку после каждого крупного изменения: новый виджет или баннер легко вернёт сайту прежнюю медлительность.
