COMPOSABLE COMMERCE ENGINEERING
Headless Commerce
Hydrogen, Remix, Next.js + composable MACH architecture for maximum performance, flexibility and ownership — a modern commerce operating system that decouples frontend from backend.
Headless is no longer just 'separating the frontend'; it's a composable operation where — under MACH (Microservices + API-first + Cloud-native + Headless) principles — frontend + commerce engine + CMS + search + payment + identity are each chosen best-in-class and composed at the edge.
2026 e-commerce is under three pressures: monolithic theme systems have hit the speed + flexibility ceiling, edge runtimes (Cloudflare Workers, Vercel Edge, Shopify Oxygen) have become the primary delivery layer, and React Server Components + streaming SSR have cut TTFB from seconds to hundreds of milliseconds. Most brands still think 'Hydrogen = Shopify only' and never evaluate a commercetools / BigCommerce / Saleor composable engine + Next.js + Sanity / Contentful + Algolia stack. Roibase's headless operation is built on six principles.
METHODOLOGY
6-layer composable commerce operation
Assess -> Architect -> Compose -> Migrate -> Launch -> Observe. Every layer ships with deliverables + ADR + SLA.
01
ASSESS
Current stack (monolith/themes, apps, CDN), performance baseline, SEO risk, operational cost, team capacity assessment.
02
ARCHITECT
MACH architecture, vendor shortlist (engine/CMS/search/payment/identity), edge strategy, ADR documents, RFP + POC.
03
COMPOSE
Framework (Hydrogen / Next.js), composable backend integration, GraphQL gateway, event bus (webhook + queue), feature flags.
04
MIGRATE
Data ETL (catalog/customer/order/content), 301 mapping + hreflang + sitemap, staging parity, feature-complete smoke tests.
05
LAUNCH
Canary rollout, feature-flagged launch, RUM + Sentry, BFCM-ready stress test, weekend on-call + war room.
06
OBSERVE
SLO/SLI tracking, monthly performance QBR, SEO rank monitoring, cost review, ADR updates, runbook + training + handoff.
— COMPARISON
Monolithic theme vs template-only headless vs Roibase composable commerce
How the three approaches compare on performance, flexibility, vendor lock-in, SEO and TCO.
| Dimension | Monolithic theme | Template-only headless | Roibase composable commerce |
|---|---|---|---|
| Architecture | Single monolith | Template + single backend | MACH + composable + edge |
| Vendor flexibility | Platform lock-in | Engine lock-in | Best-of-breed selection (per layer) |
| Edge runtime | None | Partial | CF Workers / Vercel Edge / Oxygen |
| Performance (LCP) | 2.5-4.5s | 2.0-2.8s | < 1.5s baseline + RUM |
| Content + CMS | Platform CMS (limited) | Single CMS | Sanity/Contentful/Storyblok best-fit |
| Search | Native search | Elasticsearch/Algolia starter | Algolia/Typesense/Coveo + AI relevance |
| SEO | Theme-dependent | Risky on SPA | SSR + schema + 301 + hreflang engineering |
| TCO at month 24 | Low but technical debt | Medium + single-vendor risk | Medium + ownership + flexibility + speed |
PROOF
Outcomes, measured
75th percentile mobile; after headless migration + edge runtime.
6-month average after performance + streaming SSR + edge cache.
Month 12, after SEO preservation + schema + hreflang + green Core Web Vitals.
Cloudflare Workers / Vercel Edge / Shopify Oxygen global CDN.
After ISR + partial prerendering + edge cache strategy.
Engine + CMS + search + identity — each iterates separately.
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 deployment + ISR + SWR.
Composable commerce engine
commercetools / Saleor / BigCommerce / Shopify Storefront API; best-fit engine selection + GraphQL + webhook + event-driven flows.
Headless CMS integration
Sanity, Contentful, Storyblok, Hygraph, Strapi; content model, preview mode, editorial workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo / MeiliSearch; instant search, federated search, AI relevance tuning, merchandising rules.
Edge caching + ISR + SWR
Cloudflare Workers + KV/R2 / Vercel Edge / Oxygen; stale-while-revalidate, incremental static regeneration, edge middleware.
Core Web Vitals engineering
LCP < 1.5s / INP < 200ms / CLS < 0.05 budget; 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 to headless; 301 mapping, feature parity, staging/canary, go-live weekend.
A/B + feature flags + observability
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry; canary rollout + rollback + SLO/SLI metric tree.
— BENEFITS
The concrete change in your commerce infrastructure
When edge runtime + composable + performance + SEO preservation + observability come together, ROI stops depending on a single metric.
Speed rises dramatically
Streaming SSR + edge runtime + RSC cut LCP by more than half; mobile conversion and Core Web Vitals turn green.
Conversion grows
Speed + personalization + more flexible UX reduce funnel drop and cart abandonment.
SEO rank is preserved and grows
SSR + schema.org + 301 + hreflang + sitemap engineering limit the migration dip to 2-3 weeks, followed by rank gains.
Vendor flexibility opens up
Engine / CMS / search / identity can be swapped at every layer; vendor lock-in + annual price pressure shrink.
Product velocity grows
With feature flags + canary + ISR, new features ship hourly instead of daily; experiment velocity increases.
Operational cost drops
Apps patched onto a monolith give way to composable services; edge cache lowers origin load and infra cost is optimized.
DELIVERABLES
What you get in every headless engagement
A fixed deliverables list in the setup + 6-month operation package; no surprise add-on invoices.
Headless feasibility + ROI report
Current stack audit, TCO model, performance baseline, SEO risk, team capacity assessment; 50-80 pages.
MACH architecture + ADR documents
Engine + CMS + search + payment + identity + edge + CI/CD vendor decisions, each with a reasoned ADR.
Framework selection + POC
Hydrogen / Next.js / Remix / Nuxt decision matrix + 2-3 week POC + performance benchmark report.
Composable backend setup
commercetools / Saleor / BC / Shopify Storefront API integration + GraphQL gateway + webhook + event bus.
Headless CMS schema
Sanity / Contentful / Storyblok content model, preview mode, editorial workflow + live preview.
Search + merchandising
Algolia / Typesense / Coveo setup + index schema + AI relevance tuning + merchandising rules.
Edge runtime + cache strategy
Cloudflare Workers / Vercel Edge / Oxygen deploy + KV/R2 + ISR + SWR + edge middleware.
Identity + payment + subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen integration + passkey + SCA + 3DS2-compliant flow.
SEO preservation package
301 mapping, canonical, schema.org, hreflang, sitemap, robots, ITA (International Targeting); rank monitoring dashboard.
Feature flag + A/B infrastructure
GrowthBook / Statsig / LaunchDarkly + canary + kill switch + experiment metric tree.
Observability + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty; incident runbook.
Runbook + training + 3 months of support
Architecture + deploy + rollback + monitoring runbook, team training sessions, 90 days of support + on-call.
— SCOPE
What we do and don't do
Composable commerce scope written down; prevents surprises and follow-on invoices.
We do
- MACH + composable commerce architecture + 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 integration
- Core Web Vitals engineering + RUM
- Runbook + training + 90 days of support + on-call
We don't do
- Monolithic Magento / WooCommerce theme development (migration only)
- ERP / OMS / WMS core development (we integrate)
- Running ad budgets (Acquisition is a separate engagement)
- Physical logistics / warehousing / customs operations
- Card processing / PCI scope ownership (stays with the payment vendor)
- Banking / KYC / AML regulatory processes (via partner firms)
- Customer service outsourcing (we install the tooling, you operate)
- Fake reviews / bot traffic / artificial speed manipulation
HOW WE WORK
12-16 weeks of setup + migration, then monthly operation
Week 1-2: assess + feasibility
Current stack audit, performance baseline, SEO risk, TCO model, team capacity + draft ADR.
Week 3-4: architect + vendor RFP/POC
MACH architecture, engine/CMS/search/payment/identity shortlist + RFP + 2-3 week POC.
Week 5-6: compose + framework setup
Hydrogen / Next.js setup, Storefront API / commerce engine integration, GraphQL gateway, edge runtime deploy.
Week 7: CMS + search + merchandising
Sanity / Contentful content model, Algolia / Typesense index + relevance tuning, merchandising rules.
Week 8: identity + payment + subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + passkey + accelerated checkout.
Week 9-10: data ETL + 301 mapping
Catalog / customer / order / content ETL, URL mapping, 301 plan, hreflang + sitemap + schema.
Week 11-12: staging + canary + BFCM stress
Staging parity, smoke test, canary rollout, feature-flagged launch, BFCM stress test + war-room plan.
Week 13+: go-live + observe + QBR + support
Go-live weekend playbook, RUM + Sentry + SLO/SLI, monthly QBR, runbook + training + 3 months of support.
— TOOLKIT
Tools we use — vendor-agnostic but deliberate
We pick what fits each client; we keep our independence by refusing commissions.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONALIZATION
EDGE & OBSERVABILITY
QUESTIONS
Frequently asked
— GLOSSARY
Core concepts of composable commerce
A shared language for your engineering, product, operations and marketing teams.
- MACH
- Acronym for Microservices + API-first + Cloud-native + Headless; the framework for composable commerce architecture, defined by the MACH Alliance.
- Composable Commerce
- A commerce architecture composed of best-of-breed vendors per function instead of a single monolithic platform; engine + CMS + search + payment + identity as separate services.
- Headless
- Decoupling the frontend (presentation) from the backend (commerce engine / CMS) through APIs; lets the frontend run on any framework + runtime.
- React Server Components (RSC)
- A React 18+ component model rendered on the server that ships no JS to the client; Next.js App Router + Shopify Hydrogen use it natively, lowering bundle + hydration cost.
- Streaming SSR
- A render mode where the page's HTML is streamed from server to client piece by piece as it becomes ready, rather than all at once; TTFB and LCP drop.
- Edge Runtime
- A runtime that executes code on the CDN node geographically closest to the user; Cloudflare Workers, Vercel Edge and Shopify Oxygen are the main examples. Minimizes latency with global consistency.
- ISR (Incremental Static Regeneration)
- Rebuilding statically built pages in the background at intervals or via triggers; combines static speed with fresh data.
- Stale-While-Revalidate (SWR)
- An HTTP cache strategy that serves stale content instantly while fetching a fresh version in the background. A balance of speed + freshness.
- Storefront API
- Shopify's public GraphQL API; lets headless / custom frontends / mobile apps access product + collection + cart + checkout data.
- commercetools
- A composable commerce engine; API-first + MACH compliant, and one of the most widely used engines in enterprise B2B + B2C scenarios. commercetools Frontend + Studio ecosystem available.
- ADR (Architecture Decision Record)
- A documentation format that captures the context, options, decision and trade-offs of a software architecture choice; standard for vendor decisions in a composable stack.
- Feature Flag
- A runtime toggle independent of deploys; used for canary releases, A/B tests and kill-switch scenarios; GrowthBook/Statsig/LaunchDarkly are the main tools.
- SSR (Server-Side Rendering)
- Rendering HTML on the server and shipping it ready-to-paint to the browser. Beats CSR on SEO and LCP; the default mode of frameworks like Nuxt 3, Next.js and Remix. At scale it needs edge caching and a thoughtful hydration strategy.
- CSR (Client-Side Rendering)
- Shipping a near-empty HTML shell + JS bundle and rendering in the browser. Typical mode for SPAs; first paint is slow and SEO needs additional route prerendering. LCP degrades sharply on poor networks or low-end devices.
- Edge Functions
- A lightweight compute layer running inside the CDN itself (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Performs geo-routing, A/B test bucketing, header manipulation and auth in milliseconds without going back to the origin; near-zero cold start.
- CDN (Content Delivery Network)
- A network that caches static (and increasingly dynamic) content on geographically distributed edge nodes. Lowers TTFB and LCP, shields origin from DDoS and traffic spikes. Cloudflare, Fastly, Akamai, AWS CloudFront — table stakes for any modern stack.
- Frontend
- The layer the user sees and interacts with in the browser — HTML, CSS, JS, visual assets and runtime behaviour combined. Lives separately from the backend; common frameworks are Vue/Nuxt, React/Next, Svelte/SvelteKit; the first line of defence for performance, accessibility and SEO.
- Backend
- The server-side layer for business logic, database access, authentication, payments and integrations. Publishes the APIs the frontend consumes; Node.js, Python, Go and .NET are the most common stacks; the real owner of scale, security and data consistency.
- Component-based Architecture
- A frontend architecture that breaks the UI into isolated, reusable and individually testable pieces. The core paradigm of Vue/React/Svelte; the physical embodiment of a design system, lowering refactor cost and visual inconsistency.
- State Management
- The discipline of where shared data + UI state lives in a frontend, how it updates and how it propagates to components. Pinia (Vue), Redux/Zustand (React), Svelte stores; in complex products, the foundation of rendering performance and error traceability.
- Code Splitting
- Producing per-route or per-feature JS chunks instead of a single big bundle so each page only loads what it needs. The core optimisation of Vite/Webpack/Rollup; directly improves LCP and TTI, usually paired with lazy imports + dynamic routes.
- Lazy Loading
- A technique that loads content (image, component, route, library) only when needed. Native via <img loading="lazy">, in frameworks via dynamic imports; substantially reduces initial paint time and data usage.
- SPA (Single Page Application)
- An app type that loads the full shell on first hit and handles all subsequent navigations through a client-side router. Feels instant; first paint is heavy, SEO needs additional prerendering, still popular for app-like and hidden-route surfaces.
- PWA (Progressive Web App)
- A web app installable from the browser that can run offline and receive push notifications. Powered by Service Workers + a Web App Manifest; behaves like a native app but skips ASO and store distribution.
- SSG (Static Site Generation)
- Generating every page as HTML at build time and serving it from a CDN. Maximum performance + minimum infrastructure cost; ideal for sites whose content changes rarely (blog, marketing, docs, glossary) — Nuxt generate, Next.js export, Astro.
- Web Component
- The browser-native framework-agnostic component standard: Custom Elements + Shadow DOM + HTML Templates. Authored with Stencil/Lit and consumable inside any framework; turns a design system into portable pieces that cross React/Vue/Svelte boundaries.
- REST API
- An architectural style that communicates over HTTP verbs (GET/POST/PUT/PATCH/DELETE) and resource-based URLs. Stateless, usually carries JSON, documented with OpenAPI; still the default integration surface for ~80% of web and mobile apps.
- GraphQL
- A query language and runtime that lets the client ask, in a single query, only for the fields it needs. An alternative to REST's over/under-fetching; the type system and schema-first design noticeably improve frontend DX.
- Webhook
- A pattern where one system POSTs an HTTP notification to a pre-registered URL whenever an event occurs (payment completed, order created). The opposite of polling — real-time, resource-efficient; signature verification and idempotent handling are mandatory.
- JWT (JSON Web Token)
- A compact, self-contained token standard in Header.Payload.Signature form. Used for stateless authentication between SPA and API; expiration claims, refresh-token rotation and secret management are the critical knobs.
- OAuth 2.0
- A delegation protocol that lets a user grant a third-party app limited access without sharing their password. Authorization Code + PKCE is the modern web standard flow; powers "Sign in with Google" and "Connect Slack app" type scenarios.
- Rate Limiting
- A layer that caps how many requests an API accepts per second or minute to prevent abuse, brute-force attacks and cost spikes. Implemented with token-bucket or sliding-window algorithms; X-RateLimit-* response headers are the de facto standard.
- API Gateway
- A reverse-proxy layer that funnels all external API traffic through a single point. Authentication, rate limiting, routing, request/response transformation and metric collection live in one place; AWS API Gateway, Kong, Apigee and Cloudflare API Gateway are common picks.
- Design Pattern
- A proven recipe for a recurring problem in software architecture (Gang of Four). Singleton, Factory, Observer, Strategy, Decorator and the other 23 classics; a shared vocabulary that speeds up refactor discussions and code review.
- Monorepo
- Storing multiple projects/libraries in a single Git repo. Nx, Turborepo, pnpm workspaces; enables cross-package refactor + atomic commits + shared tooling, but as it grows it demands serious build-system discipline.
- TDD (Test-Driven Development)
- A loop of write a failing test → write the minimum code to pass → refactor (Red-Green-Refactor). Lets tests pressure-shape the design, catches regressions and documents intent — but isn't a fit for every team/project, it demands discipline.
- Refactoring
- Improving the internal structure of code without changing external behaviour — for readability, simplicity, testability. Test coverage is the prerequisite (refactor safety net), small steps + commits is the rhythm, IDE refactor tools (extract method, rename) are standard.
- Semantic Versioning (SemVer)
- A version-numbering scheme in MAJOR.MINOR.PATCH format: MAJOR = breaking change, MINOR = backward-compatible feature, PATCH = bug fix. The shared language of the npm/PyPI/Cargo package ecosystems; the basis for range operators like "^1.2.3".
- Race Condition
- A bug born from two or more threads/processes accessing a shared resource in an unpredictable order. Solved with mutexes, semaphores, atomic operations, immutable state or a single-writer pattern; one of the hardest bug classes to debug.
- Idempotency
- A property where calling the same request N times leaves the system in the same state as calling it once. PUT and DELETE are naturally idempotent; for POST you use an Idempotency-Key header (Stripe, payment webhooks). A non-negotiable prerequisite for distributed retries.
- Memory Leak
- A program failing to release memory it no longer needs — RAM use grows over time and eventually OOM-crashes. In JS, detached DOM refs + closure captures; in Node, leaked event listeners; in DI containers, retained references — the common culprits.
- Garbage Collection (GC)
- A runtime mechanism that automatically detects and frees memory the program can no longer reach. JS V8 = generational + incremental, Java/JVM = ZGC/G1, Go = concurrent mark-sweep; the alternative to manual memory management (C/C++).
- Concurrency vs Parallelism
- Concurrency = dealing with many tasks at once (structure), Parallelism = doing many tasks at once (hardware). Single-core async I/O is concurrent; multi-core thread pool is parallel — frequently conflated, but distinct concepts.
- Immutability
- The principle that a data structure cannot be modified after creation — every "change" produces a new copy. The foundation of functional programming and a natural defence against race conditions in React state, Redux, Vue Pinia and concurrent code; structural sharing keeps performance reasonable.
- Dependency Injection (DI)
- A pattern where a component receives the dependencies it needs from the outside instead of instantiating them itself. Massively improves testability (mock injection), loose coupling and config flexibility; Spring, Angular, NestJS and Vue provide/inject all use it.
- Polyfill
- Code that emulates a modern JS API (fetch, Array.flat, Promise) missing from older browsers. Normally injected at build time via @babel/preset-env or core-js based on target browsers; should NOT be shipped to modern browsers (bundle bloat).
- Regex (Regular Expression)
- A mini-language for defining text patterns to search, match, parse and replace. Syntax of character classes + quantifiers + anchors like /^\d{3}-\d{4}$/; supported by every language (JS, Python, Go) — but should not be used to parse HTML.
- SDK (Software Development Kit)
- A library + documentation bundle published to make integrating with a platform/service (Stripe, AWS, Twilio) easier. Replaces raw HTTP API calls with type-safe methods, built-in retries, auth helpers and test tooling.
- Callback Hell
- The deep pyramid code shape that emerges from heavily nested callback functions (.then().then().then()...). Resolved by Promises + async/await; today survives mostly in legacy jQuery and old Node.js libraries.
- Code Review
- The practice of having other developers read and critique a colleague's code before it merges. Catches bugs, spreads knowledge and enforces consistency; the PR-based GitHub/GitLab workflow is the norm, with a "discussion" tone (not blocking gatekeeping) being the healthy one.
- Pair Programming
- Two developers working at one machine — the driver writes code, the navigator handles strategy + spots mistakes. Improves knowledge transfer, code quality and onboarding speed; remote pairing happens via VS Code Live Share or JetBrains Code With Me.
- Technical Debt
- The "complexity to repay" that accrues from quick fixes and shortcut design decisions. The cost of refactoring grows like interest; managing it requires a debt log, visibility (tech-debt board) and reserving 15-20% of sprint capacity for repayment.
- Long Task
- Any JS work that blocks the browser's main thread for more than 50 ms. The primary enemy of INP and TBT; must be split via debounce, requestIdleCallback, web workers or time-slicing (yielding). Shows up as red bars in the Chrome DevTools Performance panel.
- Speculation Rules API
- A new API in Chrome 109+ that prerenders pages in the background based on "the user is likely to visit this link". A JSON list defines prerender/prefetch targets, so the next page opens instantly. The browser-native version of SPA-style perf tricks.
- View Transitions API
- A Chrome 111+ native browser API that produces SPA-style smooth transitions between pages or state changes. Wrapping a DOM mutation in document.startViewTransition() auto-generates fade/slide animations; can also be combined with SPA frameworks.
- Container Queries
- A CSS feature that styles a component based on the size of its own container instead of @media. A card can render compact at 300 px and wide at 600 px without changing the viewport. Supported in every modern browser since 2023; the missing piece of component-driven design.
- CSS Cascade Layers (@layer)
- A 2022 CSS feature that resolves specificity wars. With @layer reset, base, components, utilities the order between layers is explicit — even an !important in a lower layer loses to a normal style in a higher layer. Built into Tailwind v4 and Bootstrap 5+.
- CSS Houdini
- A family of W3C APIs that lets JavaScript extend the browser's CSS rendering pipeline. Paint API (custom backgrounds), Layout API (custom flex/grid), Properties & Values API. Lets you ship effects that don't exist in native CSS as GPU-accelerated code instead of JS polyfills.
- WebGPU
- The successor to WebGL — a modern graphics and compute API. Gives raw GPU access via Vulkan/Metal/DirectX 12, enabling native-quality games, AI inference and scientific compute in the browser. Shipped to general availability in Chrome 113; powers Stable Diffusion and LLM-inference web demos.
- WebAssembly (WASM)
- Low-level bytecode that runs in the browser at near-native speed, compiled from languages like C/C++/Rust/Go. Powers Figma, Photoshop Web, AutoCAD Web and the Stockfish chess engine; ideal for scenarios that need 5-20× the performance of JavaScript.
- Service Worker
- A JS proxy that sits between the browser and the network and can keep running even after the page is closed. The foundation of offline-first PWA cache strategies, push notifications and background sync. The Workbox library is the most common tooling.
- Workbox
- A Google JavaScript library that simplifies authoring service workers. Provides ready-made cache strategies (cache-first, network-first, stale-while-revalidate), precaching, runtime caching and background-sync APIs. The standard in PWA build pipelines (Workbox-CLI, vite-plugin-pwa).
- Critical CSS
- A technique that inlines the minimum CSS needed to render the above-the-fold area into the HTML <head>. While external render-blocking CSS files load in parallel, FCP/LCP improve by 200-500 ms. Tools like critters, beasties and penthouse automate the workflow.
- Resource Hints (preload / prefetch / preconnect / dns-prefetch)
- <link> tags that tell the browser "this resource will be needed soon". preload: critical current-page asset (font, hero image); prefetch: next navigation; preconnect: opens the TLS handshake early; dns-prefetch: DNS lookup only. Used right, they cut LCP by ~500 ms.
- fetchpriority
- An HTML attribute / fetch() option that assigns "high", "low" or "auto" priority to <img>, <link> or fetch() requests (Chrome 101+). Overrides the browser's default resource-priority decision; setting fetchpriority="high" on the LCP image gives a dramatic speed-up.
- HTTP/3 (QUIC)
- The third generation of HTTP, built on Google's QUIC protocol over UDP instead of TCP. 0-RTT connection (TLS handshake on the first packet), no head-of-line blocking, no connection drop on mobile network changes. Standard on Cloudflare, Akamai and Fastly.
- Brotli (compression)
- An HTTP content-encoding algorithm Google introduced in 2015 that compresses 15-25% better than gzip. 95%+ of modern browsers support it; static assets are pre-compressed at build time with brotli-11, while dynamic HTML uses brotli-4 or 5 at runtime.
- Edge Compute
- A paradigm of running code on edge nodes close to the user instead of at the origin. Cloudflare Workers, Vercel Edge Functions, Netlify Edge and Fastly Compute@Edge cut latency to 20-50 ms; A/B tests, geo-aware redirects and auth header injection happen at the edge.
- Streaming Hydration
- A technique where the server streams HTML chunk-by-chunk and React/Vue starts hydration as each chunk arrives. React 18 Suspense + Server Components, Nuxt 3 and Qwik's resumability all push in this direction. Cuts TTFB and TTI by overlapping them.
- Islands Architecture
- A "default static + interactive islands" architecture popularised by Astro. Most of the page is prerendered with zero JS; only interactive components ("islands") hydrate. JS bundles shrink 70-90%, performance scores climb. Ideal for content-heavy sites.
- Partial Hydration
- A technique that hydrates only visible or interactive components instead of the entire page. Vue 3.5's hydrateOnVisible / hydrateOnIdle / hydrateOnInteraction strategies and React Lazy + Suspense are examples. The fundamental mechanism behind islands architecture.
- Tree Shaking
- A bundler optimisation (Webpack, Rollup, esbuild, Vite) that removes unused code (dead code) from the production bundle by walking the ES-module import/export graph. With side-effect-free packages, bundles shrink 30-70%; mark them with "sideEffects: false" in package.json.
- Web Worker
- A browser API that runs JavaScript on a separate thread outside the main thread. Heavy computation (image processing, encryption, parsing) and large-array sorting happen in the worker without blocking the main thread. The Comlink library turns the message API into RPC.
- Shared Worker
- A single Web Worker shared by multiple tabs / iframes from the same origin. Used for cross-tab state sync (login status, real-time events), a single shared WebSocket connection and a shared cache. Different from a Service Worker — Shared Worker is meant for raw computation.
- Cache Storage API
- A modern asynchronous API inside a Service Worker that stores Request/Response objects as key-value entries. caches.open() opens a cache; .put / .match manipulate it. The foundation of PWA precaching and runtime caching; unlike LocalStorage it preserves HTTP semantics.
- ETag
- A version fingerprint (hash) on an HTTP response. On the next request the browser sends it back via If-None-Match; if nothing changed the server returns 304 Not Modified and skips re-transferring the content. The core mechanism for caching static assets and validating API responses.
- Sustainable Web Manifesto
- A six-principle statement (clean, efficient, open, honest, regenerative, resilient) for reducing a website's environmental impact. Published by Wholegrain Digital and Mightybytes in 2019; the foundational reference for the recognition that the web accounts for 2-3.7% of global emissions.
- Website Carbon Footprint Calculator
- An open service that calculates a website's carbon emissions per page view. Wholegrain Digital's websitecarbon.com is the most popular; the formula is data transfer × the CDN region's carbon intensity × user-device factor. The target is 1 g CO₂ per page load; average sites land at 2-5 g and heavy animation/video sites at 8-15 g.
— DECISION TREE
Is composable commerce right for you?
Answer 4 yes/no questions for a clear outcome.
01 / 04
Is your annual GMV $2M+, or do you have active B2B operations?
The minimum threshold for MACH + composable ROI; smaller stores tend to see faster ROI from OS 2.0.
— LET'S BEGIN
What is limiting your e-commerce frontend speed almost every week?
We scan your current site and produce Web Vitals, cache strategy, SEO risk map and a headless ROI model.