Сайт кадрового агентства обычно открывают с телефона: соискатель смотрит вакансии в дороге, а HR-менеджер компании-заказчика проверяет страницу услуг. Если список вакансий долго не появляется, человек возвращается в выдачу или идёт на крупную площадку. Ниже разберём, где на таких сайтах чаще всего теряется время и какие меры дают заметный эффект.
Почему каталог вакансий тормозит чаще других страниц
Главная и страница услуг почти статичны. Каталог устроен сложнее: на каждый запрос сайт собирает список из базы, применяет фильтры (город, график, зарплата, сфера), подставляет логотипы работодателей и считает количество найденных позиций. Вакансии часто приходят из внешней системы или файла выгрузки, и тогда страница ещё и ждёт ответа чужого сервиса. Вторая группа причин — тяжёлые «украшения»: большое фото команды, видео-фон, карусель отзывов, несколько виджетов в одном экране.
С чего начать: измерить именно те страницы, которые приводят людей
Выберите четыре типа страниц: главную, каталог вакансий с включённым фильтром, карточку вакансии и страницу с формой отклика. Проверьте их в PageSpeed Insights или Lighthouse на мобильном профиле и сохраните результаты. Обращайте внимание на три показателя:
- LCP — когда появился самый крупный элемент первого экрана (часто это баннер или заголовок со списком);
- CLS — прыгает ли вёрстка, пока подгружаются логотипы, шрифты и баннер о cookie;
- время блокировки основного потока: оно показывает, насколько скрипты мешают нажать на кнопку «Откликнуться».
Лабораторные цифры нужно сверять с реальными: у Метрики есть данные о времени загрузки у посетителей, а у Google есть отчёты по реальным пользователям, если трафика достаточно. Результат зависит от устройств и сетей вашей аудитории, поэтому универсального «хорошего числа» для всех сайтов нет.
Как разгрузить список вакансий на стороне сервера
Сначала посмотрите, сколько запросов к базе делает один показ каталога и сколько ответа вы ждёте от внешней системы. Затем применяйте простые меры:
- не обращайтесь к внешней системе на каждый показ страницы: импортируйте вакансии по расписанию в свою базу;
- кэшируйте готовый HTML популярных списков («Вакансии в вашем городе», «Склад и логистика») и сбрасывайте кэш, когда вакансия закрыта или добавлена, чтобы не показывать неактуальное;
- добавьте индексы в базе на поля фильтров: город, сфера, график, дата публикации;
- используйте постраничный вывод по 20–30 записей вместо загрузки всего списка;
- не считайте точное число найденных вакансий для каждой комбинации фильтров, если для этого нужен тяжёлый запрос.
Изображения, шрифты и скрипты: пример фрагмента страницы
Возьмём условную страницу «Вакансии: склад и логистика». Вверху заголовок, фильтры и первые карточки, у каждой есть логотип работодателя. Типичная ошибка — одинаково грузить все логотипы сразу и подключать шрифт с пятью начертаниями. Лучше так:
<link rel="preload" href="/fonts/text-cyr.woff2" as="font" type="font/woff2" crossorigin>
<img src="/img/logistics-hero.webp" width="800" height="360"
fetchpriority="high" alt="Склад: подбор персонала">
<!-- карточки ниже первого экрана -->
<img src="/logos/employer-17.webp" width="64" height="64"
loading="lazy" decoding="async" alt="Логотип работодателя">Что здесь важно. Главному изображению первого экрана приоритет повышен, а «ленивую» загрузку к нему применять не нужно. Ширина и высота заданы, поэтому место под картинку резервируется и вёрстка не прыгает. Логотипы ниже экрана грузятся по мере прокрутки. В шрифтах оставьте один-два файла в формате WOFF2 с кириллицей и добавьте в стили font-display: swap, чтобы текст был виден сразу.
Сторонние виджеты: чат, коллтрекинг, формы
У кадровых агентств на странице часто собираются онлайн-чат, подмена номера телефона, две системы аналитики, пиксели рекламных кабинетов, карта офиса и виджет отзывов. Каждый такой блок тянет свои скрипты, и вместе они могут задерживать интерактивность сильнее, чем фотографии. Что можно сделать:
- составьте список всех внешних скриптов и спросите по каждому, кто использует данные и что случится, если его убрать;
- чат и карту подгружайте после первого касания, прокрутки или клика по заглушке;
- видео с внешних сервисов заменяйте превью-картинкой, плеер подключайте по клику;
- форму отклика делайте лёгкой: загрузку резюме можно оформить обычным полем файла, а проверки и маски телефона сделать небольшим собственным кодом, а не тяжёлой библиотекой;
- задайте разумный лимит размера файла резюме и покажите понятное сообщение, если он превышен.
Проверочный список перед запуском изменений
- Замерены главная, каталог с фильтром, карточка вакансии и форма отклика, результаты сохранены.
- Вакансии берутся из своей базы, а не напрямую из внешнего сервиса при каждом показе.
- Для популярных списков есть кэш и сброс при изменении вакансии.
- Список разбит на страницы, на фильтрах есть индексы.
- Изображения в современных форматах, с размерами, у всех кроме главного — ленивая загрузка.
- Подключено не более двух файлов шрифтов с кириллицей.
- Чат, карта и видео загружаются по действию пользователя.
- Форма отклика работает на телефоне без заметной задержки после нажатия.
- После правок замеры повторены на тех же страницах.
Меняйте по одному пункту и сравнивайте с исходными замерами: так видно, что помогло, а что только усложнило сайт. Ускорение улучшает опыт посетителя, но не гарантирует позиций в поиске.
