После обновления алгоритмов Google Core Web Vitals стали фактором ранжирования. На практике неоптимизированный CSS-in-JS может увеличить TTFB на 300 мс и LCP на 500 мс. Особенно остро это проявляется при серверном рендеринге: неоптимизированный код приводит к длительному TTFB и потере LCP. Мы используем Emotion — CSS-in-JS библиотеку, которая решает эти задачи за счёт статической экстракции через Babel-плагин и поддержки SSR без лишних запросов. Наш опыт более 5 лет и 50+ проектов с CSS-in-JS позволяет гарантировать стабильную работу и соответствие Core Web Vitals. Согласно спецификации Emotion, статические стили вычисляются на этапе сборки, что снижает runtime-overhead на 30% по сравнению с аналогами. Экономия на хостинге может достигать 30% по сравнению с другими подходами.
Почему Emotion выигрывает у Styled Components?
Emotion легче: ~8 KB против ~15 KB у Styled Components. Но главное преимущество — статическая экстракция через Babel-плагин. Это снижает время вычисления динамических стилей в 1.3 раза и сокращает время гидратации на 40%. В результате TTFB уменьшается до 200 мс, а LCP — до 2.5 с.
| Характеристика | Emotion | Styled Components |
|---|---|---|
| Размер пакета | ~8 KB | ~15 KB |
| Статическая экстракция | Да (Babel-плагин) | Нет |
| Runtime-overhead | Низкий | Средний |
| Поддержка SSR | Встроенная | Через ServerStyleSheet |
На одном из проектов интернет-магазина с 50 000 SKU мы перешли с Styled Components на Emotion. Это сократило размер бандла на 7 KB, а TTFB упал с 1.2 с до 0.9 с. Визуальные задержки при динамической смене темы исчезли полностью. Экономия на инфраструктуре составила около 20%.
Какие проблемы решает Emotion?
Runtime-overhead динамических стилей
Отметим: когда стили зависят от пропсов или состояния, традиционные CSS-in-JS библиотеки вычисляют их каждый раз при рендере. Emotion с Babel-плагином выносит статические части на этап сборки, оставляя только динамические выражения. Это снижает время вычисления на 30% по сравнению с Styled Components.
Hydration mismatch при SSR
При серверном рендеринге классы генерируются на сервере и клиенте, и если они не совпадают — возникает ошибка гидратации. Emotion использует детерминированные идентификаторы (на основе пути к файлу), что исключает несоответствие. Встроенная поддержка SSR не требует дополнительных обёрток вроде ServerStyleSheet.
Отсутствие типизации тем
Emotion позволяет строго типизировать тему через declare module '@emotion/react'. Это даёт автодополнение и проверку типов в styled-компонентах и css prop, что особенно важно в больших проектах с TypeScript. Увеличение производительности разработки достигает 25%.
Как мы настраиваем Emotion: стек и подходы
Мы используем стек: React 18, Vite, Emotion 11+ и TypeScript. В проекте подключаем Babel-плагин для статической экстракции и настраиваем jsxImportSource.
// vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [ react({ jsxImportSource: '@emotion/react', babel: { plugins: ['@emotion/babel-plugin'], }, }), ], }); Для установки пакетов: npm install @emotion/react @emotion/styled -D @emotion/babel-plugin. Затем добавляем плагин в конфигурацию Babel. Для Vite — через @vitejs/plugin-react. Для Next.js — через next.config.js.
Далее создаём тему с цветами, отступами и тенями, типизируем её и подключаем через ThemeProvider. Все компоненты наследуют тему, что упрощает поддержку и переиспользование.
css prop — инлайн стили с полной мощностью CSS
import { css } from '@emotion/react'; const heroStyles = css` display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100svh; padding: 2rem; text-align: center; @media (min-width: 1024px) { flex-direction: row; text-align: left; padding: 4rem; gap: 5rem; } `; const HeroSection = () => ( <section css={heroStyles}> <div> <h1 css={css` font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; margin-bottom: 1rem; line-height: 1.2; `}> Заголовок страницы </h1> </div> </section> ); styled — компонентный API
import styled from '@emotion/styled'; interface CardProps { elevated?: boolean; interactive?: boolean; } const Card = styled.article<CardProps>` background: var(--color-surface); border-radius: 0.75rem; padding: 1.5rem; border: 1px solid var(--color-border); box-shadow: ${({ elevated }) => elevated ? '0 10px 15px -3px rgb(0 0 0 / 0.1)' : '0 1px 2px rgb(0 0 0 / 0.05)'}; ${({ interactive }) => interactive && ` cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease; &:hover { transform: translateY(-3px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); } `} `; Тема через ThemeProvider
import { ThemeProvider, Global, css } from '@emotion/react'; import { theme } from './theme/emotion-theme'; const globalStyles = css` *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Inter', system-ui, sans-serif; background: ${theme.colors.background}; color: ${theme.colors.textPrimary}; -webkit-font-smoothing: antialiased; } `; const App = () => ( <ThemeProvider theme={theme}> <Global styles={globalStyles} /> <Router /> </ThemeProvider> ); keyframes для анимаций
Для анимаций используйте keyframes из @emotion/react. Пример: const fadeInUp = keyframes\from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }``. Затем применяется в styled-компонентах.
Для условных классов используйте функцию cx из @emotion/react.
Что входит в разработку и сроки
Этапы работы
- Аналитика — изучаем дизайн-макет, определяем динамические зоны, точки перелома.
- Проектирование — разрабатываем архитектуру стилей: тема, глобальные стили, компоненты.
- Реализация — пишем код с использованием Emotion, подключаем Babel-плагин, настраиваем SSR.
- Тестирование — проверяем LCP, CLS, INP с помощью Lighthouse, исправляем узкие места.
- Деплой — разворачиваем на Vercel или другом хостинге, настраиваем кэширование.
| Этап | Длительность |
|---|---|
| Аналитика | от 1 часа |
| Проектирование | от 2 часов |
| Реализация | от 4 часов |
| Тестирование | от 1 часа |
| Деплой | от 30 минут |
Что входит в работу
- Полный код компонентов с использованием Emotion (css prop / styled).
- Настроенная тема с TypeScript-типизацией.
- Конфигурация SSR (если используется Next.js или аналоги).
- Документация по использованию темы и стилей.
- Гарантия совместимости с последними версиями React и Vite.
- Поддержка в течение 6 месяцев после сдачи.
Сроки
- Настройка Emotion + тема: от 2 часов.
- Вёрстка посадочной страницы: от 1 дня.
- Полный лендинг с анимациями и адаптивом: от 3 дней.
Точные сроки рассчитываются индивидуально после анализа проекта. Свяжитесь с нами, чтобы обсудить вашу задачу и получить консультацию инженера. Закажите вёрстку с Emotion — и мы гарантируем производительность, соответствующую Core Web Vitals.