O Impacto das CSS View Transitions no Desempenho Web

O Impacto da View Transition API no Desempenho

A View Transition API permite que desenvolvedores habilitem transições visuais suaves entre visualizações no mesmo site, mesmo para aplicações de múltiplas páginas (MPA's). Essas view transitions são gerenciadas por transições CSS entre 2 visualizações de página. Historicamente, transições CSS durante o carregamento da página causam um atraso nas métricas de LCP. Suspeitávamos que esses tipos de view transitions entre páginas também tivessem implicações de desempenho, particularmente em dispositivos móveis e CPUs mais lentas. Nossa pesquisa e dados de monitoramento de usuários reais (RUM) confirmaram essas suspeitas, juntamente com outras descobertas interessantes sobre seu efeito nos Core Web Vitals, especialmente o Largest Contentful Paint (LCP).

>

Descobertas dos Dados RUM

Para validar nossa ideia de que view-transition impacta negativamente o Largest Contentful Paint, configuramos uma série de testes A/B em 5 sites diferentes e os executamos 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.

Os 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 móveis repetidas. Esse aumento no tempo de LCP é notável, considerando a recomendação do Google de que o LCP deve ocorrer dentro de 2,5 segundos a partir do momento em que a página começa a carregar para uma boa user experience.

Correlação com Desempenho de CPU

Tendo confirmado o impacto negativo das view transitions no LCP, investigamos mais a fundo. Procedemos configurando uma série de experimentos para testar automaticamente as mesmas 2 páginas com e sem view-transitions. Os resultados mostram uma clara correlação 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 você gostaria de testar isso por conta própria, visite nossa página inicial do experimento de view transition no github

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

• View transitions desaceleram o LCP: Visualizações de página com view transitions são mais lentas que visualizações sem efeitos de view transition.
• A velocidade da CPU é um fator importante: A velocidade da CPU tem alta correlação com a diferença de LCP em visualizações com e sem efeitos de transição de página.
• Existe um 'ponto ideal' de velocidade de página: Com desaceleração de 6x, o LCP tem um desempenho melhor 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 ponto ideal 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.

Entendendo view-transition: navigation: auto;

Tradicionalmente, implementar view transitions exigia o uso extensivo de CSS e JavaScript. A View Transition API simplifica esse 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 utilizando animações CSS para executar a transição.

Exemplo de Implementação

Aqui está um exemplo básico de como usar view-transition-name: auto no seu CSS:

@view-transition {
  navigation: auto;
}

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

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

Esta simples adição permite que o navegador gerencie a transição deste elemento automaticamente quando uma view transition ocorre.

Equilibrando Estética e Desempenho

A View Transition API oferece transições suaves e possivelmente 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 possivelmente vendas mais altas. No entanto, especialmente em navegadores de baixo desempenho como dispositivos móveis, os desenvolvedores devem considerar cuidadosamente suas implicações de desempenho. Aqui estão minhas recomendações:

• Testes de Desempenho: Realize testes completos em diversos dispositivos e condições de rede para garantir que os benefícios das view transitions superem quaisquer custos potenciais de desempenho.
• Implementação Seletiva: Tenha cuidado ao aplicar view-transitions. Teste seu efeito no desempenho e nas métricas de negócio. Em seguida, considere cuidadosamente em quais tipos de dispositivos implementar view transitions.