INGEGNERIA COMPOSABLE COMMERCE
Headless Commerce
Hydrogen, Remix, Next.js + architettura composable MACH per massimizzare performance, flessibilità e ownership — il sistema operativo commerce moderno che disaccoppia frontend e backend.
Headless non è più 'separare il frontend'; è l'operazione composable in cui frontend + commerce engine + CMS + search + payment + identity vengono scelti best-in-class secondo i principi MACH (Microservices + API-first + Cloud-native + Headless) e composti sull'edge.
L'e-commerce 2026 vive sotto tre pressioni: i sistemi di temi monolitici hanno raggiunto il limite di velocità + flessibilità, l'edge runtime (Cloudflare Workers, Vercel Edge, Shopify Oxygen) è diventato il principale livello di distribuzione, React Server Components + streaming SSR hanno portato il TTFB dai secondi ai centinaia di millisecondi. La maggior parte dei brand pensa ancora che 'hydrogen = solo Shopify' e non valuta lo stack composable engine + Next.js + Sanity / Contentful + Algolia tipo commercetools / BigCommerce / Saleor. L'operazione headless di Roibase si fonda su sei principi.
METODOLOGIA
Operazione composable commerce su 6 layer
Assess → Architect → Compose → Migrate → Launch → Observe. Ogni layer viene consegnato con deliverable + ADR + SLA.
01
ASSESS
Stack attuale (monolite/temi, app, CDN), baseline di performance, rischio SEO, costo operativo, valutazione della capacità del team.
02
ARCHITECT
Architettura MACH, shortlist vendor (engine/CMS/search/payment/identity), strategia edge, documenti ADR, RFP + POC.
03
COMPOSE
Framework (Hydrogen / Next.js), integrazione del backend composable, GraphQL gateway, event bus (webhook + queue), feature flag.
04
MIGRATE
ETL dei dati (catalog/customer/order/content), mapping 301 + hreflang + sitemap, parità di staging, smoke test feature-complete.
05
LAUNCH
Rollout canary, launch gestito da feature flag, RUM + Sentry, stress test BFCM-ready, on-call nel weekend + war room.
06
OBSERVE
Monitoraggio SLO/SLI, QBR mensile sulle performance, rank monitoring SEO, cost review, aggiornamento ADR, runbook + formazione + handoff.
— CONFRONTO
Tema monolitico vs headless template-only vs composable commerce Roibase
La differenza dei tre approcci su performance, flessibilità, vendor lock-in, SEO + TCO.
| Dimensione | Tema monolitico | Headless template-only | Composable commerce Roibase |
|---|---|---|---|
| Architettura | Monolite unico | Template + backend unico | MACH + composable + edge |
| Flessibilità del vendor | Lock-in di piattaforma | Lock-in dell'engine | Selezione best-of-breed (per ogni layer) |
| Edge runtime | Assente | Parziale | CF Workers / Vercel Edge / Oxygen |
| Performance (LCP) | 2,5-4,5s | 2,0-2,8s | < 1,5s baseline + RUM |
| Content + CMS | CMS di piattaforma (limitato) | CMS unico | Sanity/Contentful/Storyblok best-fit |
| Search | Search nativa | Elasticsearch/Algolia base | Algolia/Typesense/Coveo + AI relevance |
| SEO | Dipendente dal tema | SPA rischiosa | Ingegneria SSR + schema + 301 + hreflang |
| TCO al 24° mese | Basso ma con debito tecnico | Medio + rischio di vendor unico | Medio + ownership + flessibilità + velocità |
PROOF
Outcomes, measured
75p mobile; dopo migrazione headless + edge runtime.
Media a 6 mesi dopo performance + streaming SSR + edge cache.
Al 12° mese dopo SEO preservation + schema + hreflang + Core Web Vitals in zona verde.
CDN globale Cloudflare Workers / Vercel Edge / Shopify Oxygen.
Dopo strategia ISR + partial prerendering + edge cache.
Engine + CMS + search + identity — ognuno iterabile separatamente.
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; deployment su Vercel Edge + ISR + SWR.
Commerce engine composable
commercetools / Saleor / BigCommerce / Shopify Storefront API; scelta dell'engine best-fit + GraphQL + webhook + flusso event-driven.
Integrazione headless CMS
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, regole di merchandising.
Edge caching + ISR + SWR
Cloudflare Workers + KV/R2 / Vercel Edge / Oxygen; stale-while-revalidate, incremental static regeneration, edge middleware.
Ingegneria Core Web Vitals
Budget 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/Google Pay.
Playbook di migrazione
Da Magento / WooCommerce / Shopify legacy / BigCommerce a headless; mapping 301, parità di feature, staging/canary, weekend di go-live.
A/B + feature flags + observability
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry; rollout canary + rollback + metric tree SLO/SLI.
— VANTAGGI
Il cambiamento concreto della tua infrastruttura commerce
Quando edge runtime + composable + performance + SEO preservation + observability sono integrati, il ROI non resta legato a una sola metrica.
La velocità cresce in modo drammatico
Streaming SSR + edge runtime + RSC dimezzano l'LCP; conversione mobile e Core Web Vitals diventano verdi.
Il conversion cresce
Velocità + personalizzazione + UX più flessibile abbassano il drop di funnel e il tasso di carrello abbandonato.
Il rank SEO si conserva e cresce
Grazie all'ingegneria SSR + schema.org + 301 + hreflang + sitemap il calo di migrazione dura 2-3 settimane, poi il rank cresce.
Si apre la flessibilità del vendor
Engine / CMS / search / identity sostituibili in ogni layer; vendor lock-in + pressione annuale sui prezzi diminuiscono.
La velocità di prodotto aumenta
Con feature flag + canary + ISR le nuove feature possono andare live ogni ora invece che ogni giorno; la velocità di sperimentazione cresce.
Il costo operativo cala
Le app appiccicate sopra il monolite vengono sostituite da servizi composable; con l'edge cache il carico sull'origin diminuisce e il costo infra si ottimizza.
DELIVERABLE
Cosa ottieni in ogni engagement headless
Lista fissa di deliverable nel pacchetto setup + 6 mesi di operations; nessuna sorpresa di costi extra.
Report di feasibility headless + ROI
Audit dello stack attuale, modello TCO, baseline di performance, rischio SEO, valutazione capacità team; 50-80 pagine.
Architettura MACH + documenti ADR
Decisioni vendor su engine + CMS + search + payment + identity + edge + CI/CD, ognuna in un ADR motivato.
Selezione del framework + POC
Matrice di scelta Hydrogen / Next.js / Remix / Nuxt + POC di 2-3 settimane + report di benchmark performance.
Setup del backend composable
Integrazione commercetools / Saleor / BC / Shopify Storefront API + GraphQL gateway + webhook + event bus.
Schema headless CMS
Content model Sanity / Contentful / Storyblok, preview mode, editorial workflow + live preview.
Search + merchandising
Setup Algolia / Typesense / Coveo + schema dell'index + AI relevance tuning + regole di merchandising.
Edge runtime + strategia di cache
Deploy Cloudflare Workers / Vercel Edge / Oxygen + KV/R2 + ISR + SWR + edge middleware.
Identity + payment + subscription
Integrazione Auth0 / Clerk / Supabase Auth + Stripe / Adyen + flusso compatibile passkey + SCA + 3DS2.
Pacchetto SEO preservation
Mapping 301, canonical, schema.org, hreflang, sitemap, robots, ITA (International Targeting); dashboard di rank monitoring.
Infrastruttura feature flag + A/B
GrowthBook / Statsig / LaunchDarkly + canary + kill switch + experiment metric tree.
Observability + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty; runbook di incident.
Runbook + formazione + 3 mesi di supporto
Runbook di architecture + deploy + rollback + monitoring, sessioni di formazione del team, 90 giorni di supporto + on-call.
— PERIMETRO
Cosa facciamo, cosa non facciamo
Lo scope del composable commerce è scritto; previene sorprese e fatture aggiuntive.
Lo facciamo
- Architettura 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 Algolia / Typesense / Coveo
- Edge runtime (Cloudflare Workers / Vercel Edge / Oxygen)
- SEO preservation (301 / schema / hreflang / sitemap)
- Feature flag + canary + rollback + observability
- Integrazione identity + payment + subscription
- Ingegneria Core Web Vitals + RUM
- Runbook + formazione + 90 giorni di supporto + on-call
Non lo facciamo
- Sviluppo di temi monolitici Magento / WooCommerce (solo migrazione)
- Sviluppo core ERP / OMS / WMS (li integriamo)
- Gestione del budget pubblicitario (Acquisition è un engagement separato)
- Logistica fisica / magazzino / customs
- Processing carte di credito / ownership dello scope PCI (resta sul payment vendor)
- Processi regolatori banking / KYC / AML (con partner specializzati)
- Outsourcing del customer service (impostiamo gli strumenti, l'operatività resta al cliente)
- Fake review / traffico bot / manipolazione artificiale della velocità
HOW WE WORK
Setup + migrazione di 12-16 settimane, poi operations mensili
Settimana 1-2: assess + feasibility
Audit dello stack, baseline di performance, rischio SEO, modello TCO, capacità team + bozza ADR.
Settimana 3-4: architect + RFP/POC vendor
Architettura MACH, shortlist engine/CMS/search/payment/identity + RFP + POC di 2-3 settimane.
Settimana 5-6: compose + setup framework
Setup Hydrogen / Next.js, integrazione Storefront API / commerce engine, GraphQL gateway, deploy edge runtime.
Settimana 7: CMS + search + merchandising
Content model Sanity / Contentful, index Algolia / Typesense + relevance tuning, regole di merchandising.
Settimana 8: identity + payment + subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + passkey + accelerated checkout.
Settimana 9-10: ETL dati + mapping 301
ETL di catalog / customer / order / content, mapping URL, piano 301, hreflang + sitemap + schema.
Settimana 11-12: staging + canary + stress BFCM
Parità staging, smoke test, rollout canary, launch con feature flag, stress test BFCM + piano di war room.
Settimana 13+: go-live + observe + QBR + supporto
Playbook del weekend di go-live, RUM + Sentry + SLO/SLI, QBR mensile, runbook + formazione + 3 mesi di supporto.
— TOOLKIT
Strumenti che usiamo — vendor-agnostic ma scelta convinta
Scegliamo per ogni cliente quello adatto; manteniamo l'indipendenza non incassando commissioni.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONALIZATION
EDGE & OBSERVABILITY
QUESTIONS
Frequently asked
— GLOSSARIO
Concetti chiave del composable commerce
Linguaggio comune per i team di engineering, prodotto, operations e marketing.
- MACH
- Acronimo dei principi Microservices + API-first + Cloud-native + Headless; framework dell'architettura composable commerce, definito dalla MACH Alliance.
- Composable Commerce
- Architettura commerce composta scegliendo un vendor best-of-breed per ogni funzione invece di una piattaforma monolitica unica; engine + CMS + search + payment + identity sono servizi separati.
- Headless
- Disaccoppiamento via API tra frontend (presentation) e backend (commerce engine / CMS); permette al frontend di girare su qualunque framework + runtime.
- React Server Components (RSC)
- Modello di componenti renderizzati sul server, introdotto con React 18+, che non invia JS al client; Next.js App Router + Shopify Hydrogen lo usano nativamente, riducendo il costo di bundle + hydration.
- Streaming SSR
- Modello di render in cui l'HTML della pagina non viene inviato in un colpo solo, ma in flusso a partire dai pezzi pronti; TTFB e LCP scendono.
- Edge Runtime
- Runtime in cui il codice viene eseguito sul CDN node geograficamente più vicino all'utente; Cloudflare Workers, Vercel Edge, Shopify Oxygen sono esempi principali. Latency minima, coerenza globale.
- ISR (Incremental Static Regeneration)
- Rigenerazione in background, a intervalli o su trigger, di pagine costruite staticamente; unisce velocità statica e dati freschi.
- Stale-While-Revalidate (SWR)
- Strategia di cache HTTP; mostra all'utente contenuto stale in modo immediato mentre in background fetcha la versione fresca. Equilibrio tra velocità e freschezza.
- Storefront API
- GraphQL API pubblica di Shopify; permette a frontend headless / custom / app mobili di accedere ai dati di prodotto + collezione + carrello + checkout.
- commercetools
- Composable commerce engine; API-first + compatibile MACH, uno degli engine più usati negli scenari enterprise B2B + B2C. Ecosistema commercetools Frontend + Studio disponibile.
- ADR (Architecture Decision Record)
- Formato di documentazione che mette per iscritto contesto, opzioni, risultato e tradeoff di una decisione di architettura software; standard per le scelte vendor in uno stack composable.
- Feature Flag
- Switch di funzionalità accendibile/spegnibile a runtime, indipendente dal deploy del codice; usato in scenari di canary release, A/B test, kill switch; GrowthBook/Statsig/LaunchDarkly sono i tool principali.
- SSR (Server-Side Rendering)
- Renderizzare l'HTML sul server e inviarlo pronto al browser. Batte il CSR in SEO e LCP; modalità di default di framework come Nuxt 3, Next.js, Remix. A scala richiede edge caching e una strategia di hydration ragionata.
- CSR (Client-Side Rendering)
- Inviare un guscio HTML quasi vuoto + bundle JS e renderizzare nel browser. Modalità tipica delle SPA; first paint lento, SEO richiede prerendering aggiuntivo per route. LCP crolla con rete povera o device modesti.
- Edge Functions
- Layer di compute leggero che gira nel CDN stesso (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Fa geo-routing, bucketing A/B, manipolazione header e auth in millisecondi senza tornare all'origin; cold start quasi nullo.
- CDN (Content Delivery Network)
- Rete che mette in cache contenuti statici (e sempre più dinamici) su nodi edge distribuiti geograficamente. Abbassa TTFB e LCP, protegge l'origin da DDoS e picchi di traffico. Cloudflare, Fastly, Akamai, AWS CloudFront — table stakes di ogni stack moderno.
- Frontend
- Il layer che l'utente vede e con cui interagisce nel browser — HTML, CSS, JS, asset visivi e comportamento runtime. Vive separato dal backend; framework comuni: Vue/Nuxt, React/Next, Svelte/SvelteKit; prima linea per performance, accessibilità e SEO.
- Backend
- Il layer server-side per business logic, accesso al database, autenticazione, pagamenti e integrazioni. Pubblica le API che il frontend consuma; gli stack più comuni sono Node.js, Python, Go e .NET; vero proprietario di scala, sicurezza e coerenza dei dati.
- Component-based Architecture
- Architettura frontend che spezza l'UI in pezzi isolati, riutilizzabili e testabili singolarmente. Paradigma centrale di Vue/React/Svelte; incarnazione fisica del design system, abbassa il costo di refactor e l'incoerenza visiva.
- State Management
- Disciplina di dove vive lo state condiviso e l'UI state nel frontend, come si aggiorna e come si propaga ai component. Pinia (Vue), Redux/Zustand (React), Svelte store; nei prodotti complessi, base di rendering performance e tracciabilità degli errori.
- Code Splitting
- Produrre chunk JS per route o feature invece di un unico grande bundle, così che ogni pagina carichi solo ciò che serve. Ottimizzazione centrale di Vite/Webpack/Rollup; impatta direttamente LCP e TTI, va di pari passo con lazy import + dynamic route.
- Lazy Loading
- Tecnica che carica contenuti (immagine, component, route, libreria) solo quando servono. Nativo via <img loading="lazy">, nei framework via dynamic import; riduce parecchio first paint e consumo dati.
- SPA (Single Page Application)
- Tipo di app che carica l'intera shell al primo hit e gestisce tutte le navigazioni successive con un router client-side. Sensazione di istantaneo; first paint pesante, il SEO richiede prerendering extra, ancora popolare per superfici app-like.
- PWA (Progressive Web App)
- Web app installabile dal browser che funziona offline e riceve push notification. Si appoggia su Service Worker + Web App Manifest; si comporta come una native app senza ASO né distribuzione store.
- SSG (Static Site Generation)
- Generare ogni pagina come HTML in build time e servirla da un CDN. Massima performance + minima infrastruttura; ideale per contenuti che cambiano di rado (blog, marketing, docs, glossario) — Nuxt generate, Next.js export, Astro.
- Web Component
- Standard di component nativo del browser, framework-agnostic: Custom Elements + Shadow DOM + HTML Templates. Scritto con Stencil/Lit e consumabile in qualunque framework; trasforma il design system in pezzi portabili che attraversano React/Vue/Svelte.
- REST API
- Stile architetturale che comunica via verbi HTTP (GET/POST/PUT/PATCH/DELETE) e URL resource-based. Stateless, di solito porta JSON, documentato con OpenAPI; rimane la superficie di integrazione di default per ~80% delle app web e mobile.
- GraphQL
- Query language e runtime che consente al client di chiedere, in una singola query, solo i campi che servono. Alternativa al over/under-fetching di REST; il type system e lo schema-first migliorano nettamente la DX del frontend.
- Webhook
- Pattern in cui un sistema fa un HTTP POST verso una URL pre-registrata quando accade un event (pagamento completato, ordine creato). L'opposto del polling — real-time, efficiente in risorse; verifica della firma e handling idempotente sono obbligatori.
- JWT (JSON Web Token)
- Standard di token compatto e auto-validante in formato Header.Payload.Signature. Usato per autenticazione stateless tra SPA e API; claim di scadenza, rotazione dei refresh token e gestione dei secret sono le leve critiche.
- OAuth 2.0
- Protocollo di delega che permette a un utente di concedere accesso limitato a un'app di terze parti senza condividere la password. Il flow Authorization Code + PKCE è lo standard web moderno; alimenta "Accedi con Google" e "Connetti app Slack".
- Rate Limiting
- Layer che limita quante request un'API accetta al secondo o al minuto, per evitare abusi, brute-force e picchi di costo. Si implementa con token-bucket o sliding-window; gli header X-RateLimit-* in risposta sono lo standard di fatto.
- API Gateway
- Layer reverse-proxy che incanala tutto il traffico API esterno attraverso un unico punto. Authentication, rate limiting, routing, trasformazione request/response e raccolta metriche in un solo posto; AWS API Gateway, Kong, Apigee, Cloudflare API Gateway le scelte comuni.
- Design Pattern
- Ricetta provata per un problema ricorrente in architettura software (Gang of Four). Singleton, Factory, Observer, Strategy, Decorator e gli altri 23 classici; vocabolario condiviso che velocizza refactor e code review.
- Monorepo
- Mantenere più progetti/librerie in un unico repo Git. Nx, Turborepo, pnpm workspaces; abilita refactor cross-package + commit atomici + tooling condiviso, ma crescendo richiede una seria disciplina di build system.
- TDD (Test-Driven Development)
- Ciclo: scrivi un test che fallisce → codice minimo per farlo passare → refactor (Red-Green-Refactor). Lascia che i test plasmino il design, intercetta regressioni, documenta l'intento — non si adatta a ogni team/progetto, richiede disciplina.
- Refactoring
- Migliorare la struttura interna del codice senza cambiarne il comportamento esterno — per leggibilità, semplicità, testabilità. La test coverage è prerequisito (rete di sicurezza), piccoli passi + commit è il ritmo, i refactor tool dell'IDE (extract method, rename) sono standard.
- Semantic Versioning (SemVer)
- Schema di numerazione MAJOR.MINOR.PATCH: MAJOR = breaking change, MINOR = feature backward-compatible, PATCH = bug fix. Linguaggio comune degli ecosistemi npm/PyPI/Cargo; base degli operatori di range tipo "^1.2.3".
- Race Condition
- Bug nato quando due o più thread/processi accedono a una risorsa condivisa in ordine imprevedibile. Si risolve con mutex, semafori, operazioni atomiche, immutable state o single-writer pattern; una delle classi di bug più difficili da debuggare.
- Idempotency
- Proprietà per cui chiamare la stessa request N volte lascia il sistema nello stesso stato di chiamarla una volta. PUT, DELETE sono naturalmente idempotenti; per POST si usa un header Idempotency-Key (Stripe, webhook di pagamento). Prerequisito non negoziabile per retry distribuiti.
- Memory Leak
- Programma che non rilascia memoria che non gli serve più — l'uso di RAM cresce nel tempo e finisce in crash OOM. In JS ref DOM staccati + capture di closure, in Node event listener fuoriusciti, nei container DI ref trattenute — i colpevoli abituali.
- Garbage Collection (GC)
- Meccanismo runtime che individua e libera in automatico la memoria che il programma non può più raggiungere. JS V8 = generazionale + incrementale, Java/JVM = ZGC/G1, Go = mark-sweep concorrente; alternativa al memory management manuale (C/C++).
- Concurrency vs Parallelism
- Concurrency = gestire molte task contemporaneamente (struttura), Parallelism = eseguire molte task contemporaneamente (hardware). I/O async single-core è concurrent; thread pool multi-core è parallel — spesso confusi, ma concetti distinti.
- Immutability
- Principio per cui una struttura dati non si modifica dopo la creazione — ogni "cambiamento" produce una nuova copia. Fondazione della programmazione funzionale e difesa naturale contro race condition in React state, Redux, Vue Pinia e codice concorrente; lo structural sharing tiene la performance ragionevole.
- Dependency Injection (DI)
- Pattern in cui un component riceve le dipendenze che gli servono dall'esterno invece di istanziarle da solo. Aumenta tantissimo la testabilità (mock injection), il loose coupling e la flessibilità di config; lo usano Spring, Angular, NestJS, Vue provide/inject.
- Polyfill
- Codice che emula un'API JS moderna (fetch, Array.flat, Promise) assente nei browser vecchi. Di solito iniettato in build tramite @babel/preset-env o core-js in base ai target browser; NON va spedito ai browser moderni (bundle bloat).
- Regex (Regular Expression)
- Mini-linguaggio per definire pattern di testo e fare ricerca, match, parse, sostituzione. Sintassi a classi di caratteri + quantificatori + ancore tipo /^\d{3}-\d{4}$/; supportato da ogni linguaggio (JS, Python, Go) — non da usare per parsare HTML.
- SDK (Software Development Kit)
- Pacchetto libreria + docs pubblicato per facilitare l'integrazione con una piattaforma/servizio (Stripe, AWS, Twilio). Sostituisce chiamate HTTP API grezze con metodi type-safe, retry integrati, helper di auth e test tooling.
- Callback Hell
- La forma piramidale profonda del codice nata da callback molto annidati (.then().then().then()...). Risolto da Promise + async/await; sopravvive oggi soprattutto in legacy jQuery e vecchie librerie Node.js.
- Code Review
- Pratica per cui altri developer leggono e criticano il codice di un collega prima del merge. Cattura bug, diffonde conoscenza e impone coerenza; il workflow PR GitHub/GitLab è lo standard, tono "discussione" (non gatekeeping bloccante) = sano.
- Pair Programming
- Due developer su una macchina — il driver scrive codice, il navigator pensa strategia e cattura errori. Migliora trasferimento di conoscenza, qualità del codice e velocità di onboarding; in remoto via VS Code Live Share o JetBrains Code With Me.
- Technical Debt
- La "complessità da ripagare" che si accumula da quick fix e scelte di design scorciatoia. Il costo di refactor cresce come interesse; gestirlo richiede un debt log, visibilità (tech-debt board) e riservare il 15-20 % della capacity di sprint per ripagarlo.
- Long Task
- Qualsiasi lavoro JS che blocca il main thread del browser per più di 50 ms. Nemico principale di INP e TBT; va spezzato con debounce, requestIdleCallback, web worker o time-slicing (yielding). Appare come barre rosse nel pannello Performance di Chrome DevTools.
- Speculation Rules API
- Nuova API in Chrome 109+ che pre-renderizza pagine in background sull'ipotesi "l'utente visiterà probabilmente questo link". Una lista JSON definisce i target prerender/prefetch e la pagina successiva si apre istantaneamente. Versione browser-native dei trick perf da SPA.
- View Transitions API
- API browser nativa di Chrome 111+ che produce transizioni morbide stile SPA tra pagine o cambi di stato. Avvolgendo una mutazione DOM in document.startViewTransition() si auto-generano animazioni fade/slide; combinabile con framework SPA.
- Container Queries
- Feature CSS che applica gli stili a un componente in base alla dimensione del proprio container invece di @media. Una card può apparire compatta a 300 px e larga a 600 px senza cambiare viewport. Supportata in tutti i browser moderni dal 2023; tassello mancante del component-driven design.
- CSS Cascade Layers (@layer)
- Feature CSS del 2022 che risolve le guerre di specificity. Con @layer reset, base, components, utilities l'ordine fra layer è esplicito — anche un !important in un layer inferiore perde contro uno stile normale in un layer superiore. Built-in in Tailwind v4 e Bootstrap 5+.
- CSS Houdini
- Famiglia di API W3C che permette a JavaScript di estendere la pipeline di rendering CSS del browser. Paint API (background custom), Layout API (flex/grid custom), Properties & Values API. Consente di consegnare effetti non presenti in CSS nativo come codice GPU-accelerato invece di polyfill JS.
- WebGPU
- Successore di WebGL — API moderna per grafica e compute. Accesso grezzo alla GPU via Vulkan/Metal/DirectX 12, abilitando giochi in qualità nativa, inferenza AI e compute scientifico nel browser. Disponibilità generale da Chrome 113; alimenta demo web di Stable Diffusion e LLM inference.
- WebAssembly (WASM)
- Bytecode di basso livello che gira nel browser a velocità vicina alla nativa, compilato da linguaggi come C/C++/Rust/Go. Alimenta Figma, Photoshop Web, AutoCAD Web e il motore di scacchi Stockfish; ideale per scenari che richiedono 5-20× le performance di JavaScript.
- Service Worker
- Proxy JS che si frappone fra browser e rete e può continuare a girare anche dopo la chiusura della pagina. Base delle strategie cache offline-first delle PWA, delle push notification e del background sync. La libreria Workbox è il tool più usato.
- Workbox
- Libreria JavaScript di Google che semplifica la scrittura dei service worker. Fornisce strategie cache pronte (cache-first, network-first, stale-while-revalidate), precaching, runtime caching e API di background sync. Standard nelle pipeline di build PWA (Workbox-CLI, vite-plugin-pwa).
- Critical CSS
- Tecnica che inserisce inline nell'<head> HTML il CSS minimo per renderizzare l'area above-the-fold. Mentre i CSS esterni render-blocking caricano in parallelo, FCP/LCP migliorano di 200-500 ms. Tool come critters, beasties e penthouse automatizzano il workflow.
- Resource Hints (preload / prefetch / preconnect / dns-prefetch)
- Tag <link> che dicono al browser "questa risorsa servirà a breve". preload: asset critico della pagina corrente (font, hero); prefetch: prossima navigazione; preconnect: apre TLS handshake in anticipo; dns-prefetch: solo DNS lookup. Usati bene, riducono l'LCP di ~500 ms.
- fetchpriority
- Attributo HTML / opzione fetch() che assegna priorità "high"/"low"/"auto" a <img>, <link> o fetch() (Chrome 101+). Sovrascrive la decisione di priorità di default del browser; mettere fetchpriority="high" sull'immagine LCP dà un'accelerazione netta.
- HTTP/3 (QUIC)
- Terza generazione di HTTP, basata sul protocollo QUIC di Google su UDP invece di TCP. Connessione 0-RTT (handshake TLS al primo pacchetto), niente head-of-line blocking, nessun drop al cambio di rete mobile. Standard su Cloudflare, Akamai, Fastly.
- Brotli (compression)
- Algoritmo di content-encoding HTTP introdotto da Google nel 2015 che comprime il 15-25 % meglio di gzip. Oltre il 95 % dei browser moderni lo supporta; asset statici pre-compressi a build-time con brotli-11, HTML dinamico a runtime con brotli-4/5.
- Edge Compute
- Paradigma di esecuzione del codice su nodi edge vicini all'utente invece che all'origin. Cloudflare Workers, Vercel Edge Functions, Netlify Edge e Fastly Compute@Edge riducono la latenza a 20-50 ms; A/B test, redirect geo-aware e injection di header auth avvengono all'edge.
- Streaming Hydration
- Tecnica in cui il server fa stream dell'HTML a chunk e React/Vue avvia l'hydration man mano che ogni chunk arriva. React 18 Suspense + Server Components, Nuxt 3 e la resumability di Qwik vanno in questa direzione. Riduce TTFB e TTI sovrapponendoli.
- Islands Architecture
- Architettura "statico di default + island interattive" resa popolare da Astro. La maggior parte della pagina è pre-renderizzata con zero JS; solo i componenti interattivi ("isole") fanno hydration. I bundle JS scendono del 70-90 %, i punteggi di performance salgono. Ideale per siti content-heavy.
- Partial Hydration
- Tecnica che fa hydration solo dei componenti visibili o interattivi invece dell'intera pagina. Esempi: strategie hydrateOnVisible / hydrateOnIdle / hydrateOnInteraction di Vue 3.5 e React Lazy + Suspense. Meccanismo fondamentale dietro l'islands architecture.
- Tree Shaking
- Ottimizzazione dei bundler (Webpack, Rollup, esbuild, Vite) che rimuove dal bundle di produzione il codice non usato (dead code) percorrendo il grafo import/export degli ES module. Su pacchetti side-effect-free i bundle calano del 30-70 %; segnala con "sideEffects: false" in package.json.
- Web Worker
- API del browser che esegue JavaScript su un thread separato dal main thread. Calcoli pesanti (image processing, encryption, parsing) e sort di array grandi avvengono nel worker senza bloccare il main thread. La libreria Comlink trasforma l'API di messaggi in RPC.
- Shared Worker
- Un singolo Web Worker condiviso da più tab / iframe della stessa origin. Usato per sync di stato tra tab (login, eventi real-time), un'unica connessione WebSocket condivisa e una cache condivisa. Diverso dal Service Worker: pensato per il puro compute.
- Cache Storage API
- API asincrona moderna dentro il Service Worker che memorizza oggetti Request/Response come coppie chiave-valore. caches.open() apre una cache; .put / .match la manipolano. Base del precaching PWA e del runtime caching; a differenza di LocalStorage preserva la semantica HTTP.
- ETag
- Impronta di versione (hash) di una response HTTP. Alla request successiva il browser la rimanda via If-None-Match; se nulla è cambiato il server risponde 304 Not Modified e non ritrasferisce il contenuto. Meccanismo centrale per il caching di asset statici e la validazione delle risposte API.
- Sustainable Web Manifesto
- Dichiarazione in sei principi (clean, efficient, open, honest, regenerative, resilient) per ridurre l'impatto ambientale di un sito web. Pubblicata nel 2019 da Wholegrain Digital e Mightybytes; riferimento fondante, il web pesa per il 2-3,7 % delle emissioni globali.
- Website Carbon Footprint Calculator
- Servizio aperto che calcola le emissioni di carbonio di un sito web per page view. Il più diffuso è websitecarbon.com di Wholegrain Digital; formula: data transfer × carbon intensity della regione CDN × fattore device utente. Target 1 g CO₂/page load; siti medi 2-5 g, siti pesanti con animazione/video 8-15 g.
— ALBERO DECISIONALE
L'operazione composable commerce è adatta a te?
Rispondi Sì/No a 4 domande; il risultato sarà chiaro.
01 / 04
Hai un GMV annuo di $2M+ o un'operazione B2B attiva?
Soglia minima per il ROI dell'investimento MACH + composable; per shop più piccoli OS 2.0 dà ROI più rapido.
— LET'S BEGIN
Cosa limita ogni settimana la velocità del frontend del tuo e-commerce?
Scansioniamo il tuo sito attuale e produciamo Web Vitals, strategia di cache, mappa di rischio SEO e modello ROI headless.