Pessoal, eu ia vender Vue 3.
Checkout de infoproduto. Alto volume. Micro frontend. Campanha de influenciador no ar. Timeout. Transbordo. O time discute Lighthouse e Nuxt.
A pergunta não era o score. Era: o JS do passo do pagamento chegou a tempo, e a gente viu o funil cair no Sentry ou só no backoffice no dia seguinte?
O que você leva: performance no front só é Staff se a conversão sobe. Lighthouse sozinho não paga.
Tabela de Conteúdo
- 1. Timeout e transbordo pagam. Score, não
- 2. MFE não é desculpa pra baixar o mundo
- 3. SSR no BFF. Lazy load no resto
- 4. CDN, cache, gzip: o caminho até o JS
- 5. Quatro lentes. Uma delas é dinheiro
- 6. Instalar o SDK não fecha o case
1. Timeout e transbordo pagam. Score, não
No mercado de infoproduto, a campanha não espera o bundle. Influenciador dispara. Tráfego sobe. O checkout transborda ou estoura timeout. A venda não completa.
Isso não é “o site ficou feio”. É receita que não entra.
Eu ia responder stack. Vue 3. Nuxt. Lighthouse verde. Tudo isso importa. Nenhum disso, sozinho, prova que o funil vendeu.
Staff liga a técnica ao número que o backoffice do cliente lê no mês. Sem esse fechamento, otimização de front é chute com PR bonito.
2. MFE não é desculpa pra baixar o mundo
O checkout era um micro frontend. Vários times, várias fatias, um único caminho de pagamento.
MFE resolve autonomia de deploy. Não resolve first load. Se cada fatia puxa o mundo, o comprador baixa o admin, o cupom, o upsell e o pixel antes de ver o botão.
A conta do MFE, pra mim, virou essa: o passo atual baixa o JS do passo atual. O resto espera.
Sem isso, “a gente tem MFE” é organograma. Não é performance.
3. SSR no BFF. Lazy load no resto
Tinha BFF. SSR no first paint. O HTML do passo crítico não ficava esperando o JS inteiro do MFE hidratar.
O resto era code splitting e lazy load. JavaScript sob demanda. A tela de pagamento não carregava o módulo do dashboard nem o do onboarding.
Quando SSR. Quando só lazy
SSR quando o first paint é a conversão: o passo em que a pessoa paga. Lazy load quando o código só existe depois do clique: order bump, meio de pagamento extra, modal que a maioria nem abre.
Inverter isso é clássico. SSR em tela interna. Bundle único no checkout. O Lighthouse do admin fica lindo. A campanha cai.
Vue 2 para Vue 3 / Nuxt 3 entrou aqui. Não como logo. Como caminho pra SSR e split de verdade no MFE. O case que fechou não foi “migramos a lib”. Foi o funil ter parado de perder venda no timeout.
4. CDN, cache, gzip: o caminho até o JS
Split certo com asset errado ainda perde.
CDN perto de quem compra. Cache no estático. Gzip (ou Brotli, se o edge já tiver) no JS que sobrou. Isso não é lista de blog. É o caminho até o arquivo que o passo do pagamento precisa.
Se o chunk lazy sai de origem fria, o lazy load só adia o timeout. Você não cortou o problema. Mudou o lugar do spinner.
Lighthouse no lab vê parte disso. Datadog no caminho vê o resto: TTFB, saturação, região. Os dois. Um sozinho mente.
5. Quatro lentes. Uma delas é dinheiro
A ordem que eu uso hoje. Copie. Troque a ferramenta se quiser. Não troque a pergunta.
- Backoffice. A conversão subiu? Sem esse número, o resto é hipótese.
- Sentry. Timeout e transbordo na jornada, não TypeError órfão. Ação do usuário antes do stacktrace.
- Datadog. Latência e saturação no caminho. O asset, a API, o BFF.
- Lighthouse. Hipótese de lab. Não prova receita.
Não tenho o print do Lighthouse daquela janela no arquivo público. O número que eu fecho o case é outro: +10% de conversão no mês, no backoffice do cliente, cruzado com Sentry e Datadog. Pico nas campanhas de influenciador. Aí o bundle menor parou de ser estética.
Checklist que vive sem o post. Cole no PR de “otimizar o bundle”:
1. Qual jornada perde dinheiro se o JS atrasar? (checkout pay, não o admin)
2. O MFE baixa o mundo ou o passo atual? (code splitting + lazy load)
3. SSR no BFF no first paint, ou SPA seca?
4. CDN / cache / gzip no caminho do asset?
5. Lighthouse é hipótese de lab. Sentry/Datadog é o que quebrou. Backoffice é se vendeu.
6. Timeout e transbordo têm alerta de sintoma de usuário?
Lentes, nesta ordem:
backoffice → Sentry → Datadog → Lighthouse
Cupom inválido, cartão recusado, form incompleto: resultado de negócio. Breadcrumb. Não exception. Exception é gateway 500, timeout de rede, SDK que estourou. Se misturar os dois, o Sentry grita de novo e você volta a otimizar o score.
6. Instalar o SDK não fecha o case
Esse texto é o dinheiro no funil. Instalar o tracker não é observabilidade. Observabilidade é a próxima pessoa filtrar a ação do usuário antes de abrir o stacktrace. O contrato de tags (domínio, ação, o que não é exception) está no complementar: Instalar o Sentry não é observabilidade.
Ownership (ver o problema sem fingir que não viu) é outra porta. Aqui a porta é: a métrica que paga não é o Lighthouse.
Performance no front só é Staff se a conversão sobe.
Última campanha que você pegou: olhou primeiro o timeout no Sentry, o TTFB no Datadog, ou o backoffice?
Top comments (0)