Зауважте: коли користувач бачить кружок, що крутиться, він не розуміє, що саме завантажується і скільки чекати. Skeleton-екрани (скелетне завантаження) вирішують цю проблему: користувач бачить структуру сторінки до того, як прийшли дані. Ми займаємося дизайном систем завантаження більше 5 років і гарантуємо, що правильно спроектований skeleton знижує Cumulative Layout Shift (CLS) на 90% і покращує Core Web Vitals. Наприклад, для інтернет-магазину з каталогом товарів використання skeleton-карток замість спіннера дозволяє утримати користувача на сторінці на 15% довше — він уже бачить, де будуть картинки, ціни та кнопки, і може подумки сканувати асортимент. Skeleton-система окупається в середньому за 2–3 місяці за рахунок зростання конверсії на 5–10%, а економія до 30% часу на верстку досягається завдяки готовим компонентам. Вартість дизайну skeleton-системи зазвичай становить від $1,500 до $4,000 залежно від обсягу.
Як вибрати між Skeleton та Spinner?
Обидва інструменти потрібні, але для різних ситуацій. Skeleton-екрани сприймаються як мінімум в 2 рази швидше за спіннери:
| Ситуація | Рішення |
|---|---|
| Завантаження всієї сторінки або великого блоку | 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 дні. Точна вартість розраховується індивідуально після аудиту проекту. Замовте консультацію — ми оцінимо обсяг та підберемо оптимальне рішення. Отримайте дизайн завантаження, який ваші користувачі не помітять.