Мы видим это постоянно: дизайн в 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 дней |
Стоимость рассчитывается индивидуально. Получите консультацию, чтобы уточнить детали вашего проекта.