Arquitetura e velocidade

Renderização no servidor e geração estática entregam a página montada; a hidratação por ilhas serve HTML completo e liga JavaScript só nos trechos que reagem ao clique, como seletor de variação e mini-carrinho; renderização no cliente entrega uma casca vazia que só vira loja depois do bundle baixar e executar. Para o comprador com conexão boa, os quatro caminhos parecem equivalentes. Para o crawler que não executa JavaScript, o quarto é uma página em branco.

O teste que resolve a discussão custa um minuto: baixe a página de produto sem executar script e procure preço, disponibilidade, prazo de entrega e política de devolução no texto retornado. Se algum desses quatro não estiver lá, o problema não é de framework, é de onde a montagem acontece. Área logada, carrinho e painel de conta podem ficar no cliente sem prejuízo, porque não há motivo para rastreá-los.

MACH é uma associação de fornecedores, não um selo de auditoria independente, e o rótulo composable descreve um jeito de montar, com o resultado ainda por medir no campo de quem montou. Quem contrata pelo vocabulário costuma comprar a promessa de velocidade e receber um segundo projeto de manutenção. O dado de campo do Web Almanac 2025 desmonta a promessa central: a plataforma com tema servido lidera o índice de Core Web Vitals, com 76% dos origins móveis aprovados nos três.

O custo é o segundo ponto cego. Compilações de mercado da Elogic e da Williams Commerce, de 2026, colocam um replatform de porte médio na faixa de US$ 150 mil a 300 mil, em 5 a 10 meses, com a licença representando de 20% a 40% do total, e programas composable de US$ 500 mil a mais de US$ 2 milhões. São números de agregador internacional em dólar, úteis como ordem de grandeza e inúteis como orçamento brasileiro. O que eles mostram com clareza é a proporção: licença é a menor parte da conta.

A escolha de sistema de gestão, de integração e de fonte de verdade do estoque não se decide aqui. Ela pertence ao eixo backend, e a troca de vitrine feita sem essa camada resolvida costuma reproduzir os mesmos defeitos com tela nova.

Todos os frameworks atuais sabem servir HTML montado, então a diferença deixou de ser técnica e virou operacional. Astro e temas servidos favorecem loja com pouca interatividade e time pequeno, porque o padrão é entregar página pronta e ligar JavaScript por exceção. Next.js e SvelteKit rendem mais quando existe experiência própria a construir e gente para mantê-la. Hydrogen só faz sentido dentro do ecossistema para o qual foi desenhado.

O teste de escolha é o mesmo em qualquer caso: quem vai atualizar a dependência daqui a dezoito meses, e o que acontece com a loja se essa pessoa sair. Time de um desenvolvedor com framework de time de dez produz uma loja que ninguém consegue mexer no Black Friday. O número de campo reforça a leitura conservadora: no Web Almanac 2025, o LCP móvel é bom em 86% dos origins do Shopify e em 39% dos do WooCommerce, e a diferença está no rigor do tema.

Ficar na plataforma tem uma vantagem que raramente entra na planilha: ela atualiza o motor de comércio, o meio de pagamento e a integração fiscal sem consumir o seu time. O que sobra para você é o tema, e é no tema que a velocidade se ganha ou se perde. Imagem sem dimensionar, fonte carregada de terceiro, carrossel na primeira dobra e script de marketing colado no cabeçalho derrubam qualquer plataforma, inclusive as que lideram o índice de campo.

Quando a plataforma trava algo de verdade, a evidência tem forma conhecida: um pedido de recurso recusado por escrito, com data. Enquanto a justificativa para sair for opinião de agência, o retorno maior está em arrumar o tema. E a decisão sobre sistema de gestão, integração e fonte de verdade do estoque continua sendo do eixo backend, com a plataforma de vitrine entrando como consumidora daquele dado, nunca como dona dele.

Duas audiências leem a mesma loja com requisitos diferentes. O comprador tolera que o preço apareça meio segundo depois; o agente que não executa script não vê o preço. Como 34,82% das requisições do ChatGPT e 34,16% das do Claude terminaram em URL inexistente no levantamento da Vercel, a segunda metade do trabalho não é marcação: é roteamento. URL de produto que muda a cada migração desperdiça o rastreio que você conquistou.

O trabalho de garantir que o atributo exista e esteja correto pertence ao eixo backend, que é dono da verdade do dado. Ao frontend cabe expor esse dado em HTML servido, com marcação de produto e de política, e manter a rota estável. A camada durável nesta história é o dado de produto e de política, que sobrevive a cada troca de integração de checkout.

Campo vence laboratório porque mede o aparelho e a rede que o seu cliente tem, na condição real em que ele tenta comprar. Uma nota 95 no Lighthouse convive sem contradição com um LCP de campo de 4,5 s na página de produto, em 4G, no Android mediano brasileiro. O primeiro número descreve uma simulação; o segundo descreve pessoas tentando comprar.

A leitura correta separa as três métricas por natureza do problema. LCP é entrega: servidor, imagem e prioridade de carga. INP é resposta ao toque: JavaScript disputando a linha principal. CLS é estabilidade visual: dimensão declarada e espaço reservado. Confundir as três produz o time que minifica script para tentar consertar uma imagem grande demais.

As quatro subpartes são tempo até o primeiro byte, atraso para iniciar a carga do recurso, tempo de carga do recurso e atraso de renderização. Cada uma tem um culpado diferente: servidor lento, imagem descoberta tarde porque só existe dentro de um carrossel em JavaScript, arquivo pesado sem formato moderno, e bloqueio por fonte ou por folha de estilo. Medir as quatro antes de agir evita meses de trabalho na parte que não pesava.

No e-commerce, os erros que mais aparecem são conhecidos: imagem servida em dimensão maior que a exibida, foto principal dentro de carrossel que só monta depois do script, e vídeo de produto competindo com a imagem pela banda no primeiro segundo. O LCP móvel bom em 86% dos origins do Shopify e em 39% dos do WooCommerce mede exatamente o rigor com que o tema trata esses três pontos.

Gerenciador de tags, pixel de mídia, mapa de calor, chat e teste A/B entram na página por decisão de marketing, com prazo de campanha, e saem por decisão de ninguém. Cada um disputa a linha principal do navegador no momento em que o cliente toca no seletor de tamanho. O sintoma aparece como lentidão difusa, sem responsável, semanas depois da instalação.

A boa notícia do dado de campo é que o INP não é o gargalo médio da web: 77% dos origins móveis já passam nessa métrica, contra 62% em LCP. A má notícia é que e-commerce é justamente onde o acúmulo de terceiros é maior. O controle prático é de governança: inventário de scripts com dono e data de validade, revisão a cada campanha e remoção do que não tem quem defenda.

A conversão de milissegundo em receita começa pelo coeficiente do Deloitte com Google e Fifty-Five: 0,1 s associado a 8,4% mais conversão em varejo, em 37 marcas e mais de 30 milhões de sessões monitoradas hora a hora por 30 dias no fim de 2019. Duas ressalvas viajam junto com o número. É associação, não causalidade demonstrada, e a amostra é de marcas grandes. Usar o valor cheio como projeção de uma loja de porte médio infla a expectativa; usar metade dele dá uma estimativa defensável em reunião.

A trava técnica é o que faz o ganho durar. Tamanho máximo de imagem na página de produto, número máximo de scripts de terceiro, limite de bytes de JavaScript por rota e alerta quando o LCP de campo do p75 sobe entre duas semanas transformam performance em regressão vigiada. Sem essa trava, o trabalho vira projeto de trimestre que se desfaz sozinho.

O primeiro é o 1 segundo custa 7% de conversão. A origem é a Aberdeen Group, em 2008, com autorrelato de empresas de varejo online. O enunciado que a fonte sustenta: um estudo da Aberdeen Group de 2008 associou 1 s de atraso a 7% menos conversões, 11% menos páginas vistas e 16% menos satisfação. Trocar associou por custa acrescenta uma causalidade que ninguém mediu, e usar uma medição de 2008 como régua de 2026 ignora dezoito anos de mudança de rede e de aparelho.

O segundo é o 53% dos usuários móveis abandonam acima de 3 segundos, da Akamai, no relatório State of Online Retail Performance da primavera de 2017, com dados de 2016. Continua citável desde que a data apareça. O terceiro é a Amazon perde 1% de vendas a cada 100 ms, relato de Greg Linden em apresentação de 2006 sobre testes internos nunca publicados com método: anedota histórica, jamais referência de mercado. O quarto, de que a velocidade responderia por 35% da receita da Amazon, não tem estudo público que o sustente e não deve ser repetido.

A frase honesta para levar à reunião existe e é mais curta que qualquer uma delas. O único estudo público recente com método é o da Deloitte com Google e Fifty-Five: 37 marcas, mais de 30 milhões de sessões, fim de 2019, com 0,1 s valendo cerca de 8,4% de conversão em varejo. Some a isso o LCP de campo da sua própria página de produto, medido no CrUX, e o argumento passa a se apoiar em dado seu, que ninguém contesta com um estudo de 2008.

A v2025.10 define arquivo JSON com media type application/design-tokens+json e extensões .tokens ou .tokens.json, o que permite a mesma fonte alimentar Figma, código do storefront, e-mail transacional e material de mídia paga. O ganho concreto para a loja aparece na hora de mudar a cor de destaque de uma campanha: uma alteração, propagada, sem caça a valor hexadecimal solto em vinte arquivos.

A camada mínima para e-commerce é pequena e específica: escala de cor de marca com estados derivados por color-mix ou OKLCH mantendo contraste AA, escala tipográfica, espaçamento, raio, sombra e, principalmente, os tokens semânticos de preço, de preço promocional, de indisponível e de selo de frete. São esses quatro últimos que mantêm a mesma promessa visual entre listagem, página de produto e carrinho.

O cartão de produto é o componente mais reutilizado do site e aparece em grade, carrossel, listagem de categoria, resultado de busca e vitrine de recomendação. Resolvido uma vez com container queries, ele se adapta ao espaço disponível sem uma variação de código por contexto. O seletor de variação é o que mais erra: cor e tamanho indisponíveis precisam ser percebidos antes do clique, e o estado esgotado tem que existir no HTML servido, antes de qualquer classe aplicada por script no navegador.

A calculadora de frete e o degrau de checkout carregam a informação que decide a compra e a que evita o abandono. Ambos exibem dado cuja verdade pertence ao eixo backend, que calcula a promessa de entrega e expõe o prazo por interface própria. Ao design system cabe garantir que esse dado apareça no mesmo lugar, com o mesmo peso e o mesmo contraste, em toda a loja.

A sequência que rende mais começa por container queries no cartão de produto, que elimina uma variação por contexto; segue com :has() para o estado de variação esgotada, resolvido em CSS em vez de classe aplicada por script; adota popover nativo no mini-carrinho, que traz foco e acessibilidade de teclado prontos; e usa color-mix ou OKLCH para derivar a escala de estados a partir da cor de marca mantendo contraste AA.

As view transitions ficam por último e com escopo curto: a transição de listagem para página de produto, sempre atrás de prefers-reduced-motion e com degradação em navegador sem suporte. Já o posicionamento por âncora entrou em Baseline em janeiro de 2026, com o Firefox 147, e está no começo da janela de 30 meses até ficar amplamente disponível, o que o coloca na categoria de recurso a usar com alternativa declarada, sobre um layout que já se sustenta sem ele.

A regra de base vem da própria WCAG: conteúdo que se move automaticamente por mais de cinco segundos precisa de mecanismo para pausar, parar ou ocultar, pelo critério 2.2.2, de nível A. Isso condena o carrossel que gira sozinho na primeira dobra, que ainda por cima é um dos maiores responsáveis por LCP ruim na página de produto. Animação em laço infinito, sem controle, acumula os dois defeitos ao mesmo tempo.

O caminho técnico atual evita laço infinito ligado ao relógio e prefere animação ligada ao progresso de rolagem ou disparada por interação, sempre com prefers-reduced-motion respeitado como caminho padrão e não como exceção. E transição vistosa entre telas precisa passar no mesmo teste dos scripts de terceiro: se ela adia o primeiro toque útil, está cobrando do INP o que entrega em sensação.

Os números da WebAIM Million explicam por que a auditoria periódica falha: 95,9% de 1 milhão de home pages têm falha detectável automaticamente, com média de 56,1 erros por página em fevereiro de 2026, e o índice piorou 10,1% em relação a 2025. Um defeito que a ferramenta automática encontra em segundos está entrando em produção porque ninguém o verifica no momento em que ele entra.

Entre plataformas de e-commerce, o Magento apareceu como o pior caso da amostra, com 85,4 erros detectáveis por home page, o que mostra que tema herdado propaga defeito em escala. A verificação prática cabe em poucas regras: contraste calculado a partir dos tokens, foco visível obrigatório em todo elemento interativo, alternativa textual em imagem de produto e bloqueio de valor de cor escrito fora do token. Quatro regras que reprovam o merge valem mais que um laudo de cem páginas.