Ми бачимо це постійно: дизайн у Figma виглядає ідеально, але після верстки на мобільних все пливе, Lighthouse скаржиться на CLS 0,5+, а SEO-спеціаліст нарікає на невірну ієрархію заголовків. Нещодавно ми підхопили проект, де через пропущений <main> і неправильні alt-атрибути сайт втрачав 30% трафіку. Все це можна уникнути, якщо з самого початку закласти правильну семантику, сучасний CSS і продуктивність.
Ми взялися за переробку інтернет-магазину з 50% CLS до безпечного рівня. Вихідний код містив безліч абсолютних позиціонувань і відсутність семантики. Після впровадження CSS Grid та Container Queries метрики покращилися: LCP впав з 4,2 до 1,8 с, CLS — з 0,45 до 0,03. Трафік зріс на 15% всього за два тижні після перезапуску. Ми переконалися: якісна верстка окупається швидше, ніж здається.
Чому семантична розмітка — не про релігію, а про SEO?
Браузери та пошуковики будують дерево доступності з HTML. Помилки в семантиці коштують дорого: невірна структура заголовків знижує ранжування, пропущені <main> або <nav> псують індексацію. Використання landmark-елементів, таких як <header>, <footer>, <aside>, покращує навігацію для скрінрідерів і дає бонуси в Lighthouse. Ми завжди слідуємо рекомендаціям MDN Web Docs щодо семантичного HTML.
<!DOCTYPE html> <html lang="uk"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Назва сторінки — Назва сайту</title> <meta name="description" content="..."> <link rel="canonical" href="https://example.com/page/"> <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> </head> <body> <header role="banner"> <nav aria-label="Основна навігація" tabindex="0">...</nav> </header> <main id="main-content"> <article> <header><h1>Заголовок</h1></header> <section>...</section> </article> <aside aria-label="Додатково">...</aside> </main> <footer>...</footer> </body> </html> Сучасний CSS: що ми використовуємо
Стек CSS вирішує задачі, для яких раніше потрібен був JavaScript. Порівняйте: CSS Grid будує складні двомірні макети в кілька рядків, а Flexbox хороший для одномірних розкладок. У 9 з 10 випадків Grid кращий за повторювані float або display:table. Нижче — порівняння підходів:
| Особливість | CSS Grid | Flexbox |
|---|---|---|
| Напрямок | Двомірний (рядки та стовпці) | Одномірний (рядок або стовпець) |
| Типове застосування | Сітки, галереї, дашборди | Навбари, картки в рядку, центрування |
| Підтримка старих браузерів | Сучасні (Edge 16+) | Сучасні (Edge 12+) |
CSS Custom Properties — наша дизайн-система:
:root { --font-sans: 'Inter', system-ui, sans-serif; --space-md: 1rem; --color-accent: hsl(221 83% 53%); } Як Container Queries змінюють адаптивність?
Container Queries дозволяють компоненту адаптуватися до ширини контейнера, а не екрану. Це особливо корисно для перевикористовуваних карток: одна й та ж картка буде коректно відображатися у вузькій боковій панелі та в широкому контенті. Детальніше на MDN. Ця техніка знижує кількість медіазапитів на 30% і робить код більш передбачуваним. Ось як впровадити Container Queries:
- Визначте контейнер:
container-type: inline-size; - Використовуйте
@container (min-width: 400px) { ... } - Налаштуйте вкладені стилі всередині контейнера.
Приклад верстки картки з Container Queries
.card-container { container-type: inline-size; } @container (min-width: 300px) { .card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } Як ми досягаємо LCP ≤ 2,5 с?
Критичний CSS інлайнимо в head (близько 2-3 КБ), решту завантажуємо асинхронно:
<style>/* critical */</style> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> CSS Containment (contain: layout paint) ізолює перемальовування елементів. will-change використовуємо лише для анімованих модалок. Підсумкові метрики:
| Метрика | Цільове значення |
|---|---|
| LCP | ≤ 2,5 с |
| CLS | < 0,1 |
| TBT | < 200 мс |
Ми гарантуємо ці значення для всіх проектів. Вартість розраховується індивідуально залежно від складності макету та кількості сторінок. Замовте попередню консультацію — отримайте комерційну пропозицію за 1 день.
Як критичний CSS скорочує час завантаження?
Критичний CSS — це стилі, необхідні для відображення першого екрану. Ми інлайнимо їх у head, решту завантажуємо асинхронно. Це знижує FCP та LCP. В одному проекті ми скоротили FCP з 3,2 до 1,1 с лише за рахунок критичного CSS. Також використовуємо CSS Containment для ізоляції перемальовування. Результат: плавний рендеринг без стрибків.
Типові помилки при верстці
Одна з частих проблем — відсутність width та height у зображень. Це викликає CLS при завантаженні. Рішення: задайте фіксовані розміри в HTML або використовуйте атрибут aspect-ratio в CSS. Також популярна помилка — забувають про overflow: hidden для контейнерів із закругленими кутами (border-radius), що призводить до витікання контенту. Ми завжди перевіряємо ці моменти.
Що входить у нашу роботу
- Документація: стилістичний гайд за компонентами.
- Доступи: передача вихідників (Figma, код).
- Навчання: роз'яснення структури для розробників.
- Підтримка: гарантійний період після здачі.
Ми — команда з досвідом роботи у верстці та 20+ реалізованими проектами. Гарантуємо кросбраузерність у Chrome, Firefox, Safari, Edge. Зв'яжіться — оцінимо ваш проект за 1 день.
| Етап | Тривалість |
|---|---|
| Landing (1 екран) | 0.5–1 день |
| Landing (6-8 секцій) | 1–2 дні |
| Корпоративний сайт (5-10 стор.) | 3–5 днів |
| Магазин (шаблони) | 5–8 днів |
Вартість розраховується індивідуально. Отримайте консультацію, щоб уточнити деталі вашого проекту.