ИНЖИНИРИНГ COMPOSABLE COMMERCE
Headless Commerce
Hydrogen, Remix, Next.js + composable MACH-архитектура для максимальной производительности, гибкости и ownership — современная операционная система commerce, отделяющая frontend от backend.
Headless — это уже не «отделение frontend»; это composable-операция, в которой по принципам MACH (Microservices + API-first + Cloud-native + Headless) выбираются best-in-class frontend, commerce engine, CMS, search, payment и identity, а композиция выполняется на edge.
E-commerce 2026 года находится под тройным давлением: монолитные тематические системы упёрлись в потолок скорости и гибкости, edge runtime (Cloudflare Workers, Vercel Edge, Shopify Oxygen) стал основным слоем дистрибуции, а React Server Components + streaming SSR опустили TTFB с секунд до сотен миллисекунд. Большинство брендов до сих пор считают, что «Hydrogen — это только Shopify», и не рассматривают стек composable engine + Next.js + Sanity / Contentful + Algolia на базе commercetools / BigCommerce / Saleor. Headless-операция Roibase строится на шести принципах.
МЕТОДОЛОГИЯ
6-слойная операция composable commerce
Assess → Architect → Compose → Migrate → Launch → Observe. Каждый слой сдаётся с deliverable + ADR + SLA.
01
ASSESS
Оценка текущего стека (монолит/темы, app, CDN), performance baseline, SEO-рисков, операционных затрат и кадровой ёмкости.
02
ARCHITECT
MACH-архитектура, шорт-лист вендоров (engine/CMS/search/payment/identity), edge-стратегия, ADR-документы, RFP + POC.
03
COMPOSE
Фреймворк (Hydrogen / Next.js), интеграция composable backend, GraphQL gateway, event bus (webhook + queue), feature flag.
04
MIGRATE
Data ETL (catalog/customer/order/content), маппинг 301 + hreflang + sitemap, паритет staging, feature-complete smoke-тест.
05
LAUNCH
Canary rollout, запуск под feature flag, RUM + Sentry, BFCM-ready stress-test, weekend on-call + war room.
06
OBSERVE
Контроль SLO/SLI, ежемесячный performance QBR, мониторинг SEO-рангов, cost review, обновление ADR, runbook + обучение + handoff.
— СРАВНЕНИЕ
Монолитная тема vs template-only headless vs Roibase composable commerce
Различия трёх подходов в производительности, гибкости, vendor lock-in, SEO и TCO.
| Параметр | Монолитная тема | Template-only headless | Roibase composable commerce |
|---|---|---|---|
| Архитектура | Единый монолит | Шаблон + один backend | MACH + composable + edge |
| Гибкость вендоров | Платформенный lock-in | Lock-in движка | Best-of-breed выбор (на каждом слое) |
| Edge runtime | Нет | Частично | CF Workers / Vercel Edge / Oxygen |
| Производительность (LCP) | 2,5–4,5 с | 2,0–2,8 с | < 1,5 с baseline + RUM |
| Контент + CMS | Платформенная CMS (ограничено) | Одна CMS | Sanity/Contentful/Storyblok best-fit |
| Search | Native search | Elasticsearch/Algolia на старте | Algolia/Typesense/Coveo + AI relevance |
| SEO | Зависит от темы | SPA-риски | Инжиниринг SSR + schema + 301 + hreflang |
| TCO на 24-й месяц | Низкая, но технический долг | Средняя + риск одного вендора | Средняя + ownership + гибкость + скорость |
PROOF
Outcomes, measured
75p mobile; после headless-миграции и edge runtime.
В среднем за 6 месяцев после performance + streaming SSR + edge cache.
На 12-м месяце после SEO preservation + schema + hreflang + зелёных Core Web Vitals.
Глобальный CDN Cloudflare Workers / Vercel Edge / Shopify Oxygen.
После стратегии ISR + partial prerendering + edge cache.
Engine + CMS + search + identity — каждый итерируется отдельно.
WHAT WE DO
Engagement scope
Every offering is an outcome-based work package. Roibase blends strategy and execution inside a single team — no hand-offs.
Shopify Hydrogen + Oxygen
React Server Components + Remix + streaming SSR + edge deploy (Oxygen); Storefront API + Customer Account API + Shopify CDN.
Next.js + App Router + RSC
Server components + streaming + partial prerendering (Next 15) + Turbopack; деплой на Vercel Edge + ISR + SWR.
Composable commerce engine
commercetools / Saleor / BigCommerce / Shopify Storefront API; выбор best-fit движка + GraphQL + webhook + event-driven поток.
Интеграция headless CMS
Sanity, Contentful, Storyblok, Hygraph, Strapi; контент-модель, preview mode, редакционный workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo / MeiliSearch; instant search, federated search, AI relevance tuning, merchandising-правила.
Edge caching + ISR + SWR
Cloudflare Workers + KV/R2 / Vercel Edge / Oxygen; stale-while-revalidate, incremental static regeneration, edge middleware.
Инжиниринг Core Web Vitals
Бюджет LCP < 1,5 с / INP < 200 мс / CLS < 0,05; font preload + image optimization + critical CSS + bundle splitting + RUM.
Identity + payment + subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen + Recharge / Bold; passkey + SCA + 3DS2 + Apple/Google Pay.
Migration playbook
Magento / WooCommerce / legacy Shopify / BigCommerce → headless; маппинг 301, feature parity, staging/canary, go-live weekend.
A/B + feature flags + observability
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry; canary rollout + rollback + дерево SLO/SLI-метрик.
— ВЫГОДЫ
Конкретные изменения Вашей commerce-инфраструктуры
Когда edge runtime + composable + performance + SEO preservation + observability работают совместно, ROI не привязан к одной метрике.
Скорость растёт многократно
Streaming SSR + edge runtime + RSC снижают LCP более чем вдвое; мобильная конверсия и Core Web Vitals переходят в зелёную зону.
Конверсия растёт
Скорость + персонализация + более гибкий UX уменьшают drop в воронке и снижают долю брошенных корзин.
SEO-ранг сохраняется и растёт
Благодаря инжинирингу SSR + schema.org + 301 + hreflang + sitemap миграционная просадка длится 2–3 недели, после чего ранг растёт.
Открывается гибкость по вендорам
Engine / CMS / search / identity заменяемы на каждом слое; vendor lock-in и ежегодное ценовое давление снижаются.
Растёт продуктовая скорость
С feature flag + canary + ISR новые фичи выкатываются не раз в день, а раз в час; скорость экспериментов растёт.
Операционные расходы снижаются
Заплатки в монолите заменяются composable-сервисами; edge cache снижает нагрузку на origin, инфраструктурные расходы оптимизируются.
ПОСТАВКИ
Что Вы получаете в каждом headless-engagement
Фиксированный список deliverable в пакете «установка + 6 месяцев операции»; никаких сюрпризов с допсчетами.
Отчёт о feasibility и ROI headless
Audit текущего стека, модель TCO, performance baseline, SEO-риски, оценка кадровой ёмкости; 50–80 страниц.
MACH-архитектура + ADR-документы
Решения по вендорам engine + CMS + search + payment + identity + edge + CI/CD, каждое — обоснованный ADR.
Выбор фреймворка + POC
Матрица решения Hydrogen / Next.js / Remix / Nuxt + 2–3 недели POC + отчёт по performance benchmark.
Установка composable backend
Интеграция commercetools / Saleor / BC / Shopify Storefront API + GraphQL gateway + webhook + event bus.
Схема headless CMS
Контент-модель Sanity / Contentful / Storyblok, preview mode, редакционный workflow + live preview.
Search + merchandising
Установка Algolia / Typesense / Coveo + схема индекса + AI relevance tuning + merchandising-правила.
Edge runtime + cache-стратегия
Деплой Cloudflare Workers / Vercel Edge / Oxygen + KV/R2 + ISR + SWR + edge middleware.
Identity + payment + subscription
Интеграция Auth0 / Clerk / Supabase Auth + Stripe / Adyen + passkey + SCA + 3DS2-совместимый поток.
Пакет SEO preservation
Маппинг 301, canonical, schema.org, hreflang, sitemap, robots, ITA (International Targeting); дашборд мониторинга рангов.
Feature flag + A/B-инфраструктура
GrowthBook / Statsig / LaunchDarkly + canary + kill switch + дерево метрик экспериментов.
Observability + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty; incident runbook.
Runbook + обучение + 3 месяца поддержки
Runbook по архитектуре, деплою, rollback и мониторингу, тренинги команды, 90 дней поддержки + on-call.
— ОБЪЁМ
Что мы делаем и чего не делаем
Объём работ composable commerce зафиксирован письменно; это исключает сюрпризы и доплаты постфактум.
Делаем
- MACH + composable commerce архитектура + ADR
- Shopify Hydrogen + Oxygen (RSC + Remix)
- Next.js + App Router + RSC + Vercel Edge
- commercetools / Saleor / BC / Shopify Storefront API
- Sanity / Contentful / Storyblok headless CMS
- Algolia / Typesense / Coveo search + merchandising
- Edge runtime (Cloudflare Workers / Vercel Edge / Oxygen)
- SEO preservation (301 / schema / hreflang / sitemap)
- Feature flag + canary + rollback + observability
- Интеграция identity + payment + subscription
- Инжиниринг Core Web Vitals + RUM
- Runbook + обучение + 90 дней поддержки + on-call
Не делаем
- Разработку монолитных тем Magento / WooCommerce (только миграция)
- Разработку ядра ERP / OMS / WMS (интегрируем)
- Управление рекламным бюджетом (Acquisition — отдельный engagement)
- Физическую логистику / склад / таможенные операции
- Обработку банковских карт / владение PCI scope (остаётся у payment-вендора)
- Banking / KYC / AML регуляторные процессы (через партнёров)
- Аутсорс клиентского сервиса (настраиваем инструменты, операцию ведёте Вы)
- Фейковые отзывы / бот-трафик / искусственные накрутки скорости
HOW WE WORK
12–16 недель на установку и миграцию, далее ежемесячная операция
Недели 1–2: assess + feasibility
Audit текущего стека, performance baseline, SEO-риски, модель TCO, кадровая ёмкость + черновик ADR.
Недели 3–4: architect + vendor RFP/POC
MACH-архитектура, шорт-лист engine/CMS/search/payment/identity + RFP + 2–3 недели POC.
Недели 5–6: compose + framework setup
Установка Hydrogen / Next.js, интеграция Storefront API / commerce engine, GraphQL gateway, деплой edge runtime.
Неделя 7: CMS + search + merchandising
Контент-модель Sanity / Contentful, индекс Algolia / Typesense + relevance tuning, merchandising-правила.
Неделя 8: identity + payment + subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + passkey + accelerated checkout.
Недели 9–10: data ETL + 301 mapping
ETL каталога / клиентов / заказов / контента, URL mapping, план 301, hreflang + sitemap + schema.
Недели 11–12: staging + canary + BFCM stress
Паритет staging, smoke-тест, canary rollout, запуск под feature flag, BFCM stress-test + план war room.
Неделя 13+: go-live + observe + QBR + поддержка
Playbook go-live weekend, RUM + Sentry + SLO/SLI, ежемесячный QBR, runbook + обучение + 3 месяца поддержки.
— НАБОР ИНСТРУМЕНТОВ
Используемые инструменты — vendor-agnostic, но обоснованный выбор
Подбираем подходящее под каждого клиента; независимость сохраняем тем, что не берём комиссий.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONALIZATION
EDGE & OBSERVABILITY
QUESTIONS
Frequently asked
— ГЛОССАРИЙ
Ключевые понятия composable commerce
Общий язык для Ваших инженерных, продуктовых, операционных и маркетинговых команд.
- MACH
- Сокращение принципов Microservices + API-first + Cloud-native + Headless; рамка composable commerce, определённая MACH Alliance.
- Composable Commerce
- Архитектура commerce, в которой вместо единой монолитной платформы под каждую функцию подбирается best-of-breed-вендор; engine + CMS + search + payment + identity — отдельные сервисы.
- Headless
- Разделение слоя между frontend (presentation) и backend (commerce engine / CMS) через API; позволяет frontend работать в любом фреймворке + runtime.
- React Server Components (RSC)
- Модель компонентов, появившаяся в React 18+, которая рендерится на сервере и не отправляет клиенту JS; используется нативно в Next.js App Router + Shopify Hydrogen, снижает bundle и стоимость hydration.
- Streaming SSR
- Модель рендеринга, при которой HTML страницы отправляется не разово, а потоком — начиная с готовых частей; снижает TTFB и LCP.
- Edge Runtime
- Runtime, в котором код выполняется в географически ближайшем к пользователю CDN-узле; основные примеры — Cloudflare Workers, Vercel Edge, Shopify Oxygen. Минимизирует latency, обеспечивает глобальную консистентность.
- ISR (Incremental Static Regeneration)
- Перегенерация статически собранных страниц на фоне через заданные интервалы или по триггеру; даёт и статическую скорость, и свежие данные.
- Stale-While-Revalidate (SWR)
- HTTP-стратегия кеширования; пользователю мгновенно показывается stale-контент, пока на фоне фетчится свежая версия. Баланс скорости и freshness.
- Storefront API
- Публичный GraphQL API Shopify; позволяет headless / кастомному frontend / мобильным приложениям обращаться к данным товаров, коллекций, корзины и checkout.
- commercetools
- Composable commerce engine; API-first и MACH-совместимый, один из наиболее используемых движков в enterprise B2B + B2C сценариях. Доступна экосистема commercetools Frontend + Studio.
- ADR (Architecture Decision Record)
- Формат документации, фиксирующий контекст, варианты, итог и tradeoff архитектурного решения; стандарт для решений по вендорам в composable-стеке.
- Feature Flag
- Переключатель функций, который можно включать/выключать в runtime независимо от деплоя; используется в сценариях canary release, A/B-тестов, kill switch; основные инструменты — GrowthBook/Statsig/LaunchDarkly.
- SSR (Server-Side Rendering)
- Рендеринг HTML на сервере и отправка готового документа в браузер. Обходит CSR по SEO и LCP; основной режим Nuxt 3, Next.js, Remix. На масштабе нужны edge-кеш и продуманная стратегия hydration.
- CSR (Client-Side Rendering)
- Отдача почти пустого HTML-каркаса и JS-бандла, рендеринг в браузере. Типичный режим SPA; первый paint медленный, для SEO нужен пререндер маршрутов. На слабых сетях и слабых устройствах LCP сильно проседает.
- Edge Functions
- Лёгкий compute-слой прямо в CDN (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Делает geo-routing, bucketing A/B-тестов, манипуляции с заголовками и auth за миллисекунды, не возвращаясь к origin; cold-start практически нулевой.
- CDN (Content Delivery Network)
- Сеть, которая кеширует статический (и всё чаще динамический) контент на географически распределённых edge-узлах. Снижает TTFB и LCP, защищает origin от DDoS и пиков трафика. Cloudflare, Fastly, Akamai, AWS CloudFront — обязательная часть современного стека.
- Frontend
- Слой, который пользователь видит и с которым взаимодействует в браузере — HTML, CSS, JS, визуальные ассеты и runtime-поведение. Живёт отдельно от backend; распространённые фреймворки: Vue/Nuxt, React/Next, Svelte/SvelteKit; первая линия защиты performance, доступности и SEO.
- Backend
- Серверный слой для бизнес-логики, доступа к БД, аутентификации, платежей и интеграций. Публикует API, которые потребляет frontend; самые распространённые стеки — Node.js, Python, Go и .NET; реальный владелец масштаба, безопасности и согласованности данных.
- Component-based Architecture
- Архитектура frontend, дробящая UI на изолированные, переиспользуемые и тестируемые по-отдельности части. Базовая парадигма Vue/React/Svelte; физическое воплощение design system, снижает стоимость рефакторинга и визуальные расхождения.
- State Management
- Дисциплина о том, где во frontend живёт общее состояние и UI-state, как оно обновляется и как распространяется на компоненты. Pinia (Vue), Redux/Zustand (React), Svelte stores; в сложных продуктах — основа rendering-производительности и трассировки ошибок.
- Code Splitting
- Вместо одного большого JS-бандла создавать отдельные chunks под каждый route или feature, чтобы страница грузила только нужное. Базовая оптимизация Vite/Webpack/Rollup; напрямую влияет на LCP и TTI, обсуждается вместе с lazy imports + dynamic routes.
- Lazy Loading
- Техника, при которой контент (картинка, компонент, маршрут, библиотека) грузится только когда нужен. Нативно — <img loading="lazy">, во фреймворках — через dynamic import; заметно снижает время первого paint и расход трафика.
- SPA (Single Page Application)
- Тип приложения, который при первом заходе грузит всю shell, а дальше переходы делает client-side router. Ощущается мгновенным; первый paint тяжёлый, для SEO нужен пререндер, по-прежнему востребован в app-подобных и скрытых маршрутах.
- PWA (Progressive Web App)
- Web-приложение, устанавливаемое из браузера, способное работать оффлайн и получать push. Опирается на Service Workers + Web App Manifest; ведёт себя как нативное приложение без ASO и сторовой дистрибуции.
- SSG (Static Site Generation)
- Генерация всех страниц в HTML на этапе сборки с раздачей через CDN. Максимум performance при минимуме инфраструктуры; идеально для редко меняющегося контента (блог, маркетинг, docs, словарь) — Nuxt generate, Next.js export, Astro.
- Web Component
- Браузерный нативный, фреймворк-независимый стандарт компонентов: Custom Elements + Shadow DOM + HTML Templates. Пишется на Stencil/Lit, потребляется в любом фреймворке; превращает design system в портативные блоки, пересекающие границы React/Vue/Svelte.
- REST API
- Архитектурный стиль, общающийся через HTTP-глаголы (GET/POST/PUT/PATCH/DELETE) и URL по ресурсам. Stateless, обычно несёт JSON, документируется через OpenAPI; всё ещё дефолтная точка интеграции примерно 80 % web и mobile-приложений.
- GraphQL
- Язык запросов и runtime, позволяющий клиенту в одном запросе запросить ровно нужные поля. Альтернатива over/under-fetching REST; система типов и schema-first заметно улучшают DX фронтенда.
- Webhook
- Паттерн, при котором система при наступлении события (оплата прошла, заказ создан) делает HTTP POST на заранее зарегистрированный URL. Противоположность polling — real-time, экономичен по ресурсам; обязательны проверка подписи и идемпотентная обработка.
- JWT (JSON Web Token)
- Компактный, самодостаточный стандарт токена в формате Header.Payload.Signature. Используется для stateless-аутентификации между SPA и API; критичны claims истечения, ротация refresh-токенов и управление секретами.
- OAuth 2.0
- Протокол делегирования, позволяющий пользователю дать стороннему приложению ограниченный доступ без передачи пароля. Authorization Code + PKCE — современный веб-стандарт flow; на нём построены "Войти через Google" и "Подключить Slack-приложение".
- Rate Limiting
- Слой, ограничивающий число запросов к API в секунду/минуту для защиты от злоупотреблений, brute-force и взрыва расходов. Реализуется через token-bucket или sliding-window; заголовки X-RateLimit-* в ответе — де-факто стандарт.
- API Gateway
- Reverse-proxy-слой, через который проходит весь внешний API-трафик. Аутентификация, rate limiting, routing, трансформация запроса/ответа и сбор метрик — в одном месте; популярны AWS API Gateway, Kong, Apigee, Cloudflare API Gateway.
- Design Pattern
- Проверенный рецепт под повторяющуюся задачу в архитектуре ПО (Gang of Four). Singleton, Factory, Observer, Strategy, Decorator и другие 23 классика; общий словарь, ускоряющий рефакторинг и code review.
- Monorepo
- Хранение нескольких проектов/библиотек в одном Git-репо. Nx, Turborepo, pnpm workspaces; даёт cross-package refactor + атомарные коммиты + общий тулинг, но с ростом требует серьёзной дисциплины build-системы.
- TDD (Test-Driven Development)
- Цикл: написать падающий тест → минимальный код, чтобы прошёл → отрефакторить (Red-Green-Refactor). Тесты формируют дизайн, ловят регрессии, документируют намерения — подходит не каждой команде/проекту, требует дисциплины.
- Refactoring
- Улучшение внутренней структуры кода без изменения внешнего поведения — для читабельности, простоты, тестируемости. Test coverage обязательна (страховка), маленькие шаги + коммиты — ритм, IDE refactor tools (extract method, rename) — стандарт.
- Semantic Versioning (SemVer)
- Схема версий в формате MAJOR.MINOR.PATCH: MAJOR = breaking change, MINOR = обратно-совместимая фича, PATCH = bug fix. Общий язык экосистем npm/PyPI/Cargo; база range-операторов вида "^1.2.3".
- Race Condition
- Баг, возникающий когда два или более потока/процесса обращаются к общему ресурсу в непредсказуемом порядке. Решается mutex, семафорами, атомарными операциями, immutable state или single-writer-паттерном; один из самых сложных классов багов для отладки.
- Idempotency
- Свойство, при котором N-кратный вызов одного запроса оставляет систему в том же состоянии, что и однократный. PUT, DELETE идемпотентны естественно; для POST используется заголовок Idempotency-Key (Stripe, payment webhooks). Обязательное условие распределённых retry.
- Memory Leak
- Программа не освобождает ненужную ей больше память — потребление RAM растёт и заканчивается OOM-крашем. В JS: оторванные DOM-ссылки + closure-захваты; в Node: утечка event listener'ов; в DI-контейнерах: удержанные ссылки — типичные виновники.
- Garbage Collection (GC)
- Runtime-механизм, автоматически определяющий и освобождающий недостижимую программе память. JS V8 — generational + incremental, Java/JVM — ZGC/G1, Go — concurrent mark-sweep; альтернатива ручному управлению памятью (C/C++).
- Concurrency vs Parallelism
- Concurrency = управление многими задачами одновременно (структура), Parallelism = реальное выполнение многих задач одновременно (железо). Single-core async I/O — concurrent; multi-core thread pool — parallel; часто путают, но это разные понятия.
- Immutability
- Принцип, по которому структура данных не меняется после создания — любое "изменение" создаёт новую копию. Основа функционального программирования и естественная защита от race condition в React state, Redux, Vue Pinia и конкурентном коде; structural sharing сохраняет приемлемую производительность.
- Dependency Injection (DI)
- Паттерн, при котором компонент получает нужные зависимости извне, а не создаёт их сам. Радикально повышает тестируемость (mock injection), снижает связанность и даёт гибкость конфигурации; используют Spring, Angular, NestJS, Vue provide/inject.
- Polyfill
- Код, эмулирующий современный JS API (fetch, Array.flat, Promise), отсутствующий в старых браузерах. Обычно инжектится во время сборки через @babel/preset-env или core-js по target-браузерам; НЕ должен отправляться в современные браузеры (bundle bloat).
- Regex (Regular Expression)
- Мини-язык описания текстовых шаблонов для поиска, match, разбора и замены. Синтаксис из классов символов + кванторов + якорей вроде /^\d{3}-\d{4}$/; поддержан в любом языке (JS, Python, Go) — но HTML им парсить нельзя.
- SDK (Software Development Kit)
- Пакет библиотеки + документации для упрощения интеграции с платформой/сервисом (Stripe, AWS, Twilio). Заменяет сырые HTTP API-вызовы type-safe методами, встроенными retry, auth-хелперами и инструментами тестирования.
- Callback Hell
- Глубокая пирамидальная форма кода, возникающая из сильно вложенных callback-ов (.then().then().then()...). Решается Promises + async/await; сегодня встречается в основном в jQuery-legacy и старых библиотеках Node.js.
- Code Review
- Практика, при которой другие разработчики читают и критикуют код коллеги до merge. Ловит баги, распространяет знания и удерживает консистентность; PR-workflow в GitHub/GitLab — стандарт, здоровый тон — "обсуждение", а не блокирующий gatekeeping.
- Pair Programming
- Двое разработчиков за одной машиной — driver пишет код, navigator ведёт стратегию и ловит ошибки. Усиливает передачу знаний, качество кода и скорость онбординга; в remote — через VS Code Live Share или JetBrains Code With Me.
- Technical Debt
- "Сложность к выплате", накапливающаяся из quick-fix'ов и упрощённых дизайн-решений. Стоимость рефакторинга растёт как процент; управление требует debt-лога, видимости (tech-debt-доска) и резервирования 15-20 % capacity спринта на погашение.
- Long Task
- Любая JS-работа, блокирующая main thread браузера дольше 50 мс. Главный враг INP и TBT; нужно разрезать через debounce, requestIdleCallback, web worker или time-slicing (yielding). В Chrome DevTools Performance panel — красные полосы.
- Speculation Rules API
- Новый API в Chrome 109+, который пре-рендерит страницы в фоне по принципу "пользователь, скорее всего, перейдёт по этой ссылке". JSON-список задаёт цели prerender/prefetch — следующая страница открывается мгновенно. Браузерно-нативная версия SPA-perf-трюков.
- View Transitions API
- Нативный браузерный API в Chrome 111+, выдающий SPA-подобные плавные переходы между страницами или сменами состояния. DOM-мутация, обёрнутая в document.startViewTransition(), автоматически даёт fade/slide-анимации; комбинируется с SPA-фреймворками.
- Container Queries
- CSS-фича, применяющая стили компоненту по размеру его собственного контейнера, а не через @media. Карточка может рендериться компактной при 300 px и широкой при 600 px без смены viewport. Поддержка во всех современных браузерах с 2023; недостающее звено component-driven design.
- CSS Cascade Layers (@layer)
- CSS-фича 2022 года, прекращающая войны specificity. С @layer reset, base, components, utilities порядок слоёв явный — даже !important в нижнем слое проигрывает обычному стилю верхнего. Встроено в Tailwind v4 и Bootstrap 5+.
- CSS Houdini
- Семейство W3C API, позволяющее JavaScript расширять CSS-рендеринговый конвейер браузера. Paint API (кастомные фоны), Layout API (кастомные flex/grid), Properties & Values API. Эффекты, которых нет в нативном CSS, можно отдавать GPU-ускоренным кодом вместо JS-полифилов.
- WebGPU
- Преемник WebGL — современный API графики и compute. Прямой доступ к GPU через Vulkan/Metal/DirectX 12; в браузере возможны игры нативного качества, AI-inference и научные расчёты. Общедоступен с Chrome 113; стоит за web-демо Stable Diffusion и LLM-inference.
- WebAssembly (WASM)
- Низкоуровневый bytecode, выполняющийся в браузере с почти нативной скоростью; компилируется из C/C++/Rust/Go. Двигает Figma, Photoshop Web, AutoCAD Web и шахматный движок Stockfish; идеален для сценариев, требующих в 5-20× больше производительности, чем JavaScript.
- Service Worker
- JS-прокси между браузером и сетью, способный работать даже после закрытия страницы. Основа offline-first cache-стратегий PWA, push-уведомлений и background sync. Самый распространённый инструмент — библиотека Workbox.
- Workbox
- JavaScript-библиотека Google, упрощающая написание service worker. Готовые cache-стратегии (cache-first, network-first, stale-while-revalidate), precaching, runtime-caching и API background-sync. Стандарт в build-пайплайнах PWA (Workbox-CLI, vite-plugin-pwa).
- Critical CSS
- Техника, инлайнящая в <head> HTML минимально необходимый CSS для рендеринга above-the-fold. Пока внешние render-blocking CSS грузятся параллельно, FCP/LCP улучшаются на 200-500 мс. Инструменты вроде critters, beasties и penthouse автоматизируют процесс.
- Resource Hints (preload / prefetch / preconnect / dns-prefetch)
- Теги <link>, говорящие браузеру "этот ресурс скоро понадобится". preload: критичный ассет текущей страницы (шрифт, hero); prefetch: следующая навигация; preconnect: заранее открывает TLS handshake; dns-prefetch: только DNS lookup. При правильном использовании сокращают LCP на ~500 мс.
- fetchpriority
- HTML-атрибут / опция fetch(), задающая приоритет "high"/"low"/"auto" для <img>, <link> и fetch()-запросов (Chrome 101+). Переопределяет дефолтное решение браузера по resource-priority; fetchpriority="high" на LCP-картинке даёт заметный буст.
- HTTP/3 (QUIC)
- Третье поколение HTTP, построенное на Google QUIC поверх UDP вместо TCP. 0-RTT соединение (TLS handshake в первом пакете), нет head-of-line blocking, не рвётся при смене мобильной сети. Стандарт на Cloudflare, Akamai, Fastly.
- Brotli (compression)
- HTTP content-encoding алгоритм Google, представлен в 2015; сжимает на 15-25 % лучше gzip. Поддержан в 95 %+ современных браузеров; статические ассеты пре-сжимаются на build с brotli-11, динамический HTML — на runtime с brotli-4/5.
- Edge Compute
- Парадигма выполнения кода на edge-нодах рядом с пользователем, а не на origin. Cloudflare Workers, Vercel Edge Functions, Netlify Edge и Fastly Compute@Edge снижают латентность до 20-50 мс; A/B-тесты, geo-редиректы и инъекция auth-заголовков делаются на edge.
- Streaming Hydration
- Техника, при которой сервер стримит HTML чанками, а React/Vue стартует hydration по мере прихода каждого чанка. React 18 Suspense + Server Components, Nuxt 3 и resumability Qwik идут в этом направлении. Снижает TTFB и TTI за счёт их перекрытия.
- Islands Architecture
- Архитектура "по умолчанию статика + интерактивные островки", популяризованная Astro. Большая часть страницы пре-рендерится без JS; гидрируются только интерактивные компоненты ("островки"). JS-бандлы падают на 70-90 %, performance-скоры растут. Идеально для контентных сайтов.
- Partial Hydration
- Техника, гидрирующая только видимые или интерактивные компоненты вместо всей страницы. Примеры: стратегии hydrateOnVisible / hydrateOnIdle / hydrateOnInteraction в Vue 3.5 и React Lazy + Suspense. Фундаментальный механизм islands architecture.
- Tree Shaking
- Оптимизация bundler'а (Webpack, Rollup, esbuild, Vite), удаляющая из production-бандла неиспользуемый код (dead code) проходом по графу import/export ES-модулей. Для side-effect-free пакетов бандлы сокращаются на 30-70 %; отмечайте их "sideEffects: false" в package.json.
- Web Worker
- Браузерный API, выполняющий JavaScript на отдельном потоке вне main thread. Тяжёлые вычисления (обработка изображений, шифрование, parsing) и сортировки больших массивов идут в worker'е, не блокируя main thread. Библиотека Comlink превращает message API в RPC.
- Shared Worker
- Один Web Worker, общий для нескольких вкладок / iframe одного origin. Используется для синхронизации состояния между вкладками (login, real-time события), одного общего WebSocket-соединения и общего кеша. Отличие от Service Worker: предназначен для чистых вычислений.
- Cache Storage API
- Современный асинхронный API внутри Service Worker, хранящий объекты Request/Response как key-value. caches.open() открывает cache; .put / .match манипулируют им. Основа PWA-precaching и runtime-cache; в отличие от LocalStorage сохраняет HTTP-семантику.
- ETag
- Версионный отпечаток (hash) HTTP-ответа. На следующем запросе браузер отправляет его через If-None-Match; если ничего не изменилось — сервер отвечает 304 Not Modified и не передаёт контент. Ключевой механизм кеширования статики и валидации API-ответов.
- Sustainable Web Manifesto
- Манифест из шести принципов (clean, efficient, open, honest, regenerative, resilient) для снижения экологического воздействия веб-сайта. Опубликован Wholegrain Digital и Mightybytes в 2019; основополагающий референс — веб даёт 2-3,7 % глобальных выбросов.
- Website Carbon Footprint Calculator
- Открытый сервис, рассчитывающий углеродные выбросы сайта на page view. Самый популярный — websitecarbon.com от Wholegrain Digital; формула: data transfer × carbon intensity региона CDN × коэффициент устройства пользователя. Цель — 1 г CO₂/page load; средние сайты — 2-5 г, тяжёлые анимация/видео — 8-15 г.
— ДЕРЕВО РЕШЕНИЙ
Подходит ли Вам операция composable commerce?
Ответьте «Да/Нет» на 4 вопроса; результат должен быть однозначным.
01 / 04
Ваш годовой GMV $2M+ или у Вас есть активные B2B-операции?
Минимальный порог окупаемости инвестиций в MACH + composable; для меньших магазинов OS 2.0 даёт более быстрый ROI.
— LET'S BEGIN
Что почти еженедельно ограничивает скорость frontend Вашего e-commerce?
Сканируем Ваш текущий сайт и составляем карту Web Vitals, cache-стратегии, SEO-рисков и модель ROI для headless.