O Impacto das CSS View Transitions no Desempenho Web

O Impacto da View Transition API no Desempenho

A View Transition API permite que desenvolvedores ativem transições visuais suaves entre visualizações no mesmo site, mesmo para aplicações multi-página (MPAs). Essas view transitions são gerenciadas por transições CSS entre duas visualizações de página. Historicamente, transições CSS durante o carregamento da página causam um atraso na métrica LCP. Suspeitávamos que essas view transitions entre páginas também tivessem implicações de desempenho, particularmente em dispositivos móveis e CPUs mais lentas. Nossos dados de Real User Monitoring (RUM) confirmaram essas suspeitas, junto com outros insights interessantes sobre o efeito nos Core Web Vitals, especialmente o Largest Contentful Paint (LCP).

Última revisão por Arjen Karel em fevereiro de 2026

Resultados dos Dados RUM

Para validar nossa ideia de que view transitions impactam negativamente o Largest Contentful Paint, configuramos uma série de testes A/B em 5 sites diferentes e os deixamos rodar por 7 dias. Em 50% das visualizações de página adicionamos @view-transition { navigation: auto;} às folhas de estilo da página, enquanto os outros 50% das visualizações foram servidos sem esses estilos.

Coletamos mais de 500.000 visualizações de página, das quais 120.000 visualizações móveis foram analisadas porque originaram de navegações móveis dentro do mesmo site.

Dados de monitoramento de usuários reais revelaram que a implementação da View Transition API adiciona aproximadamente 70ms ao Largest Contentful Paint para visualizações de página móveis recorrentes. Esse aumento no tempo do LCP é notável, considerando a recomendação do Google de que o LCP deve ocorrer dentro de 2,5 segundos a partir do início do carregamento da página para uma boa user experience.

Correlação com Desempenho da CPU

Tendo confirmado o impacto negativo das view transitions no LCP, investigamos mais a fundo. Procedemos à configuração de uma série de experimentos para testar automaticamente as mesmas 2 páginas com e sem view transitions. Os resultados mostram uma correlação clara entre a velocidade da CPU e o impacto das view transitions no LCP. As descobertas indicam que quanto mais lenta a CPU, mais pronunciado é o efeito negativo no LCP ao usar view transitions.

Se quiser testar isto por conta própria, visite a nossa página inicial do experimento de view transition no GitHub.

Estes resultados destacam três observações principais:

• View transitions tornam o LCP mais lento: Visualizações de página com view transitions são mais lentas do que visualizações sem efeitos de view transition.
• A velocidade da CPU é um fator importante: A velocidade da CPU tem uma alta correlação com a diferença de LCP em visualizações com e sem efeitos de transição de página. Isso importa especialmente para dispositivos móveis de baixo desempenho.
• Existe um 'sweet spot' de velocidade de página: Com redução de 6x, o LCP tem melhor desempenho sem cache de rede. A razão simples é que nessa velocidade de CPU o elemento LCP ainda não foi decodificado sem cache de rede e a transição é aplicada a uma página em branco. Imediatamente após a transição mais simples para uma página em branco, o elemento LCP é renderizado. Aparentemente este é o sweet spot onde é mais eficiente fazer a transição para uma página em branco do que fazer a transição entre imagens. Do ponto de vista de UX, é melhor fazer a transição entre imagens, claro.

Suporte dos Navegadores

A View Transition API alcançou o status Baseline Newly Available em outubro de 2025. View transitions no mesmo documento agora funcionam no Chrome 111+, Edge 111+, Firefox 144+ e Safari 18+, cobrindo aproximadamente 89% do tráfego global de navegadores. View transitions entre documentos (as acionadas por @view-transition { navigation: auto; }) têm suporte ligeiramente mais limitado, mas funcionam em todos os principais navegadores exceto versões mais antigas do Firefox.

Este amplo suporte significa que mais desenvolvedores adotarão view transitions, tornando as implicações de desempenho ainda mais relevantes.

Entendendo @view-transition { navigation: auto; }

Tradicionalmente, implementar view transitions exigia uso extensivo de CSS e JavaScript. A View Transition API simplifica este processo permitindo que desenvolvedores definam transições de forma declarativa. A View Transition API funciona capturando snapshots dos estados antigo e novo de um documento, atualizando o DOM enquanto suprime a renderização, e usando animações CSS para executar a transição.

Exemplo de Implementação

Aqui está um exemplo básico de como ativar view transitions entre documentos no seu CSS:

@view-transition {
  navigation: auto;
}

Ou em combinação com uma media query para tablets ou dispositivos desktop:

@media (min-width: 768px) {
  @view-transition {
    navigation: auto;
  }
}

Esta simples adição permite que o navegador gerencie a transição automaticamente ao navegar entre páginas da mesma origem.

Acessibilidade: prefers-reduced-motion

Usuários que preferem movimento reduzido não devem ser forçados a passar por animações. Envolva sua regra de view transition em uma media query prefers-reduced-motion. Isso também remove a penalidade de LCP para esses usuários.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

Eliminando o Custo de LCP com Speculation Rules

A melhor forma de usar view transitions sem a penalidade de LCP é combiná-las com a Speculation Rules API. Quando o navegador pré-renderiza a próxima página antes do usuário clicar, a view transition anima entre dois estados já renderizados. O elemento LCP já está carregado e decodificado, então a transição não adiciona nenhum atraso mensurável. Se você se preocupa tanto com estética quanto com desempenho, esta é a combinação a usar.

Recomendações

A View Transition API oferece transições suaves e visualmente agradáveis entre navegações. Isso pode levar a pequenos benefícios em métricas de negócio como taxas de rejeição mais baixas e maior engagement. No entanto, especialmente em dispositivos móveis de baixo desempenho, desenvolvedores devem considerar cuidadosamente as implicações de desempenho. Aqui estão minhas recomendações:

• Verifique seu orçamento de LCP primeiro. Se seu LCP móvel já está acima de 2,0 segundos, adicionar 70ms de overhead de transição coloca você mais perto de não passar. Corrija o LCP primeiro, adicione transições depois.
• Combine com Speculation Rules. Pré-renderizar a página de destino elimina completamente o custo de LCP das view transitions.
• Use prefers-reduced-motion. Envolver view transitions em uma media query de movimento reduzido respeita as preferências do usuário e remove o custo de desempenho para usuários que não querem animações.
• Teste com usuários reais. Testes de laboratório não capturam toda a variedade de dispositivos e condições de rede que seus visitantes usam. Execute um teste A/B com CoreDash para medir o impacto real no seu LCP antes e depois de ativar view transitions.
• Considere apenas desktop. Nossos dados mostram que dispositivos desktop com CPUs rápidas experimentam quase nenhum impacto no LCP (5ms). Restringir view transitions ao desktop via uma media query min-width é um compromisso razoável.