CRO: Otimização de Conversão e Experimentação · Capítulo 17 de 30 · 38 min
Mobile e performance: INP e Core Web Vitals
O que mudou quando o INP substituiu o FID, como corrigir cada uma das três métricas, e por que o snippet anti-flicker da sua plataforma de teste pode ser a causa do seu LCP ruim.
Este capítulo faz parte do curso gratuito CRO: Otimização de Conversão e Experimentação.
Etapa: Superfície e infraestrutura. Pergunta que este módulo responde: A experiência responde com velocidade suficiente no dispositivo e na rede reais? Dono mais comum: Tecnologia e produto, com marketing responsável por terceiros. Passagem de bastão: dados de campo, orçamento de performance, donos por script e critério de aceite.
Performance é pedágio invisível
Cada script, banner e tag cobra alguns segundos. Individualmente parecem baratos; juntos formam uma praça com dez cancelas. Em mobile, o usuário paga o pedágio com bateria, dados, atenção e paciência.
Laboratório encontra causas; campo mede a experiência que usuários reais conseguem comprar.
CTO em revisão de campanha
Viagens
Dor
A landing passa no notebook da agência, mas mobile converte menos após novas tags de mídia.
Solução
Tecnologia compara CrUX e RUM por aparelho, cria orçamento para terceiros e exige dono para cada script.
Resultado
Performance vira critério de aceite compartilhado, não pedido tardio de otimização técnica.
Custo apurado: Cenário executivo ilustrativo, construído a partir de rotinas empresariais recorrentes.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
O que significa: Performance percebida é o tempo até a página mostrar conteúdo útil, responder ao toque e permanecer visualmente estável. Core Web Vitals transformam partes dessa experiência em medidas; dados de campo mostram o que aparelhos e redes reais vivem. Por que isso importa na empresa: Uma página pode parecer rápida no notebook do escritório e falhar em celular intermediário com rede instável. Cada script de campanha, tag e componente disputa CPU, dados e atenção, com impacto direto sobre conversão e acessibilidade.
- Etapa 1 de 5: Campo
Segmente experiência real por página, aparelho, rede e origem.
- Etapa 2 de 5: Laboratório
Reproduza para encontrar causas e comparar versões.
- Etapa 3 de 5: Orçamento
Defina limites de peso, execução e scripts de terceiros.
- Etapa 4 de 5: Correção
Priorize caminho crítico, resposta e estabilidade.
- Etapa 5 de 5: Aceite
Inclua performance no pronto e monitore regressão.
Exemplo calculado — números ilustrativos
| Situação | Conta | Como interpretar | Decisão executiva |
|---|---|---|---|
| Mobile recebe 80.000 sessões. A faixa rápida converte 3%; a lenta, 1,8%. Quarenta mil sessões estão em cada faixa. | Rápida: 1.200 conversões. Lenta: 720. A diferença observada é 480, mas velocidade e perfil de usuário podem estar correlacionados. | A associação mostra oportunidade, não prova que acelerar causará todo o ganho. É preciso corrigir, testar ou usar desenho causal adequado. | Tecnologia remove gargalos de baixo risco, mede antes/depois e testa mudanças cujo custo ou incerteza justificam comparação. |
Os números foram criados para ensinar o raciocínio. Substitua base, janela, valor e premissas pelos dados validados da sua empresa.
Dúvidas comuns de quem está começando
Lighthouse é igual à experiência do cliente?
Não. É uma simulação útil para diagnóstico. CrUX e RUM observam campo; os conjuntos se complementam e podem divergir.
O que é INP em linguagem simples?
É uma medida da demora de resposta visual após interações. Um toque que parece ignorado aumenta repetição, erro e abandono.
O Lighthouse do seu notebook marca 98 de performance. O Search Console reprova a mesma URL em Core Web Vitals. As duas medições estão corretas, e a contradição entre elas é a fonte mais comum de decisão errada nesta área.
A diferença é o denominador. O Lighthouse simula uma carga, no seu aparelho, na sua rede. O Search Console reporta o que aconteceu com visitantes reais, no aparelho e na rede que eles têm. Times que confundem os dois passam meses otimizando um número que o Google não usa para avaliar a página.
Escreva percentil 75 e origem de campo no contrato do fornecedor, e adote a regra de troca na primeira tela: script novo só entra quando outro sai, com o limiar de corte declarado em número. Dono: quem assina o contrato de front-end ou de plataforma, com a engenharia fornecendo o limiar e o gerenciador de tags sob a mesma alçada. Prazo: a cláusula até a próxima renovação, e a regra de troca vigente em quinze dias, porque essa segunda parte não depende de fornecedor nenhum. Limiar sem percentil declarado é aceite que o fornecedor cumpre com o Lighthouse do notebook dele: o contrato fica tecnicamente atendido e a página continua reprovada no Search Console, situação em que a empresa paga e não tem a quem cobrar.
O que você vai conseguir fazer depois deste módulo
- Ler um relatório de Core Web Vitals sabendo se o número veio de laboratório ou de campo, e o que cada um decide.
- Escrever um critério de aceite de performance em contrato com fornecedor, com limiar e percentil declarados.
- Apontar a técnica de correção adequada a cada uma das três métricas, em vez de só reportar a nota.
- Reconhecer quando a sua própria plataforma de teste A/B é a causa do LCP ruim que você está tentando corrigir.
- Medir a participação do mobile na sua operação em vez de importar um percentual de mercado.
O INP substituiu o FID como Core Web Vital em 12 de março de 2024. Todo material que ainda ensina otimização de FID está desatualizado. E a avaliação acontece no percentil 75 de visitas reais do CrUX: a página só passa se 75% das visitas atingirem o limiar bom. Otimizar a média, ou o teste do seu laptop, é otimizar a métrica errada.
Glossário rápido
Core Web Vitals
Conjunto de três métricas com que o Google mede a experiência de carregamento e de resposta de uma página em visitas reais. A página só conta como boa quando passa nas três ao mesmo tempo.
LCP, de Largest Contentful Paint
Em tradução livre, maior conteúdo desenhado. Marca o instante em que o maior elemento visível termina de aparecer, ou seja, quando a página parece pronta para quem está olhando. Considerada boa até 2,5 segundos.
INP, de Interaction to Next Paint
Interação até o próximo desenho de tela. Mede quanto tempo a página leva para reagir aos toques e cliques ao longo da visita inteira. Substituiu o antigo FID (First Input Delay, atraso da primeira interação) em março de 2024. Considerada boa até 200 milissegundos.
CLS, de Cumulative Layout Shift
Deslocamento cumulativo de layout. Mede o quanto os elementos pulam de posição enquanto a página carrega, aquele efeito de o botão se mexer bem na hora em que você vai tocar. Considerada boa até 0,1.
Velocidade é a fila do banco
Todo mundo já entrou numa agência, viu a fila dobrando o balcão e foi embora resolver depois. Ninguém reclamou, ninguém preencheu formulário de insatisfação. A pessoa simplesmente saiu, e o gerente nunca soube que ela esteve lá. A página lenta produz essa mesma perda invisível. Quem desiste durante o carregamento não gera erro, não abre chamado e não aparece em relatório de falha. Ele apenas some do total de pedidos, e o time acaba atribuindo a queda a qualquer outra coisa.
O custo da lentidão não chega num alerta, chega numa subtração silenciosa no fim do mês. Por isso a régua tem de ser o dado de campo, visitas reais no percentil 75, e não o teste rápido feito no seu próprio aparelho.
A relação entre lentidão e receita é medida há quase vinte anos. Greg Linden, engenheiro que trabalhou na Amazon nos primeiros anos do site, relatou que cada 100 milissegundos a mais de latência custavam por volta de 1% das vendas. O experimento é antigo e o resultado foi confirmado em espírito por outras grandes operações desde então, o que o tornou uma das referências mais repetidas da área. Guarde a ordem de grandeza, não o decimal: em uma operação de porte, frações de segundo movem a linha de receita.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Limiares vigentes, que servem de critério de aceite
| Métrica | O que ela captura | Bom até | Ruim acima de |
|---|---|---|---|
| LCP | Quando o maior elemento visível termina de renderizar | 2,5 s | 4,0 s |
| INP | A latência das interações ao longo da visita inteira | 200 ms | 500 ms |
| CLS | Quanto o conteúdo se desloca sem o usuário pedir | 0,1 | 0,25 |
A faixa entre o limiar bom e o ruim é o território de "precisa melhorar". Ao escrever esses números em contrato, declare junto o percentil 75 e a origem de campo, senão o fornecedor entrega o número do Lighthouse dele e estará tecnicamente cumprindo o que foi escrito.
Fonte: web.dev, documentação oficial dos Core Web Vitals
A troca do FID pelo INP mudou o que está sendo cobrado. O FID olhava apenas o atraso até o navegador começar a processar a primeira interação, e ignorava o tempo até a resposta aparecer na tela. Uma página podia reagir rápido ao primeiro toque, travar em todas as interações seguintes e manter nota boa.
O INP olha a latência ao longo de toda a visita e considera o caminho completo até a atualização visual. Isso aproxima a métrica da experiência que faz alguém desistir, e move o alvo do trabalho de engenharia: não basta liberar a thread principal para o primeiro toque, é preciso que cada interação renda pintura rápida.
Se o seu time ainda tem card de backlog, documentação interna ou material de treinamento falando em otimizar FID, esse conteúdo é anterior a 12 de março de 2024. As táticas não são todas inúteis, já que reduzir o bloqueio da thread principal continua valendo, e ignorar o custo de renderização depois da interação passou a reprovar a página.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Dado de laboratório contra dado de campo
Laboratório (Lighthouse, WebPageTest)
Coluna a evitar
- Uma carga, um aparelho, uma rede, escolhidos por quem testa
- Reproduzível, o que é ótimo para depurar e péssimo para representar o público
- Mede TBT como aproximação, porque não há interação real para medir INP
- Otimizar até 100 aqui não garante aprovação nenhuma no Search Console
- Serve para achar a CAUSA de um problema já detectado
Campo (CrUX, Search Console, RUM próprio)
Coluna recomendada
- Milhares de visitas reais, em aparelhos e redes que você não escolheu
- É o dado que o Google usa para avaliar a página
- Mede INP de verdade, a partir das interações que aconteceram
- Reflete o efeito de script de terceiro, de rede ruim e de aparelho antigo
- Serve para PRIORIZAR o que corrigir primeiro
Dado de laboratório diagnostica causa. Dado de campo decide prioridade. Quando os dois discordam, o campo ganha, porque é ele que descreve o que aconteceu com gente de verdade. Um relatório de performance que não diz de qual dos dois veio o número não está pronto para discussão.
- Etapa 1 de 4: Lighthouse local
Uma carga, um aparelho, uma rede: serve para achar a causa
- Etapa 2 de 4: PageSpeed Insights
Mostra laboratório e campo lado a lado na mesma tela
- Etapa 3 de 4: CrUX e Search Console
Percentil 75 de visitas reais: serve para priorizar
- Etapa 4 de 4: RUM próprio
Mesma métrica segmentada por página, aparelho, rede e país
O CLS merece atenção específica de quem faz experimentação, e aqui o curso precisa apontar uma ironia que quase nenhum material comenta. Teste client-side injeta a variante depois que o HTML já renderizou, e esse rearranjo conta como deslocamento de layout. Você degrada a métrica exatamente nas páginas que está tentando melhorar, e o efeito aparece no CrUX antes de aparecer na sua consciência.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
A ironia que fecha o assunto: o remédio padrão das plataformas de teste A/B para o flicker é um snippet anti-flicker, que esconde a página com um estilo temporário até a variante ser aplicada, com um tempo limite de segurança. Esse snippet costuma ser carregado de forma bloqueante no topo do documento. Enquanto ele segura a página escondida, o navegador não tem o que pintar. O maior elemento visível só aparece depois que a decisão da variante chega, então o tempo de rede da plataforma de teste entra inteiro dentro do seu LCP. Quando a plataforma demora, o tempo limite dispara e o usuário vê a página aparecer de uma vez, tarde. Este curso ensina a usar essas plataformas e tem obrigação de dizer o preço: a ferramenta que mede o seu ganho de conversão pode ser a origem da reprovação em Core Web Vitals que derruba a mesma conversão. Antes de culpar imagem ou fonte pelo LCP, remova o snippet num ambiente de teste e meça de novo. Se o número melhorar de forma relevante, a decisão passa a ser arquitetural: mover o experimento para servidor ou borda, como o módulo "Personalização: regra, modelo e evidência" detalha, em vez de disputar milissegundos no restante da página.
Glossário rápido
Snippet anti-flicker
Trecho de código das plataformas de teste client-side que oculta a página até a variante ser aplicada, evitando que o usuário veja a versão original piscar. Compra ausência de flicker pagando com tempo de exibição, e esse tempo entra no LCP.
Elemento do LCP
O maior elemento visível na primeira tela, quase sempre a imagem principal ou o bloco de texto do título. É dele que o LCP mede o tempo de pintura, e é por isso que ele merece prioridade de carregamento explícita.
Long task
Bloco de trabalho em JavaScript que ocupa a thread principal por mais de 50 milissegundos seguidos. Enquanto ele roda, o navegador não responde a toque nem a clique, e é a causa mais comum de INP ruim.
Percentil 75
O valor abaixo do qual ficam 75% das visitas. A página passa quando esse corte atinge o limiar bom, o que significa que uma cauda de visitas lentas reprova a página mesmo com média confortável.
CrUX
Base pública de dados de campo do Chrome, formada por visitas reais de usuários que optaram por compartilhar a medição. É a fonte que alimenta o relatório de Core Web Vitals do Search Console.
Quem opera aplicação de página única convive com um ponto cego que distorce toda a leitura de performance. As Core Web Vitals são atribuídas ao carregamento inicial: a primeira rota responde por LCP, CLS e boa parte do INP, e as transições seguintes, que no uso real concentram a maior parte da navegação, não geram medição própria. A operação exibe número confortável porque mediu apenas o primeiro passo do usuário, e o restante da sessão fica sem registro.
A Soft Navigations API trata desse caso ao permitir que o navegador reconheça a transição de rota feita em JavaScript como navegação e reinicie a atribuição das métricas a cada uma. Ela passou a estar disponível sem flag no Chrome 151, anunciada em 8 de julho de 2026, e já dá para instrumentá-la na sua própria coleta de campo.
Ressalva que a maior parte do material publicado sobre essa API omite, e que muda diretamente o que você pode prometer numa reunião: a Soft Navigations API ainda não entrou no CrUX e não é Core Web Vital. Nada que ela mede aparece no relatório do Search Console nem entra na avaliação de página pela Busca. O uso legítimo dela hoje é diagnóstico, dentro do seu RUM próprio: enxergar a lentidão de transição que já existia e nunca foi medida, e priorizar correção com base nisso. Apresentá-la como métrica oficial cria expectativa de um relatório que não existe, e o desmentido chega no trimestre seguinte, junto com a pergunta sobre o que mais foi apresentado do mesmo jeito.
Medir sem saber corrigir transforma o relatório de performance numa fonte de ansiedade trimestral. As técnicas abaixo cobrem a maior parte dos casos reais e são de escopo pequeno o suficiente para caber numa sprint, o que importa porque performance perde para funcionalidade toda vez que o esforço parece grande.
Sintoma, técnica de correção e onde ela se aplica
| Métrica e sintoma | Técnica | Onde entra, e quem decide |
|---|---|---|
| LCP: a imagem principal aparece tarde | Marcar a imagem do LCP com fetchpriority alto e retirá-la do carregamento preguiçoso | No HTML da própria imagem, uma linha por página. Decisão do front-end, sem depender de terceiro nem de contrato |
| LCP: o recurso crítico está em outro domínio | Abrir a conexão antes com preconnect para a origem que serve fonte, imagem ou API crítica | No cabeçalho do documento, limitado a duas ou três origens. Decisão do front-end, com a lista de origens vinda de quem contratou cada serviço |
| LCP: a página fica escondida esperando a variante | Remover o snippet anti-flicker e mover a decisão do experimento para servidor ou borda | Arquitetura do experimento, tema do módulo "Personalização: regra, modelo e evidência". Decisão de quem responde pela plataforma de teste, e ela custa contrato e migração |
| CLS: a imagem empurra o texto ao carregar | Reservar o espaço com width e height ou com aspect-ratio no CSS | Em toda imagem e todo vídeo, sem exceção. Decisão de padrão de componente: sobe uma vez e vale para o catálogo inteiro |
| CLS: banner, aviso ou anúncio entra depois e desloca o conteúdo | Reservar o espaço do bloco desde a primeira pintura, mesmo quando ele estiver vazio | No componente que injeta o elemento. Decisão de quem pediu o banner, porque o espaço reservado tira área útil da primeira tela |
| INP: a interface trava depois do toque | Quebrar a long task em pedaços e devolver o controle ao navegador com scheduler.yield | Na função que processa o evento, do lado do cliente. Decisão de engenharia, com esforço estimável dentro de uma sprint |
| INP: script de terceiro come a thread principal | Adiar o carregamento de tag, chat e pixel para depois da interação ou da primeira pintura | No gerenciador de tags e no carregamento dos widgets. Decisão de governança de tag, que é exatamente onde a regra de troca se aplica |
A ordem de ataque é a ordem do relatório de campo. Corrigir uma métrica que já está na faixa boa consome sprint sem mudar a avaliação da página. Repare que boa parte das linhas tem dono fora da engenharia: quando a técnica é barata e a decisão é de outra área, a correção espera reunião em vez de esperar sprint, e é essa espera que faz performance perder para funcionalidade todo trimestre.
<!-- LCP: prioridade explícita na imagem principal e conexão antecipada -->
<link rel="preconnect" href="https://cdn.exemplo.com.br" crossorigin>
<img src="/hero.webp" alt="Descrição da imagem principal"
width="1200" height="675"
fetchpriority="high" decoding="async">
<!-- Sem loading="lazy" aqui: adiar a imagem do LCP atrasa a métrica que
você está tentando corrigir. O lazy vale para o que está abaixo da dobra. -->
<!-- CLS: espaço reservado antes de o recurso chegar -->
<style>
.banner-promocional { aspect-ratio: 3 / 1; width: 100%; }
.card-produto img { aspect-ratio: 1 / 1; width: 100%; height: auto; }
</style>
<!-- Terceiros: nada bloqueante no topo do documento -->
<script src="/js/chat-de-atendimento.js" defer></script>Uma vitrine com milhares de SKUs muda a natureza do problema. A imagem de produto passa a ser o elemento do LCP em praticamente toda página de listagem e de categoria, e decidir formato, dimensão e prioridade de carregamento deixa de ser ajuste de uma página para virar padrão de template, com efeito sobre o catálogo inteiro de uma vez. As metas de Core Web Vitals aplicadas a catálogo grande, com o peso que imagem de produto tem no LCP, estão em SEO Técnico para E-commerce.
// INP: quebrar uma long task devolvendo o controle ao navegador entre os lotes.
// Sem isso, o processamento inteiro roda numa tacada e a interface fica travada
// enquanto o usuário toca na tela sem resposta.
async function processarEmLotes(itens, tamanhoDoLote = 50) {
for (let i = 0; i < itens.length; i += tamanhoDoLote) {
const lote = itens.slice(i, i + tamanhoDoLote);
lote.forEach(renderizarItem);
// Devolve a thread principal ao navegador antes do próximo lote.
if (typeof scheduler !== "undefined" && scheduler.yield) {
await scheduler.yield();
} else {
await new Promise((resolver) => setTimeout(resolver, 0));
}
}
}
// A atualização visual mais barata primeiro, o trabalho pesado depois:
// o INP mede até a pintura, então mostrar o estado novo antes de calcular
// o resto derruba a latência percebida sem mudar o total de trabalho.
botao.addEventListener("click", async (evento) => {
marcarComoSelecionado(evento.currentTarget);
await processarEmLotes(itensDaLista);
});Determine que nenhum script novo entra na primeira tela sem que outro saia, com limiar de corte escrito. A inclusão de tag deixa de ser negociação de influência e passa a ser verificação de número, o que muda quem ganha a discussão. O insumo dessa regra é o inventário de terceiros, que costuma ser o item de maior retorno e menor risco: liste todo script que não é seu, com o nome de quem pediu a instalação e a decisão de negócio que ele alimenta. Na maioria das operações, uma parte desses scripts sobreviveu a campanhas encerradas e a fornecedores substituídos, e ninguém remove porque ninguém sabe se ainda é usado. Cada um que sai devolve thread principal e tempo de rede sem nenhuma contrapartida de produto.
Orçamento de performance: o que a sua página pode gastar
Quatro perguntas sobre o estado atual da página mais importante do seu funil. A soma indica se você tem folga de orçamento, se está no limite ou se já estourou. Serve para decidir se cabe mais um script, não para substituir o relatório de campo.
0 = acima de 4,0 s · 1 = entre 3,0 s e 4,0 s · 2 = entre 2,5 s e 3,0 s · 3 = até 2,5 s
0 = acima de 500 ms · 1 = entre 300 ms e 500 ms · 2 = entre 200 ms e 300 ms · 3 = até 200 ms
0 = mais de dez, incluindo teste A/B client-side bloqueante · 1 = de cinco a dez · 2 = de dois a quatro · 3 = nenhum ou um, todos adiados
0 = qualquer área instala pelo gerenciador de tags · 1 = passa por avaliação informal · 2 = exige aprovação com dono nomeado · 3 = exige medição antes e depois, com limiar de corte escrito
Com as métricas reprovadas e a primeira tela lotada de terceiros, adicionar qualquer coisa piora a avaliação da página. Faça o inventário de scripts com dono e finalidade declarados, remova o que sobreviveu a campanhas encerradas e verifique se a plataforma de teste A/B está com snippet anti-flicker bloqueante. Nessa faixa, a maior parte do ganho vem de subtração, não de otimização fina.
Diagnóstico de performance, separando laboratório de campo
Campo, que decide a prioridade
0/5Laboratório, que aponta a causa
0/5Correção e verificação
0/5Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Três correções de CRO mobile que independem de performance e costumam render mais rápido: coloque o CTA principal no terço inferior da tela, onde o polegar alcança sem reposicionar o aparelho; garanta espaçamento entre alvos clicáveis para que o toque errado não abra a ação vizinha; e mantenha o CTA fixo em páginas longas, com fundo sólido, para que a decisão não dependa de o visitante rolar de volta.
O estudo mais citado sobre velocidade e receita é o "Milliseconds Make Millions", conduzido por Deloitte Digital e fifty-five por encomenda do Google, com dados de 2019 e 2020, 37 marcas e mais de 30 milhões de sessões mobile. O ganho de 0,1 segundo apareceu associado a 8,4% de aumento em conversão no varejo e a 10,1% em conclusão de reserva no setor de viagens.
A ressalva metodológica é obrigatória e anda junto do número. O desenho é correlacional: o estudo observou sites mais rápidos e sites mais lentos, sem manipular a velocidade em experimento controlado. Sites rápidos costumam ter times de engenharia melhores, infraestrutura melhor e produto melhor, e essas variáveis empurram a conversão sozinhas. Use o estudo para justificar investimento em performance, e prove o efeito na sua operação com um teste controlado antes de prometer 8,4% a alguém.
Sobre a participação do mobile no tráfego brasileiro, os percentuais que circulam divergem bastante entre fontes, e cada agregador usa um método e um recorte diferente. A afirmação segura é que a maior parte do tráfego brasileiro chega por celular.
O número que decide o seu roadmap está no seu analytics, não em post de blog. Abra o relatório de dispositivo com recorte por página e por etapa do funil, porque a proporção muda muito entre a home e o checkout, e é essa diferença que indica onde o mobile está falhando. Uma loja com 78% de sessões mobile e 40% da receita mobile tem um problema localizado que nenhuma média nacional aponta.
// Coleta INP, LCP e CLS de visitas reais e envia ao seu analytics.
// Instale a biblioteca oficial: npm i web-vitals
import { onINP, onLCP, onCLS } from "web-vitals";
function enviar(metric) {
const corpo = JSON.stringify({
nome: metric.name, // INP, LCP ou CLS
valor: metric.value,
avaliacao: metric.rating, // good | needs-improvement | poor
caminho: location.pathname,
conexao: navigator.connection ? navigator.connection.effectiveType : "desconhecida",
});
navigator.sendBeacon("/api/web-vitals", corpo);
}
onINP(enviar);
onLCP(enviar);
onCLS(enviar);
// Com os dados no seu próprio banco você calcula o percentil 75 por página
// e para de depender da janela de 28 dias agregada do CrUX.Perguntas que aparecem quando performance vira item de roadmap
Removi o snippet anti-flicker e o flicker voltou. Como resolvo sem sacrificar o LCP?
Os dois problemas têm a mesma raiz, que é decidir a variante tarde demais. Movendo a decisão para o servidor ou para a borda, o navegador recebe HTML já resolvido: não há original para piscar nem página escondida à espera de resposta. Quando essa migração não é viável no curto prazo, a mitigação parcial é limitar o experimento client-side a elementos abaixo da dobra, que não participam do LCP, e reduzir bastante o tempo limite do snippet, assumindo o flicker ocasional em vez do atraso garantido.
Meu CLS piora só nas páginas em teste. Isso invalida o experimento?
Não invalida a comparação entre variantes, porque as duas sofrem o mesmo efeito se a injeção acontece nas duas. Invalida a leitura da métrica de negócio se a degradação for assimétrica, o que ocorre quando só a variante recebe mudança visual. Nesse caso, uma parte do resultado que você atribui ao desenho novo é, na verdade, o custo do deslocamento, e a comparação fica enviesada contra a variante.
O Search Console demora a refletir a correção. Como sei que funcionou?
A janela do CrUX é longa e agrega vários dias, então a confirmação oficial vai demorar semanas. É exatamente por isso que vale instalar coleta própria de web-vitals: com o dado no seu banco, você compara o percentil 75 dos dias anteriores e posteriores à correção e sabe em poucos dias se o caminho está certo, sem esperar o relatório público.
Vale contratar CDN e cache antes de mexer no front-end?
Depende de qual métrica reprova, e é essa a razão de o diagnóstico vir antes. CDN e cache atacam tempo de rede e tempo até o primeiro byte, o que ajuda o LCP. Nenhum dos dois melhora INP, que é custo de execução no aparelho do usuário, nem CLS, que é problema de layout. Contratar infraestrutura para corrigir INP é gastar dinheiro na camada errada.
Abra o relatório de Core Web Vitals no Search Console e anote quais URLs reprovam, em qual das três métricas e em qual dispositivo. Leve a URL de pior LCP ao PageSpeed Insights e compare o bloco de campo com o de laboratório. Depois disso, faça a verificação que quase ninguém faz: carregue a mesma página com o snippet da sua plataforma de teste desativado e meça de novo. A distância entre as três leituras é o tamanho do autoengano que a sua equipe vinha carregando.
Este módulo está concluído quando, nos próximos trinta dias, você tiver (1) a lista das URLs que reprovam no Search Console, por métrica e por dispositivo, lida no percentil 75 e não na média; (2) a medição da página de pior LCP feita com e sem o snippet anti-flicker da sua plataforma de teste, com a diferença registrada em milissegundos e a decisão arquitetural do módulo "Personalização: regra, modelo e evidência" encaminhada se a diferença for relevante; (3) o inventário dos scripts de terceiro da primeira tela, com dono nomeado, decisão de negócio que cada um alimenta e a regra de troca em vigor; (4) a cláusula de aceite de performance escrita com limiar, percentil 75 e origem de campo declarada, pronta para a próxima renovação, sabendo que o INP substituiu o FID em 12 de março de 2024 e que material que ainda fala em FID é anterior a essa data; e (5) a participação do mobile medida no seu próprio analytics, segmentada por página e por etapa do funil, com a distância entre a fatia de sessões e a fatia de receita explicitada. Nenhum desses cinco itens depende de percentual importado de blog, e o quinto existe justamente porque esse percentual não é confiável.
Transfira para a sua rotina nesta semana
- Separe dado de laboratório de dado de campo no relatório.
- Nomeie dono e validade de cada tag de terceiro.
- Proteja LCP, INP e CLS como guardrails de toda mudança visual.
Perguntas frequentes deste capítulo
Meu Lighthouse dá 98. Por que o Search Console reprova a página?
Ainda preciso otimizar o FID?
Por qual das três métricas eu começo?
A minha ferramenta de teste A/B está prejudicando a performance?
Qual percentual de tráfego mobile devo assumir para o Brasil?
Meu site tem pouco tráfego e o relatório de campo aparece vazio. Fico sem régua nenhuma?
Performance sempre perde para funcionalidade na priorização. Como justifico a sprint?
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- Destrave o que impede o robô de ler o sitesugerido pelo grafoApresenta os conceitos “LCP”, “CLS” e “Core Web Vitals”, usados em “Mobile e performance: INP e Core Web Vitals”.
- CursoGoogle Ads 2027sugerido pelo grafo3 capítulos de “CRO: Otimização de Conversão e Experimentação” usam conceitos apresentados em “Google Ads 2027”.
- CursoGEO Universal Frameworksugerido pelo grafo2 capítulos de “CRO: Otimização de Conversão e Experimentação” usam conceitos apresentados em “GEO Universal Framework”.
Depois, siga para
- Testar o template no pior caso e achar o tetosugerido pelo grafoApresenta o conceito “INP”, usado em “Testar o template no pior caso e achar o teto”.
- Validar desempenho, autenticação e segurançasugerido pelo grafoApresenta o conceito “INP”, usado em “Validar desempenho, autenticação e segurança”.
- Projeto 1: Auditor de SEO Técnicosugerido pelo grafoApresenta o conceito “INP”, usado em “Projeto 1: Auditor de SEO Técnico”.
- Core Web Vitals e performance em catálogos grandessugerido pelo grafoApresenta o conceito “INP”, usado em “Core Web Vitals e performance em catálogos grandes”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Software e IA para executivosMedir a velocidade que o cliente sente no celular deleExaminar conexões de Medir a velocidade que o cliente sente no celular dele
- Frontends com VibecodingValidar desempenho, autenticação e segurançaExaminar conexões de Validar desempenho, autenticação e segurança
- Vibecoding para SEOProjeto 1: Auditor de SEO TécnicoExaminar conexões de Projeto 1: Auditor de SEO Técnico
- MCP com Chrome: Automação com IAMedir carregamento sem mentir para o clienteExaminar conexões de Medir carregamento sem mentir para o cliente
Voltar ao capítulo anterior: Formulários e checkout: onde a conversão morre
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
Capítulos vizinhos em CRO: Otimização de Conversão e Experimentação
- 15Landing pages: clareza acima da dobra
- 16Formulários e checkout: onde a conversão morre
- 17Mobile e performance: INP e Core Web Vitals
- 18Acessibilidade: fator de conversão e obrigação legal
- 19CRO para SaaS e máquinas de venda: trial, ativação, preço e retenção