Ми бачимо це постійно: дизайн у 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 днів |
Вартість розраховується індивідуально. Отримайте консультацію, щоб уточнити деталі вашого проекту.
Фронтенд-розробка React: від аудиту до production
Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.
Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.
Чому Next.js — стандартний вибір для SEO?
React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.
Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.
Як TypeScript запобігає багам у продакшені?
TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.
Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.
Vue 3 + Nuxt 3 — альтернативний стек для SSR
Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.
Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.
Продуктивність: метрики та інструменти
Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.
Динамічні імпорти для важких компонентів:
const RichEditor = dynamic(() => import('@/components/RichEditor'), {
ssr: false,
loading: () => <EditorSkeleton />,
});
Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.
Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.
State management: без овериніжирингу
Для більшості додатків достатньо:
-
React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
-
Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
-
React Hook Form — для форм
Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.
CSS та дизайн-система
Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки.
React DevTools Profiler — офіційний інструмент від команди React.
Тестування
| Рівень |
Інструмент |
Що тестуємо |
| Unit |
Vitest |
Утиліти, хуки, чисті функції |
| Component |
Testing Library |
Рендер, взаємодії |
| E2E |
Playwright |
Критичні користувацькі флоу |
| Visual |
Chromatic (Storybook) |
Регресія UI |
E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.
Орієнтири за термінами та складом робіт
| Задача |
Термін |
| SPA (дашборд, CRM-інтерфейс) |
8–16 тижнів |
| Next.js сайт з SSR/ISR |
6–14 тижнів |
| Frontend для існуючого API |
4–10 тижнів |
| Компонентна бібліотека |
6–12 тижнів |
Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.
Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.
У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.
Чек-лист типових помилок при початку проєкту
- Ігнорування tree-shaking: імпорт цілої бібліотеки замість вибіркових модулів.
- Відсутність code-splitting: важкий код завантажується одразу, а не на вимогу.
- Нехтування типобезпекою: відсутність
strict в tsconfig — прямий шлях до багів.
- Надмірна мемоізація:
useMemo та useCallback там, де вони не потрібні.
- Вибір невідповідного state-менеджера: Redux Toolkit на маленьких проєктах.
Який стек обрати для фронтенд-розробки React?
Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.
Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.
