Після оновлення алгоритмів 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.