Покупатель нажимает фильтр «в наличии», и на пару секунд каталог гаснет: пустое поле и одинокий крутящийся кружок. Кажется мелочью, но именно в эти секунды посетитель решает, ждать или закрыть вкладку. Спиннер честно говорит «сайт что-то делает», но не даёт ощущения прогресса — а пустота на месте товаров читается как «сломалось».
Эта статья — о том, как заменить абстрактные спиннеры на скелетоны: серые плейсхолдеры будущих карточек, которые показывают структуру страницы ещё до того, как приедут данные. Разберём, где в каталоге на 1С-Битрикс это уместно, как связать скелетоны с умным фильтром и композитным сайтом и как не сделать хуже. Тему производительности каталога мы системно закрываем в рамках аудита и оптимизации на 1С.
Коротко
- Спиннер сообщает «идёт загрузка», скелетон показывает будущую структуру — второе воспринимается быстрее.
- Скелетоны нужны там, где контент подгружается асинхронно: фильтр, AJAX-подгрузка, цены и остатки клиента.
- Плейсхолдеры резервируют место под контент и убирают скачки вёрстки (CLS).
- Показывайте скелетон с задержкой 150–200 мс, чтобы он не мигал на быстрых ответах.
Почему пустой экран убивает конверсию
Ожидание в интернет-магазине — это всегда риск потери. Чем дольше и «непонятнее» пауза между действием и результатом, тем выше шанс, что человек уйдёт. Причём важно не только реальное время загрузки, но и то, как оно ощущается. Пустой белый экран без обратной связи субъективно тянется дольше, чем такая же пауза, во время которой на экране что-то происходит.
В каталоге таких пауз много: смена страницы товаров, применение фильтра, сортировка, догрузка персональных цен. Если каждая из них — это моргание в пустоту, посетитель накапливает раздражение. Скелетон превращает паузу из «сайт завис» в «сайт готовит контент», и это прямо влияет на глубину просмотра и конверсию.
Что видит покупатель во время загрузки
- Ничего. Пустое поле — худший вариант: неясно, работает сайт или сломался.
- Спиннер. Есть обратная связь, но нет прогресса и структуры.
- Скелетон. Видна будущая раскладка страницы, ожидание ощущается коротким.
Спиннер против скелетона
Оба индикатора решают одну задачу — показать, что идёт загрузка, — но делают это по-разному. Спиннер абстрактен и не привязан к контенту: он одинаков для карточки товара, для формы и для целой страницы. Скелетон, наоборот, имитирует конкретный блок, который вот-вот появится.
| Критерий | Спиннер | Скелетон |
|---|---|---|
| Что показывает | Факт загрузки | Будущую структуру блока |
| Ощущение времени | Тянется дольше | Короче |
| Скачки вёрстки | Не резервирует место | Резервирует место под контент |
| Переход к контенту | Резкая замена | Плавная замена по месту |
| Когда уместен | Короткие точечные действия | Загрузка списков и карточек |
Вывод простой: спиннер оправдан для мелких точечных операций (нажали «в избранное», ждём ответ на кнопке), а для загрузки блоков контента — списка товаров, карточки, результатов фильтра — почти всегда лучше скелетон.
Как работает воспринимаемое ожидание
Воспринимаемая производительность — это то, насколько быстрым пользователь считает сайт, независимо от секунд на таймере. Человек оценивает скорость не секундомером, а ощущениями: есть ли обратная связь, виден ли прогресс, узнаёт ли он будущую структуру. Скелетон работает именно на этом уровне.
Когда посетитель видит контуры карточек, его мозг уже «читает» будущую страницу и достраивает ожидание. Появление реальных данных на подготовленных местах воспринимается как «дозагрузка», а не как «перерисовка с нуля». Поэтому та же по времени пауза со скелетоном ощущается заметно короче, чем со спиннером или пустым экраном.
Где в каталоге Битрикса нужны скелетоны
Скелетон нужен там, где между действием пользователя и появлением контента есть асинхронная пауза. В типовом магазине на 1С-Битрикс это несколько мест:
- Результаты умного фильтра. После применения набора свойств список товаров перестраивается AJAX-ом — идеальное место для скелетонов карточек.
- AJAX-подгрузка страниц. «Показать ещё» и бесконечная лента: новые карточки можно вводить через скелетоны.
- Смена сортировки и вида. Переключение «сначала дешёвые» или сетка/список обновляет выдачу — плейсхолдеры сглаживают переход.
- Догрузка цен и остатков. Персональная цена группы и наличие по складу часто подгружаются отдельно от статики — на их месте ставят мини-скелетоны.
- Карточка товара. Блоки «с этим покупают», отзывы, доступность по складам грузятся отложенно.
Скорость каталога в целом — фундамент, на который скелетоны наслаиваются. Как её поднимать системно, мы разбираем в услуге аудита и оптимизации на 1С, а вопросы инфраструктуры — в статье про хостинг и инфраструктуру BitrixVM.
Скелетоны и умный фильтр
Умный фильтр catalog.smart.filter — главный кандидат на скелетоны. Пользователь отмечает свойства, компонент пересчитывает выдачу и подменяет список товаров без перезагрузки страницы. В момент пересчёта старые карточки исчезают, а новые ещё не пришли — и если в этот зазор показать пустоту, интерфейс кажется сломанным.
Правильный сценарий выглядит так: как только пользователь применил фильтр, на месте товаров появляется сетка скелетонов той же геометрии, что и карточки. Когда AJAX-ответ приходит, скелетоны заменяются реальными товарами. Число плейсхолдеров можно держать равным ожидаемому числу карточек на странице, чтобы высота блока не прыгала.
Связка с композитным сайтом
Композитный сайт Битрикса делит страницу на две части: статический кэш, который отдаётся мгновенно, и динамические блоки, которые догружаются AJAX-ом уже в браузере. Это и есть естественная зона для скелетонов: статика (шапка, каркас каталога, статичные карточки) появляется сразу, а на месте персональных данных стоят плейсхолдеры.
Персональная цена группы клиента, наличие по складу, содержимое корзины — всё это динамика, которую нельзя закэшировать одинаково для всех. Пока она грузится, вместо «прыгающих» пустых мест логично показать мини-скелетоны. Подробнее о том, как устроена отложенная загрузка и деплой таких решений, мы писали в материале про CI/CD и деплой на Битрикс.
Скелетоны против скачков вёрстки
Отдельная ценность скелетона — он резервирует место под будущий контент и тем самым борется со скачками вёрстки (CLS, Cumulative Layout Shift). Если картинка или блок цены появляются «вдруг» и сдвигают всё вокруг, пользователь теряет точку клика и раздражается. Скелетон занимает ровно ту площадь, которую займёт контент.
- Задайте размеры плейсхолдеров. Скелетон карточки должен совпадать по высоте с реальной карточкой.
- Резервируйте место под картинку. У изображения товара — фиксированное соотношение сторон, чтобы блок не «схлопывался».
- Держите стабильную сетку. Число колонок и отступы одинаковы для скелетонов и карточек.
Скачки вёрстки — большая отдельная тема, влияющая и на UX, и на Core Web Vitals. Детальный разбор — в статье про то, как убрать скачки вёрстки и приручить Cumulative Layout Shift на Битриксе.
Как спроектировать скелетон карточки
Хороший скелетон повторяет геометрию реального блока, а не просто закрывает область серым прямоугольником. Для карточки товара это набор плейсхолдеров под её основные элементы.
- Область изображения. Прямоугольник с тем же соотношением сторон, что и фото товара.
- Название. Одна-две «строки» разной ширины, имитирующие текст.
- Цена. Короткий блок на месте будущей цены; для B2B — с учётом того, что цена может догружаться отдельно.
- Кнопка и наличие. Плейсхолдер под кнопку «В корзину» и метку наличия.
Плейсхолдеры делают нейтрально-серыми с лёгкой анимацией «мерцания» (shimmer), которая подсказывает, что это временное состояние, а не готовый контент. Анимация должна быть спокойной: агрессивное мигание утомляет и выглядит дёшево.
Тайминги: задержка и минимальное время
Скелетон легко испортить неправильными таймингами. Две главные настройки — задержка появления и минимальное время показа.
- Задержка перед показом (150–200 мс). Если ответ приходит быстрее, скелетон вообще не показывается — так убирается мелькание на быстрых загрузках.
- Минимальное время показа. Если скелетон уже появился, держите его хотя бы короткий момент, чтобы он не «мигнул» и не исчез в ту же миллисекунду.
- Таймаут ошибки. Если данные не пришли за разумное время, скелетон сменяется не бесконечным ожиданием, а сообщением об ошибке с кнопкой «повторить».
Эти правила защищают от двух крайностей: мелькающих плейсхолдеров на быстром интернете и «вечного скелетона» при сбое запроса.
Реализация в 1С-Битрикс пошагово
Технически скелетоны в каталоге на 1С-Битрикс собираются поверх штатных AJAX-механизмов компонентов. Общая последовательность такая:
- Выделите асинхронные зоны. Найдите места, где список или блок перерисовывается AJAX-ом: фильтр, подгрузка страниц, догрузка цен.
- Сверстайте шаблоны скелетонов. Под ключевые блоки (карточка, строка списка) сделайте HTML/CSS-плейсхолдеры нужной геометрии.
- Подключите к событиям. Перед AJAX-запросом показывайте скелетоны, после получения ответа — заменяйте их реальной разметкой из компонента.
- Настройте тайминги. Добавьте задержку появления и обработку таймаута с ошибкой.
- Свяжите с композитом. Динамические блоки (цена, остаток) закройте мини-скелетонами до их догрузки.
- Проверьте на медленной сети. Прогоните сценарии с троттлингом, чтобы увидеть скелетоны в деле, а не только на быстром интернете.
Если каталог сложный, а логика подгрузки нестандартная, эту часть выносят в аккуратную фронтенд-разработку поверх компонентов. Смежные инженерные темы — REST и вебхуки — мы разбирали в статье про REST, вебхуки и безопасность в Битрикс, а работу с данными — в материале про D7 ORM в Битрикс.
Доступность и деликатные детали
Скелетон — это временный визуальный шум, и его нужно сделать корректным для всех пользователей.
- Скринридеры. Плейсхолдеры не должны зачитываться как контент; область помечают как «загрузка», а не как реальные данные.
- Уважение к prefers-reduced-motion. Для пользователей, отключивших анимации, мерцание скелетона стоит смягчить или убрать.
- Контраст. Плейсхолдеры делают достаточно заметными, но не кричащими, чтобы не перетягивать внимание.
- Согласованность с темой. В тёмной теме скелетон тоже должен выглядеть уместно, а не как белые дыры.
Частые ошибки
- Скелетон не совпадает с контентом. После загрузки вёрстка всё равно прыгает, потому что плейсхолдер был другой формы.
- Мелькание на быстрых ответах. Скелетон показывают мгновенно, без задержки, и он мигает при быстрой загрузке.
- Вечный скелетон при ошибке. Запрос упал, а плейсхолдеры крутятся бесконечно вместо честного сообщения.
- Скелетон на нулевой выдаче. Фильтр ничего не нашёл, а вместо «не найдено» висят пустые карточки.
- Слишком агрессивная анимация. Резкое мерцание утомляет и выглядит навязчиво.
- Скелетон везде. Плейсхолдеры лепят и на мгновенные действия, где хватило бы спиннера на кнопке.
Чек-лист внедрения
- Асинхронные зоны найдены. Определены все места каталога, где контент подгружается с паузой.
- Скелетоны совпадают с блоками. Геометрия плейсхолдеров равна геометрии реальных карточек и строк.
- Место зарезервировано. Плейсхолдеры держат высоту и сетку, скачков вёрстки нет.
- Тайминги настроены. Есть задержка появления и обработка таймаута с ошибкой.
- Пустая выдача обработана. На нулевом результате показывается «не найдено», а не бесконечный скелетон.
- Композит учтён. Динамические цены и остатки закрыты мини-скелетонами до догрузки.
- Доступность проверена. Скринридеры, reduced-motion и тёмная тема учтены.
- Тест на медленной сети пройден. Поведение проверено с троттлингом, а не только на быстром интернете.
Вывод
Скелетоны не делают сайт быстрее по секундомеру, но делают его быстрее по ощущениям — а именно ощущение скорости удерживает покупателя в момент ожидания. Заменив абстрактные спиннеры на плейсхолдеры реальных карточек, вы убираете «пустой экран», сглаживаете переходы и заодно боретесь со скачками вёрстки.
В каталоге на 1С-Битрикс скелетоны особенно уместны на умном фильтре, AJAX-подгрузке и догрузке персональных цен по композиту. Настройте геометрию плейсхолдеров, аккуратные тайминги и честную обработку ошибок — и состояние загрузки из слабого места превратится в деталь, которая работает на конверсию.
