Вёрстка сайта с CSS-анимациями: без jank и с оптимизацией

Представьте: вы заходите на сайт премиум-бренда, картинка загружается, появляется плавное затенение, а кнопка при наведении слегка приподнимается. Это создаёт ощущение качества и дороговизны. Теперь представьте обратное: анимации дёргаются, элементы скачут, сайт тормозит — пользователь уходит за 2 секунды. CSS-анимации — мощный инструмент, но неграмотное их использование убивает производительность. Мы сталкивались с проектами, где простая анимация модального окна вызывала пересчёт layout'a на весь документ, что приводило к LCP 4+ секунды на мобильных устройствах. За 5 лет мы оптимизировали анимации на 40+ проектах, снизив Interaction to Next Paint (INP) в среднем на 60%. В этой статье разберём, как правильно подходить к анимациям на CSS: от выбора свойств до оптимизации через GPU, и покажем реальный кейс ускорения hero-секции в 3 раза.

Как CSS-анимации влияют на Core Web Vitals?

Core Web Vitals — метрики, которые Google использует для оценки пользовательского опыта. Анимации напрямую влияют на LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) и INP (Interaction to Next Paint). Неправильно анимированные элементы могут увеличивать LCP из-за задержек compositing, вызывать CLS при анимации размеров или ухудшать INP из-за частых перерисовок. Оптимизированные CSS-анимации, напротив, помогают сохранить стабильные 60 FPS и не влияют на эти метрики.

Безопасные свойства для анимации

CSS-анимации исполняются на compositor thread — отдельном потоке, не блокирующем JavaScript и rendering. Грамотно написанные анимации не вызывают layout recalculation и работают в 60 fps даже на мобильных устройствах. Неграмотные — убивают производительность, вызывают jank и раздражают пользователя.

Анимировать нужно только свойства, не вызывающие reflow/repaint:

Правило: перемещение через translate, масштаб через scale, поворот через rotate — никогда top/left/width/height в @keyframes. Анимация через transform и opacity в 5 раз производительнее анимаций layout-свойств, так как не включают reflow и repaint.

Что выбрать: CSS transitions или animations?

CSS transitions — для состояний (hover, focus, active). Декларативно, коротко:

.button {
  background-color: #2563eb;
  transform: translateY(0);
  transition:
    background-color 200ms ease,
    transform 150ms ease,
    box-shadow 200ms ease;
}
.button:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgb(37 99 235 / 0.4);
}

CSS animations (@keyframes) — для автономных, зацикленных или многошаговых движений. Подробнее — на MDN.

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
.live-indicator::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-ring 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

Как избежать jank на мобильных устройствах?

Основные причины jank: анимация layout-свойств, слишком много одновременно анимируемых элементов, отсутствие will-change на критичных элементах. Мы используем следующий подход:

• Все движения через transform и opacity.
• Не более 30 анимируемых элементов на странице.
• will-change только на тех элементах, которые анимируются постоянно (например, spinner), и убираем после завершения.
• Обязательное добавление prefers-reduced-motion для accessibility.

Пример will-change:

.modal-overlay {
  will-change: opacity;
}
.modal-overlay.is-visible {
  will-change: auto;
}

Accessibility: prefers-reduced-motion

Обязательно для любого проекта:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Intersection Observer + CSS классы

Анимации при появлении в viewport — без библиотек:

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.15 }
);
document.querySelectorAll('[data-animate]').forEach((el) => observer.observe(el));

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms ease, transform 500ms ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

Почему стоит избегать JavaScript-библиотек для анимаций?

CSS-анимации выполняются на композитном потоке, не блокируя JavaScript. Они обеспечивают стабильные 60 FPS даже при высоких нагрузках. JavaScript-анимации (например, через requestAnimationFrame) работают в основном потоке и могут вызывать jank при сложных вычислениях. В тестах мы замеряли: CSS-анимации в 5 раз быстрее JS-анимаций на compositor thread. Библиотеки вроде GSAP удобны, но для большинства задач (entrance, hover, loading) CSS-решения легче, быстрее и не требуют дополнительных загрузок.

Что входит в работу

Производительность: чек-лист

• transform и opacity — единственные свойства в @keyframes для движения.
• will-change только на элементах с тяжёлой анимацией, убирать после завершения.
• animation-fill-mode: both вместо дублирования начального состояния.
• Не более 20–30 одновременно анимируемых элементов на странице.
• prefers-reduced-motion охватывает все анимации.
• Тестирование в Chrome DevTools → Performance → Rendering → Paint flashing.

Сроки

Базовые CSS-переходы (hover-состояния, появления модалок, fade-эффекты) включаются в стоимость базовой вёрстки. Кастомные анимации (skeleton, staggered-списки, hero-анимации, parallax) — от 0.5 до 1 дня в зависимости от количества и сложности сцен. Свяжитесь с нами для аудита анимаций — выявим проблемы производительности. Закажите оптимизацию — получите гарантию отсутствия jank.

Фронтенд-разработка 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.

Тестирование

E2E тесты через Playwright — для checkout, авторизации, критичных форм. Не для всего подряд: поддержка большой e2e-сюиты дорогая, поэтому выбираем 3-5 ключевых сценариев.

Ориентиры по срокам и состав работ

Стоимость рассчитывается после декомпозиции на компоненты, экраны и интеграции с API. Мы используем N+1 оценку: прибавляем 20% на риски.

Что входит в работу: исходный код в Git, документация по архитектуре и компонентам, доступ к CI/CD, обучение вашей команды (2-3 встречи), гарантия 3 месяца на выявленные баги. Дополнительно — покрытие юнит-тестами ключевых модулей.

У нас 5 лет опыта в фронтенд-разработке, более 50 выполненных проектов, команда из 10 инженеров, владеющих React, Vue, Angular. Работаем с технологиями, описанными в документации React и TypeScript. Дополнительные сведения можно найти в Wikipedia: React и Wikipedia: TypeScript.

Какой стек выбрать для фронтенд-разработки 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 страниц.

Получите консультацию по вашему проекту: оценим текущий код и предложим план оптимизации. Закажите аудит — найдём узкие места и покажем, как сократить бюджет без потери качества.