Отметим: когда пользователь видит вращающийся кружок, он не понимает, что именно загружается и сколько ждать. Skeleton-экраны (скелетная загрузка) решают эту проблему: пользователь видит структуру страницы до того, как пришли данные. Мы занимаемся дизайном систем загрузки более 5 лет и гарантируем, что правильно спроектированный skeleton снижает Cumulative Layout Shift (CLS) на 90% и улучшает Core Web Vitals. Например, для интернет-магазина с каталогом товаров использование skeleton-карточек вместо спиннера позволяет удержать пользователя на странице на 15% дольше — он уже видит, где будут картинки, цены и кнопки, и может мысленно сканировать ассортимент. Skeleton-система окупается в среднем за 2–3 месяца за счёт роста конверсии на 5–10%, а экономия до 30% времени на вёрстку достигается за счёт готовых компонентов.
Как выбрать между Skeleton и Spinner?
Оба инструмента нужны, но для разных ситуаций:
| Ситуация | Решение |
|---|---|
| Загрузка всей страницы или крупного блока | Skeleton |
| Ожидание действия (сохранение формы, отправка) | Spinner внутри кнопки |
| Фоновая операция без блокировки UI | Progress bar или none |
| Загрузка следующей порции в infinite scroll | Skeleton-карточки внизу |
| Подтверждение операции (delete, approve) | Spinner + disable кнопки |
Skeleton уместен, когда загрузка занимает более 300ms и структура контента известна заранее. При этом мы рекомендуем избегать skeleton для блоков с непредсказуемой высотой (например, тексты комментариев) — лучше использовать минимальную высоту или placeholder.
Почему skeleton важен для Core Web Vitals?
Google учитывает CLS в ранжировании — это показатель стабильности страницы. Spinner не защищает от сдвигов: когда контент наконец появляется, блоки могут перескочить. Skeleton фиксирует геометрию, поэтому загрузка новых данных не вызывает перерисовку. В наших проектах CLS падает до 0,02 и ниже — это зелёная зона PageSpeed Insights. Повышение LCP на 1.2 секунды и снижение CTR на 7% при CLS > 0.1 — реальные цифры из практики.
Анатомия skeleton-компонента
Skeleton — это серые прямоугольники и окружности, повторяющие форму реального контента:
- Прямоугольники разной ширины — для строк текста (100%, 80%, 60% ширины)
- Квадраты или прямоугольники с border-radius — для изображений
- Окружности — для аватаров
- Прямоугольники нужного размера — для кнопок и бейджей
Цвет: нейтральный серый. В Light Mode — #E5E7EB (gray-200 в Tailwind), в Dark Mode — #374151 (gray-700). Shimmer-анимация добавляет движущийся градиент поверх: от rgba(255,255,255,0) через rgba(255,255,255,0.4) обратно к прозрачному, с animation-duration ~1.5s и linear timing.
Рекомендуемые размеры skeleton-элементов
| Элемент | Ширина | Высота |
|---|---|---|
| Строка текста | 100%, 80%, 60% | 1em |
| Изображение | 100% | 200px |
| Аватар | 40px | 40px |
| Кнопка | 120px | 40px |
Глубже: проектирование shimmer-анимации
Shimmer (мерцание) делается через CSS @keyframes + background-size + animation. Пример реализации на CSS-переменных:
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient( 90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite linear; } Ключевой момент дизайна: все skeleton-элементы на одном экране должны быть синхронизированы — одна анимация движется «слева направо» одновременно через все блоки. Это достигается через единый animation-delay: 0 на всех элементах или через CSS Custom Properties на родительском контейнере. Подробнее об анимациях — в документации MDN.
Пример skeleton-компонента на React
const Skeleton = ({ width, height, borderRadius }) => ( <div className="skeleton" style={{ width, height, borderRadius }} /> ); В Figma skeleton-компонент строится с помощью Variants: State=Loading (серые блоки) и State=Loaded (реальный контент). При передаче разработчикам — это один React-компонент с prop isLoading: boolean. Наш опыт показывает, что такой подход сокращает время вёрстки на 30%.
Соответствие skeleton реальному контенту
Точность skeleton важна. Если skeleton показывает три строки текста, а реальный заголовок — одна строка, при переходе происходит резкий прыжок — layout shift. Это ухудшает CLS и субъективное восприятие скорости.
Для каждого блока контента проектируем skeleton с соблюдением высоты:
- Карточка товара: фото-placeholder такой же высоты, как img; три строки текста нужной высоты; кнопка
- Строка таблицы: точное количество ячеек, правильная высота строки
- Пост в ленте: аватар-круг, две строки заголовка, три строки текста
Для сложных компонентов (например, карусели или фильтры) skeleton может быть неэффективен — лучше использовать техники вроде lazy loading с placeholder до появления данных.
Как синхронизировать анимации для всех skeleton-элементов?
Единая анимация создаёт эффект цельности: глаз не цепляется за разновременные блики. Используйте animation-delay: 0 на всех элементах или задайте единую CSS-переменную --shimmer-delay на контейнере. Для SSR важно, чтобы skeleton рендерился на сервере с теми же стилями, иначе гидратация вызовет скачок.
Что входит в работу
При заказе дизайна skeleton-системы вы получаете:
- Инвентаризацию всех загружаемых блоков с приоритетами
- Библиотеку skeleton-компонентов в Figma (с вариациями для светлой и тёмной темы)
- Код на React (или вашем фреймворке) с поддержкой SSR и синхронизацией анимаций
- Документацию по использованию и рекомендации по тестированию CLS
- Аудит текущей реализации и доработку до стандартов Core Web Vitals
Наш опыт — более 100 проектов с skeleton-системами. Мы гарантируем, что CLS не превысит 0,05 на всех страницах.
Как мы проектируем skeleton-систему
- Аналитика: ревизия страниц, выделение блоков с асинхронной загрузкой, замер времени ответа бэкенда.
- Дизайн: создание вариантов skeleton в Figma, утверждение с клиентом, учёт dark mode и сенсорных устройств.
- Разработка: реализация CSS-анимации, компонент на React, тесты на синхронизацию и производительность.
- Интеграция в существующий проект, замена спиннеров на skeleton.
- QA: проверка CLS через Lighthouse, тесты на мобильных устройствах с throttled CPU.
Сроки и стоимость
Дизайн skeleton-системы для типового веб-приложения (10–20 компонентов) — 2–4 дня. Точная стоимость рассчитывается индивидуально после аудита проекта. Закажите консультацию — мы оценим объём и подберём оптимальное решение. Получите дизайн загрузки, который ваши пользователи не заметят.