Мы видим это постоянно: дизайн в 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="ru">
<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 — для глобального клиентского состояния (легковесный, без бойлерплейта 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. Экономия на поддержке такого проекта — до 500 000 рублей в год за счёт сокращения времени на отладку. Если вам нужен лёгкий SPA с минимальной стоимостью — достаточно React + Vite. Для контентного сайта с SEO — Next.js с ISR даёт TTFB ниже 50 мс даже при 50 000 страниц.
Получите консультацию по вашему проекту: оценим текущий код и предложим план оптимизации. Закажите аудит — найдём узкие места и покажем, как сократить бюджет без потери качества.
