INGENIERÍA DE COMPOSABLE COMMERCE
Headless Commerce
Máximo rendimiento, flexibilidad y ownership con Hydrogen, Remix, Next.js + arquitectura composable MACH — el sistema operativo moderno de commerce que desacopla frontend y backend.
Headless ya no es solo 'separar el frontend'; es una operación composable donde, bajo los principios MACH (Microservices + API-first + Cloud-native + Headless), eliges best-in-class para frontend + commerce engine + CMS + search + payment + identity y los compones en el edge.
El e-commerce de 2026 vive bajo tres presiones: los sistemas monolíticos de temas tocaron techo en velocidad y flexibilidad, el edge runtime (Cloudflare Workers, Vercel Edge, Shopify Oxygen) se convirtió en la capa principal de distribución, y React Server Components + streaming SSR bajaron el TTFB de segundos a cientos de milisegundos. La mayoría de marcas aún piensa que 'Hydrogen = solo Shopify' y no evalúa stacks como commercetools / BigCommerce / Saleor + Next.js + Sanity / Contentful + Algolia. La operación headless de Roibase se construye sobre seis principios.
METODOLOGÍA
Operación de composable commerce en 6 capas
Assess → Architect → Compose → Migrate → Launch → Observe. Cada capa se entrega con deliverable + ADR + SLA.
01
ASSESS
Evaluación del stack actual (monolito/temas, apps, CDN), baseline de performance, riesgo SEO, coste operativo y capacidad del equipo.
02
ARCHITECT
Arquitectura MACH, shortlist de vendors (engine/CMS/search/payment/identity), estrategia edge, documentos ADR, RFP + POC.
03
COMPOSE
Framework (Hydrogen / Next.js), integración del backend composable, GraphQL gateway, event bus (webhook + queue), feature flag.
04
MIGRATE
Data ETL (catálogo/cliente/pedido/contenido), mapping 301 + hreflang + sitemap, paridad en staging, smoke test feature-complete.
05
LAUNCH
Canary rollout, lanzamiento con feature flags, RUM + Sentry, stress test BFCM-ready, on-call de fin de semana + war room.
06
OBSERVE
Seguimiento SLO/SLI, QBR mensual de performance, monitoring de rank SEO, revisión de costes, actualización de ADR, runbook + formación + handoff.
— COMPARACIÓN
Tema monolítico vs headless template-only vs composable commerce de Roibase
La diferencia de los tres enfoques en performance, flexibilidad, vendor lock-in, SEO y TCO.
| Dimensión | Tema monolítico | Headless template-only | Composable commerce Roibase |
|---|---|---|---|
| Arquitectura | Monolito único | Plantilla + backend único | MACH + composable + edge |
| Flexibilidad de vendor | Platform lock-in | Engine lock-in | Selección best-of-breed (cada capa) |
| Edge runtime | No | Parcial | CF Workers / Vercel Edge / Oxygen |
| Performance (LCP) | 2,5-4,5s | 2,0-2,8s | < 1,5s baseline + RUM |
| Contenido + CMS | CMS de la plataforma (limitado) | CMS único | Sanity/Contentful/Storyblok best-fit |
| Search | Search nativo | Elasticsearch/Algolia inicial | Algolia/Typesense/Coveo + AI relevance |
| SEO | Dependiente del tema | SPA con riesgo | Ingeniería SSR + schema + 301 + hreflang |
| TCO al mes 24 | Bajo pero con deuda técnica | Medio + riesgo de vendor único | Medio + ownership + flexibilidad + velocidad |
PROOF
Outcomes, measured
Percentil 75 en mobile; tras la migración headless + edge runtime.
Media a 6 meses tras performance + streaming SSR + edge cache.
Tras preservación SEO + schema + hreflang + Core Web Vitals en verde, al mes 12.
CDN global Cloudflare Workers / Vercel Edge / Shopify Oxygen.
Tras estrategia ISR + partial prerendering + edge cache.
Engine + CMS + search + identity — cada una iterable por separado.
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; despliegue en Vercel Edge + ISR + SWR.
Commerce engine composable
commercetools / Saleor / BigCommerce / Shopify Storefront API; selección del engine best-fit + GraphQL + webhook + flujo event-driven.
Integración de CMS headless
Sanity, Contentful, Storyblok, Hygraph, Strapi; modelo de contenido, preview mode, editorial workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo / MeiliSearch; instant search, federated search, AI relevance tuning, reglas de merchandising.
Edge caching + ISR + SWR
Cloudflare Workers + KV/R2 / Vercel Edge / Oxygen; stale-while-revalidate, incremental static regeneration, edge middleware.
Ingeniería de Core Web Vitals
Presupuesto LCP < 1,5s / INP < 200ms / 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 Pay/Google Pay.
Playbook de migración
De Magento / WooCommerce / legacy Shopify / BigCommerce a headless; mapping 301, feature parity, staging/canary, go-live weekend.
A/B + feature flags + observability
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry; canary rollout + rollback + árbol de métricas SLO/SLI.
— BENEFICIOS
Cambio tangible en tu infraestructura de commerce
Cuando integras edge runtime + composable + performance + preservación SEO + observability, el ROI deja de depender de una sola métrica.
La velocidad crece de forma dramática
Con streaming SSR + edge runtime + RSC el LCP baja más de la mitad; suben la conversión mobile y los Core Web Vitals al verde.
La conversión crece
Con velocidad + personalización + UX más flexible bajan los drops del funnel y el abandono de carrito.
El rank SEO se protege y crece
Gracias a la ingeniería SSR + schema.org + 301 + hreflang + sitemap, el dip de migración es de 2-3 semanas y luego el rank sube.
Se abre la flexibilidad de vendor
Engine / CMS / search / identity son intercambiables en cada capa; se reducen el vendor lock-in y la presión de precio anual.
La velocidad de producto crece
Con feature flags + canary + ISR las nuevas features salen en horas, no en días; se multiplica la velocidad de experimentación.
Baja el coste operativo
Los apps parcheados sobre el monolito dejan paso a servicios composable; el edge cache reduce la carga al origen y el coste de infra se optimiza.
ENTREGABLES
Lo que recibes en cada engagement headless
Lista fija de entregables en el paquete de setup + 6 meses de operación; sin sorpresas de facturación.
Informe de feasibility + ROI headless
Auditoría del stack actual, modelo TCO, baseline de performance, riesgo SEO, evaluación de capacidad del equipo; 50-80 páginas.
Arquitectura MACH + documentos ADR
Decisiones de vendor para engine + CMS + search + payment + identity + edge + CI/CD, cada una con ADR justificado.
Selección de framework + POC
Matriz de decisión Hydrogen / Next.js / Remix / Nuxt + POC de 2-3 semanas + informe de benchmark de performance.
Setup del backend composable
Integración commercetools / Saleor / BC / Shopify Storefront API + GraphQL gateway + webhook + event bus.
Esquema de CMS headless
Modelo de contenido Sanity / Contentful / Storyblok, preview mode, editorial workflow + live preview.
Search + merchandising
Setup Algolia / Typesense / Coveo + esquema de index + AI relevance tuning + reglas de merchandising.
Estrategia de edge runtime + cache
Despliegue Cloudflare Workers / Vercel Edge / Oxygen + KV/R2 + ISR + SWR + edge middleware.
Identity + payment + subscription
Integración Auth0 / Clerk / Supabase Auth + Stripe / Adyen + flujo compatible con passkey + SCA + 3DS2.
Paquete de preservación SEO
Mapping 301, canonical, schema.org, hreflang, sitemap, robots, ITA (International Targeting); dashboard de monitoring de rank.
Infraestructura de feature flags + A/B
GrowthBook / Statsig / LaunchDarkly + canary + kill switch + árbol de métricas de experimentos.
Observability + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty; runbook de incidentes.
Runbook + formación + 3 meses de soporte
Runbook de arquitectura + deploy + rollback + monitoring, sesiones de formación para tu equipo, 90 días de soporte + on-call.
— ALCANCE
Lo que hacemos y lo que no
Scope de composable commerce por escrito; previene sorpresas y facturas adicionales.
Lo hacemos
- Arquitectura MACH + composable commerce + ADR
- Shopify Hydrogen + Oxygen (RSC + Remix)
- Next.js + App Router + RSC + Vercel Edge
- commercetools / Saleor / BC / Shopify Storefront API
- CMS headless Sanity / Contentful / Storyblok
- Search + merchandising con Algolia / Typesense / Coveo
- Edge runtime (Cloudflare Workers / Vercel Edge / Oxygen)
- Preservación SEO (301 / schema / hreflang / sitemap)
- Feature flags + canary + rollback + observability
- Integración de identity + payment + subscription
- Ingeniería de Core Web Vitals + RUM
- Runbook + formación + 90 días de soporte + on-call
No hacemos
- Desarrollo de temas monolíticos Magento / WooCommerce (solo migración)
- Desarrollo core de ERP / OMS / WMS (los integramos)
- Operar presupuesto publicitario (la unidad de Acquisition es un engagement aparte)
- Logística física / almacén / operativa de aduanas
- Procesamiento de tarjetas / ownership del scope PCI (queda en el vendor de payment)
- Procesos regulatorios de banking / KYC / AML (con partners)
- Outsourcing de atención al cliente (montamos la herramienta, la operación es del cliente)
- Fake reviews / tráfico bot / manipulación artificial de velocidad
HOW WE WORK
Setup + migración de 12-16 semanas, después operación mensual
Semana 1-2: assess + feasibility
Auditoría del stack actual, baseline de performance, riesgo SEO, modelo TCO, capacidad del equipo + borrador de ADR.
Semana 3-4: architect + RFP/POC de vendor
Arquitectura MACH, shortlist engine/CMS/search/payment/identity + RFP + POC de 2-3 semanas.
Semana 5-6: compose + setup del framework
Setup Hydrogen / Next.js, integración de Storefront API / commerce engine, GraphQL gateway, despliegue de edge runtime.
Semana 7: CMS + search + merchandising
Modelo de contenido Sanity / Contentful, index Algolia / Typesense + relevance tuning, reglas de merchandising.
Semana 8: identity + payment + subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + passkey + accelerated checkout.
Semana 9-10: data ETL + mapping 301
ETL de catálogo / cliente / pedido / contenido, URL mapping, plan 301, hreflang + sitemap + schema.
Semana 11-12: staging + canary + stress BFCM
Paridad en staging, smoke test, canary rollout, lanzamiento con feature flags, stress test BFCM + plan de war room.
Semana 13+: go-live + observe + QBR + soporte
Playbook de go-live weekend, RUM + Sentry + SLO/SLI, QBR mensual, runbook + formación + 3 meses de soporte.
— TOOLKIT
Las herramientas que usamos — vendor-agnostic pero con selección firme
Elegimos la apropiada para cada cliente; mantenemos la independencia no cobrando comisiones.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONALIZATION
EDGE & OBSERVABILITY
QUESTIONS
Frequently asked
— GLOSARIO
Conceptos clave de composable commerce
El idioma común de tus equipos de ingeniería, producto, operaciones y marketing.
- MACH
- Abreviatura de Microservices + API-first + Cloud-native + Headless; el marco de la arquitectura de composable commerce, definido por la MACH Alliance.
- Composable Commerce
- Arquitectura de commerce compuesta eligiendo un vendor best-of-breed para cada función en lugar de una plataforma monolítica; engine + CMS + search + payment + identity son servicios separados.
- Headless
- Desacoplamiento vía API de la capa entre frontend (presentation) y backend (commerce engine / CMS); permite que el frontend corra en cualquier framework + runtime.
- React Server Components (RSC)
- Modelo de componentes introducido en React 18+ que renderiza en servidor y no envía JS al cliente; lo usa de forma nativa Next.js App Router + Shopify Hydrogen y reduce el coste de bundle e hydration.
- Streaming SSR
- Modelo de render en el que el HTML de la página no se envía de una vez, sino en streaming desde el servidor al cliente empezando por las partes listas; baja el TTFB y el LCP.
- Edge Runtime
- Runtime que ejecuta el código en el nodo CDN geográficamente más cercano al usuario; Cloudflare Workers, Vercel Edge y Shopify Oxygen son los principales ejemplos. Minimiza la latency y aporta consistencia global.
- ISR (Incremental Static Regeneration)
- Las páginas construidas de forma estática se regeneran en segundo plano a intervalos o por trigger; combina la velocidad de lo estático con datos frescos.
- Stale-While-Revalidate (SWR)
- Estrategia de cache HTTP; muestra al usuario contenido stale al instante mientras en segundo plano se hace fetch de la versión fresca. Equilibra velocidad y freshness.
- Storefront API
- API pública GraphQL de Shopify; permite a frontends headless / custom / apps móviles acceder a producto + colección + carrito + checkout.
- commercetools
- Commerce engine composable; API-first + compatible con MACH, uno de los engines más usados en escenarios enterprise B2B + B2C. Cuenta con su ecosistema commercetools Frontend + Studio.
- ADR (Architecture Decision Record)
- Formato de documentación que registra por escrito el contexto, las opciones, el resultado y los tradeoffs de una decisión de arquitectura de software; estándar para decisiones de vendor en un stack composable.
- Feature Flag
- Interruptor de característica que se puede activar/desactivar en runtime, independiente del deploy; se usa en canary releases, A/B tests y kill switches; GrowthBook/Statsig/LaunchDarkly son las herramientas principales.
- SSR (Server-Side Rendering)
- Renderizar el HTML en el servidor y enviarlo listo para pintar al navegador. Mejor que CSR en SEO y LCP; modo por defecto de frameworks como Nuxt 3, Next.js y Remix. A escala necesita edge cache y una estrategia de hydration cuidada.
- CSR (Client-Side Rendering)
- Servir un esqueleto HTML casi vacío + bundle JS y renderizar en el navegador. Modo típico de las SPA; el first paint es lento y el SEO requiere prerendering adicional por ruta. LCP cae mucho en redes pobres o dispositivos modestos.
- Edge Functions
- Capa de cómputo ligera dentro del propio CDN (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Hace geo-routing, bucketing de A/B test, manipulación de headers y auth en milisegundos sin volver al origen; cold start prácticamente nulo.
- CDN (Content Delivery Network)
- Red que cachea contenido estático (y cada vez más dinámico) en nodos edge distribuidos geográficamente. Baja TTFB y LCP, protege el origin de DDoS y picos de tráfico. Cloudflare, Fastly, Akamai, AWS CloudFront — table stakes para cualquier stack moderno.
- Frontend
- La capa que el usuario ve y con la que interactúa en el navegador — HTML, CSS, JS, assets visuales y comportamiento en runtime. Vive separado del backend; frameworks habituales: Vue/Nuxt, React/Next, Svelte/SvelteKit; primera línea para performance, accesibilidad y SEO.
- Backend
- Capa server-side para business logic, acceso a base de datos, autenticación, pagos e integraciones. Publica las APIs que consume el frontend; los stacks más comunes son Node.js, Python, Go y .NET; verdadero dueño de la escala, la seguridad y la consistencia de datos.
- Component-based Architecture
- Arquitectura frontend que parte el UI en piezas aisladas, reutilizables y testables individualmente. El paradigma central de Vue/React/Svelte; encarnación física del design system, reduce coste de refactor e inconsistencia visual.
- State Management
- Disciplina sobre dónde vive el estado compartido y el UI state en el frontend, cómo se actualiza y cómo se propaga a los componentes. Pinia (Vue), Redux/Zustand (React), Svelte stores; en productos complejos, base de rendering performance y trazabilidad de errores.
- Code Splitting
- Producir chunks JS por ruta o feature en vez de un único bundle grande, para que cada página cargue solo lo que necesita. Optimización central de Vite/Webpack/Rollup; impacta directo LCP y TTI, suele ir con lazy imports + dynamic routes.
- Lazy Loading
- Técnica que carga contenido (imagen, componente, ruta, librería) sólo cuando se necesita. Nativo vía <img loading="lazy">, en frameworks vía dynamic imports; reduce notablemente el first paint y el consumo de datos.
- SPA (Single Page Application)
- Tipo de app que carga toda la shell en la primera visita y resuelve las navegaciones siguientes con un router client-side. Se siente instantáneo; el first paint es pesado, el SEO requiere prerendering extra, sigue muy usado en superficies tipo app.
- PWA (Progressive Web App)
- App web instalable desde el navegador que puede funcionar offline y recibir push notifications. Sustentada por Service Workers + Web App Manifest; se comporta como app nativa pero salta ASO y distribución en stores.
- SSG (Static Site Generation)
- Generar cada página como HTML en build time y servirla desde un CDN. Máxima performance + mínima infraestructura; ideal para sitios cuyo contenido cambia poco (blog, marketing, docs, glosario) — Nuxt generate, Next.js export, Astro.
- Web Component
- Estándar de componentes nativo del navegador, agnóstico al framework: Custom Elements + Shadow DOM + HTML Templates. Se escribe con Stencil/Lit y se consume dentro de cualquier framework; convierte el design system en piezas portables que cruzan React/Vue/Svelte.
- REST API
- Estilo arquitectónico que comunica vía verbos HTTP (GET/POST/PUT/PATCH/DELETE) y URLs basadas en recursos. Stateless, suele llevar JSON, se documenta con OpenAPI; sigue siendo la superficie de integración por defecto de ~80% de las apps web y móviles.
- GraphQL
- Lenguaje de query y runtime que permite al cliente pedir, en una sola query, sólo los campos que necesita. Alternativa al over/under-fetching de REST; el sistema de tipos y schema-first mejora notablemente la DX del frontend.
- Webhook
- Patrón en el que un sistema hace un HTTP POST a una URL pre-registrada cuando ocurre un evento (pago completado, pedido creado). Lo opuesto al polling — tiempo real y eficiente en recursos; la verificación de firma y el handling idempotente son obligatorios.
- JWT (JSON Web Token)
- Estándar de token compacto y autocontenido en formato Header.Payload.Signature. Se usa para autenticación stateless entre SPA y API; los claims de expiración, la rotación de refresh tokens y la gestión de secretos son las palancas críticas.
- OAuth 2.0
- Protocolo de delegación que permite a un usuario dar acceso limitado a una app de terceros sin compartir su password. El flujo Authorization Code + PKCE es el estándar web moderno; sustenta "Sign in with Google" y "Conectar app de Slack".
- Rate Limiting
- Capa que limita cuántas requests acepta una API por segundo o minuto, para evitar abuso, brute-force y picos de coste. Se implementa con token-bucket o sliding-window; las cabeceras X-RateLimit-* en la respuesta son estándar de facto.
- API Gateway
- Capa reverse-proxy que canaliza todo el tráfico API externo por un único punto. Autenticación, rate limiting, routing, transformación request/response y métricas en un mismo sitio; AWS API Gateway, Kong, Apigee y Cloudflare API Gateway son opciones habituales.
- Design Pattern
- Receta probada para un problema recurrente en arquitectura software (Gang of Four). Singleton, Factory, Observer, Strategy, Decorator y los otros 23 clásicos; vocabulario compartido que acelera refactor y code review.
- Monorepo
- Guardar varios proyectos/librerías en un único repo Git. Nx, Turborepo, pnpm workspaces; habilita refactor cross-package + commits atómicos + tooling compartido, pero al crecer exige disciplina seria de build system.
- TDD (Test-Driven Development)
- Bucle: escribir test fallido → código mínimo para pasar → refactorizar (Red-Green-Refactor). Deja que los tests presionen el diseño, caza regresiones y documenta intención — no encaja en todo equipo/proyecto, exige disciplina.
- Refactoring
- Mejorar la estructura interna del código sin cambiar el comportamiento externo — por legibilidad, simplicidad, testabilidad. La test coverage es prerrequisito (red de seguridad), pasos pequeños + commits es el ritmo, las refactor tools del IDE (extract method, rename) son estándar.
- Semantic Versioning (SemVer)
- Esquema de numeración MAJOR.MINOR.PATCH: MAJOR = breaking change, MINOR = feature backward-compatible, PATCH = bug fix. Lenguaje común de los ecosistemas npm/PyPI/Cargo; base de operadores de rango como "^1.2.3".
- Race Condition
- Bug nacido cuando dos o más threads/procesos acceden a un recurso compartido en orden impredecible. Se resuelve con mutex, semáforos, operaciones atómicas, immutable state o single-writer pattern; una de las clases de bug más difíciles de depurar.
- Idempotency
- Propiedad por la cual llamar la misma request N veces deja el sistema en el mismo estado que llamarla una. PUT y DELETE son naturalmente idempotentes; para POST se usa una cabecera Idempotency-Key (Stripe, webhooks de pago). Requisito innegociable para retry distribuido.
- Memory Leak
- Programa que no libera memoria que ya no necesita — el uso de RAM crece con el tiempo y termina en crash OOM. En JS: refs DOM desconectadas + captures de closure; en Node: event listeners filtrados; en DI containers: refs retenidas — los culpables habituales.
- Garbage Collection (GC)
- Mecanismo en runtime que detecta y libera automáticamente memoria que el programa ya no puede alcanzar. JS V8 = generacional + incremental, Java/JVM = ZGC/G1, Go = concurrent mark-sweep; alternativa al manejo manual de memoria (C/C++).
- Concurrency vs Parallelism
- Concurrency = manejar muchas tareas a la vez (estructura), Parallelism = ejecutar muchas tareas a la vez (hardware). I/O async en single-core es concurrent; thread pool en multi-core es parallel — se confunden a menudo, pero son conceptos distintos.
- Immutability
- Principio por el que una estructura de datos no puede modificarse tras crearse — cada "cambio" produce una copia nueva. Base de la programación funcional y defensa natural contra race conditions en React state, Redux, Vue Pinia y código concurrente; el structural sharing mantiene la performance.
- Dependency Injection (DI)
- Patrón en el que un componente recibe las dependencias que necesita desde fuera en vez de instanciarlas él mismo. Eleva muchísimo la testabilidad (mock injection), el loose coupling y la flexibilidad de config; Spring, Angular, NestJS y Vue provide/inject lo usan.
- Polyfill
- Código que emula una API JS moderna (fetch, Array.flat, Promise) ausente en navegadores antiguos. Normalmente se inyecta en build vía @babel/preset-env o core-js según target browsers; NO debería enviarse a navegadores modernos (bundle bloat).
- Regex (Regular Expression)
- Mini-lenguaje para definir patrones de texto y hacer búsqueda, match, parse y reemplazo. Sintaxis de character classes + cuantificadores + anchors como /^\d{3}-\d{4}$/; soportado por todo lenguaje (JS, Python, Go) — pero no usarlo para parsear HTML.
- SDK (Software Development Kit)
- Paquete de librería + docs publicado para facilitar la integración con una plataforma/servicio (Stripe, AWS, Twilio). Reemplaza llamadas HTTP API crudas con métodos type-safe, retries built-in, helpers de auth y test tooling.
- Callback Hell
- La forma piramidal profunda del código que aparece con callbacks muy anidados (.then().then().then()...). Resuelto por Promises + async/await; hoy sobrevive sobre todo en legacy jQuery y librerías Node.js viejas.
- Code Review
- Práctica de que otros developers lean y critiquen el código de un colega antes del merge. Caza bugs, difunde conocimiento y refuerza consistencia; el workflow basado en PR de GitHub/GitLab es la norma, con tono de "discusión" (no gatekeeping bloqueante) siendo lo sano.
- Pair Programming
- Dos developers trabajando en una máquina — el driver escribe código, el navigator lleva estrategia y caza errores. Mejora transferencia de conocimiento, calidad de código y velocidad de onboarding; en remoto vía VS Code Live Share o JetBrains Code With Me.
- Technical Debt
- La "complejidad a pagar" que se acumula por quick fixes y decisiones de diseño atajadas. El coste de refactor crece como interés; gestionarla pide un debt log, visibilidad (tech-debt board) y reservar 15-20 % de la capacidad del sprint para amortizarla.
- Long Task
- Cualquier trabajo JS que bloquea el main thread del navegador más de 50 ms. Enemigo principal de INP y TBT; hay que partirlo con debounce, requestIdleCallback, web workers o time-slicing (yield). Aparece como barras rojas en el panel Performance de Chrome DevTools.
- Speculation Rules API
- API nueva en Chrome 109+ que pre-renderiza páginas en segundo plano bajo el supuesto de "el usuario probablemente visitará este link". Una lista JSON define targets de prerender/prefetch y la siguiente página abre al instante. La versión nativa del navegador de los trucos perf de SPA.
- View Transitions API
- API nativa del navegador en Chrome 111+ que produce transiciones suaves estilo SPA entre páginas o cambios de estado. Envolviendo una mutación del DOM en document.startViewTransition() se generan animaciones fade/slide automáticas; combinable con frameworks SPA.
- Container Queries
- Característica CSS que aplica estilos a un componente según el tamaño de su propio contenedor en lugar de @media. Una card puede renderizarse compacta a 300 px y ancha a 600 px sin cambiar el viewport. Soportada en todos los navegadores modernos desde 2023; pieza faltante del component-driven design.
- CSS Cascade Layers (@layer)
- Funcionalidad CSS de 2022 que resuelve las guerras de especificidad. Con @layer reset, base, components, utilities el orden entre capas es explícito — incluso un !important en una capa inferior pierde frente a un estilo normal en una capa superior. Integrado en Tailwind v4 y Bootstrap 5+.
- CSS Houdini
- Familia de APIs W3C que permite a JavaScript extender el pipeline de renderizado CSS del navegador. Paint API (fondos custom), Layout API (flex/grid custom), Properties & Values API. Te permite enviar efectos que no existen en CSS nativo como código GPU-acelerado en vez de polyfills JS.
- WebGPU
- Sucesor de WebGL — API moderna de gráficos y compute. Da acceso directo a la GPU vía Vulkan/Metal/DirectX 12, habilitando juegos calidad nativa, inferencia AI y compute científico en el navegador. Disponible de forma general desde Chrome 113; mueve los demos web de Stable Diffusion y LLM inference.
- WebAssembly (WASM)
- Bytecode de bajo nivel que corre en el navegador a velocidad casi nativa, compilado desde lenguajes como C/C++/Rust/Go. Mueve Figma, Photoshop Web, AutoCAD Web y el motor de ajedrez Stockfish; ideal para escenarios que requieren 5-20× la performance de JavaScript.
- Service Worker
- Proxy JS que se sitúa entre el navegador y la red y puede seguir ejecutándose aunque la página esté cerrada. Base de las estrategias de cache offline-first de las PWA, push notifications y background sync. La librería Workbox es la herramienta más común.
- Workbox
- Librería JavaScript de Google que simplifica escribir service workers. Provee estrategias listas (cache-first, network-first, stale-while-revalidate), precaching, runtime caching y APIs de background sync. Estándar en pipelines de build PWA (Workbox-CLI, vite-plugin-pwa).
- Critical CSS
- Técnica que incrusta inline en el <head> del HTML el CSS mínimo para renderizar el área above-the-fold. Mientras los CSS externos render-blocking cargan en paralelo, FCP/LCP mejoran 200-500 ms. Herramientas como critters, beasties y penthouse automatizan el flujo.
- Resource Hints (preload / prefetch / preconnect / dns-prefetch)
- Tags <link> que indican al navegador "este recurso se necesitará pronto". preload: asset crítico de la página actual (fuente, hero); prefetch: próxima navegación; preconnect: abre TLS handshake antes; dns-prefetch: solo DNS lookup. Bien usados, restan ~500 ms al LCP.
- fetchpriority
- Atributo HTML / opción de fetch() que asigna prioridad "high"/"low"/"auto" a <img>, <link> o fetch() (Chrome 101+). Anula la decisión de prioridad por defecto del navegador; poner fetchpriority="high" en la imagen LCP da una aceleración dramática.
- HTTP/3 (QUIC)
- Tercera generación de HTTP, sobre el protocolo QUIC de Google que corre sobre UDP en lugar de TCP. Conexión 0-RTT (handshake TLS en el primer paquete), sin head-of-line blocking, sin caída al cambiar de red móvil. Estándar en Cloudflare, Akamai y Fastly.
- Brotli (compression)
- Algoritmo de content-encoding HTTP que Google introdujo en 2015 y comprime un 15-25 % mejor que gzip. Más del 95 % de los navegadores modernos lo soportan; los assets estáticos se pre-comprimen en build con brotli-11 y el HTML dinámico con brotli-4-5 en runtime.
- Edge Compute
- Paradigma de ejecutar código en nodos edge cerca del usuario en vez del origen. Cloudflare Workers, Vercel Edge Functions, Netlify Edge y Fastly Compute@Edge bajan la latencia a 20-50 ms; A/B tests, redirects geo-aware y inyección de headers auth ocurren en el edge.
- Streaming Hydration
- Técnica donde el servidor envía HTML por chunks y React/Vue inicia la hydration en cuanto llega cada chunk. React 18 Suspense + Server Components, Nuxt 3 y la resumability de Qwik avanzan en esa dirección. Reduce TTFB y TTI solapándolos.
- Islands Architecture
- Arquitectura "estático por defecto + islas interactivas" popularizada por Astro. La mayor parte de la página se pre-renderiza con cero JS; solo los componentes interactivos ("islas") hidratan. Los bundles JS bajan 70-90 % y los scores de performance suben. Ideal en sitios de contenido.
- Partial Hydration
- Técnica que hidrata solo componentes visibles o interactivos en lugar de toda la página. Ejemplos: estrategias hydrateOnVisible / hydrateOnIdle / hydrateOnInteraction de Vue 3.5 y React Lazy + Suspense. Mecanismo fundamental detrás de la arquitectura de islas.
- Tree Shaking
- Optimización de bundlers (Webpack, Rollup, esbuild, Vite) que elimina del bundle de producción el código no usado (dead code) recorriendo el grafo import/export de ES modules. En paquetes side-effect-free los bundles bajan 30-70 %; márcalos con "sideEffects: false" en package.json.
- Web Worker
- API del navegador que ejecuta JavaScript en un hilo aparte del main thread. Cálculos pesados (procesamiento de imagen, cifrado, parsing) y ordenado de arrays grandes ocurren en el worker sin bloquear el main thread. La librería Comlink convierte la API de mensajes en RPC.
- Shared Worker
- Un único Web Worker compartido por varias pestañas / iframes del mismo origen. Se usa para sync de estado entre pestañas (login, eventos en tiempo real), una sola conexión WebSocket compartida y un cache compartido. Distinto del Service Worker: pensado para compute puro.
- Cache Storage API
- API asíncrona moderna dentro del Service Worker que guarda objetos Request/Response como pares clave-valor. caches.open() abre un cache; .put / .match lo manipulan. Base del precaching y runtime caching de PWA; a diferencia de LocalStorage, preserva la semántica HTTP.
- ETag
- Huella de versión (hash) sobre una respuesta HTTP. En la siguiente petición el navegador la envía vía If-None-Match; si nada cambió el servidor responde 304 Not Modified y evita re-transferir contenido. Mecanismo central de caching de assets estáticos y validación de respuestas API.
- Sustainable Web Manifesto
- Declaración de seis principios (clean, efficient, open, honest, regenerative, resilient) para reducir el impacto ambiental de un sitio web. Publicada por Wholegrain Digital y Mightybytes en 2019; referencia fundacional al reconocer que la web supone el 2-3,7 % de las emisiones globales.
- Website Carbon Footprint Calculator
- Servicio abierto que calcula las emisiones de carbono de una web por carga de página. El más popular es websitecarbon.com de Wholegrain Digital; fórmula: data transfer × intensidad de carbono de la región de la CDN × factor de dispositivo del usuario. Objetivo 1 g CO₂ por page load; las webs medias andan en 2-5 g y las pesadas con animación/vídeo en 8-15 g.
— ÁRBOL DE DECISIÓN
¿Te conviene la operación de composable commerce?
Responde Sí/No a 4 preguntas; obtén un resultado claro.
01 / 04
¿Tu GMV anual es de $2M+ o tienes operación B2B activa?
Umbral mínimo para que la inversión en MACH + composable tenga ROI; en tiendas más pequeñas OS 2.0 da ROI más rápido.
— LET'S BEGIN
¿Qué está limitando la velocidad de frontend de tu e-commerce casi cada semana?
Escaneamos tu sitio actual y sacamos Web Vitals, estrategia de cache, mapa de riesgo SEO y modelo de ROI headless.