Como comparar e melhorar os dados vitais da Web com métricas reais do usuário

Este artigo foi gentilmente apoiado por nossos queridos amigos da Raygun, que ajudam os desenvolvedores a identificar problemas antes que seus clientes sejam afetados, fornecendo o padrão de experiência que os usuários esperam e merecem. Obrigado!

Como você mediria o desempenho? Às vezes, é a quantidade de tempo que um aplicativo leva desde a solicitação inicial até a renderização completa. Outras vezes, trata-se da rapidez com que uma tarefa é executada. Também pode ser quanto tempo leva para o usuário obter feedback sobre uma ação. Fique tranquilo, todas essas definições (e outras) estariam corretas, desde o contexto correto.

Infelizmente, não há bala de prata para medir o desempenho. Produtos diferentes terão benchmarks diferentes e dois aplicativos podem ter um desempenho diferente em relação às mesmas métricas, mas ainda se classificam de maneira bastante semelhante aos nossos veredictos subjetivos “bom” e “ruim”.

Em um esforço para simplificar a linguagem e promover a colaboração e a padronização, nosso setor criou conceitos generalizados. Dessa forma, os desenvolvedores são capazes de compartilhar soluções, definir prioridades e se concentrar em realizar o trabalho de forma eficaz.

Desempenho x desempenho percebido

Tome este trecho como exemplo:

 const sum = new Array(1000) .fill(0) .map((el, idx) => el + idx) .reduce((sum, el) => sum + el, 0) console.log(sum)

O objetivo disso não é importante e não faz nada, exceto levar um tempo considerável para enviar um número para o console. Diante deste código, alguém poderia (com razão) dizer que ele não funciona bem. Não é um código rápido de ser executado e pode ser otimizado com diferentes tipos de loops ou executar essas tarefas em um único loop.

Outra coisa importante é que ele tem o potencial de bloquear a renderização de uma página da web. Ele congela (ou talvez até trava) a guia do seu navegador. Então, neste caso, o desempenho percebido pelo usuário está de mãos dadas com o desempenho da tarefa em si.

No entanto, podemos executar essa tarefa em um web worker. Ao impedir o bloqueio de renderização, nossa tarefa não será executada mais rapidamente - portanto, pode-se dizer que o desempenho ainda é o mesmo - mas o usuário ainda poderá interagir com nosso aplicativo e receber feedback adequado. Isso afeta a rapidez com que nosso usuário final perceberá nosso aplicativo. Não é mais rápido, mas tem melhor Performance Percebida .

Nota : Sinta-se à vontade para explorar minha prova de conceito react-web-workers no GitHub se quiser saber mais sobre Web-Workers e React.

Dados vitais da Web

O desempenho da Web é um tópico amplo com milhares de métricas que você pode monitorar e melhorar. O Web Vitals é a resposta do Google para padronizar o desempenho da web. Essa padronização permite que os desenvolvedores se concentrem nas métricas que têm o maior impacto na experiência do usuário final.

• Primeira pintura de conteúdo (FCP)
  O tempo desde o início do carregamento até quando o conteúdo é renderizado na tela.
• Maior pintura de conteúdo (LCP)
  O tempo de renderização da maior imagem ou bloco de texto é visível na janela de visualização. Uma boa pontuação está abaixo de 2,5s para 75% dos carregamentos de página.
• Atraso da primeira entrada (FID)
  O tempo desde o momento em que o usuário interage com a página até o momento em que o navegador consegue processar a solicitação.
  Uma boa pontuação está abaixo de 100 ms para 75% dos carregamentos de página.
• Mudança de layout cumulativa (CLS)
  A soma total de todas as mudanças de layout individuais para cada mudança inesperada que ocorre na vida útil da página. Uma boa pontuação é 0,1 em 75% dos carregamentos de página.
• Tempo para Interação (TTI)
  O tempo desde o início do carregamento da página até o carregamento de seus principais sub-recursos.
• Tempo total de bloqueio (TBT)
  O tempo entre a primeira pintura de conteúdo e o tempo para interativo em que o thread principal foi bloqueado (sem capacidade de resposta à entrada do usuário).

Qual destes é o mais importante?

Core Web Vitals são o subconjunto de Web Vitals que o Google identificou como tendo o maior impacto na experiência do usuário final. A partir de 2022, existem três Principais Vitais da Web - Maior Pintura de Conteúdo (velocidade), Mudança de layout cumulativa (estabilidade) e Atraso na primeira entrada (interatividade).

Leitura recomendada : O guia do desenvolvedor para os principais elementos vitais da Web

Relatório de experiência do usuário do Chrome x métricas do usuário real

Existem várias maneiras de testar Web Vitals em seu aplicativo. O mais fácil é abrir o Chrome Devtools, ir até a guia Lighthouse, verificar suas preferências e gerar um relatório. Isso é chamado de Relatório de experiência do usuário do Chrome (CrUX) e é baseado em uma média de 28 dias de amostras de usuários do Chrome que atendem a determinados requisitos:

• sincronização do histórico de navegação;
• nenhuma configuração de senha de sincronização;
• relatórios de estatísticas de uso ativados.

Mas é muito difícil definir o quão representativo de seus próprios usuários é o Chrome UX Report. O relatório serve como uma estimativa e pode oferecer um bom indicador de coisas a serem melhoradas em uma base ad hoc. É por isso que é uma boa ideia usar uma ferramenta Real User Monitoring (RUM), como o Raygun. Isso informará sobre as pessoas realmente interagindo com seu aplicativo, em todos os navegadores, dentro de um período de tempo alocado.

No entanto, monitorar as métricas reais do usuário não é uma tarefa simples. Há uma infinidade de obstáculos para estar ciente. No entanto, não precisa ser complicado. É fácil configurar a obtenção de métricas de RUM com ferramentas de monitoramento de desempenho. Uma das opções que vale a pena considerar é o Raygun - ele pode ser configurado em algumas etapas rápidas e é compatível com GDPR. Além disso, você também obtém muitos recursos de relatório de erros.

Monitoramento de aplicativos

Os desenvolvedores geralmente tratam a observabilidade e o monitoramento de desempenho como uma reflexão tardia. No entanto, o monitoramento é um aspecto crucial do ciclo de vida de desenvolvimento que ajuda as equipes de software a se moverem mais rapidamente, priorizar esforços e evitar problemas sérios no futuro.

A configuração do monitoramento pode ser simples, e a criação de recursos que levem em conta a observabilidade ajudará a equipe a fazer manutenção básica e higiene de código para evitar esses terríveis sprints de refatoração. O monitoramento de aplicativos pode ajudá-lo a dormir tranquilamente à noite e orientar sua equipe a criar melhores experiências de usuário.

Monitore tendências e evite regressões

Da mesma forma, temos testes em execução em nosso pipeline de Integração Contínua (idealmente) para evitar regressões de recursos e bugs, devemos ter uma maneira de identificar regressões de desempenho para nossos usuários imediatamente após uma nova implantação. A Raygun pode ajudar os desenvolvedores a automatizar esse trabalho com o recurso Deployment Tracking.

Aderir ao orçamento de desempenho torna-se mais sustentável. Com essas informações, sua equipe pode identificar rapidamente regressões (ou melhorias) de desempenho em todos os Web Vitals, identificar implantações problemáticas e se concentrar nos usuários afetados.

Aprofunde-se e tome medidas

Ao usar o RUM, é possível restringir os resultados por usuário. Por exemplo, no Raygun, é possível clicar em uma pontuação ou barra no histograma para ver uma lista de usuários impactados. Isso possibilita iniciar o detalhamento das sessões individualmente, com informações no nível da instância. Isso ajuda a tomar medidas direcionadas diretamente ao problema, em vez de simplesmente confiar nas melhores práticas gerais. E, posteriormente, diagnosticar as repercussões da mudança.

Destacar eventos incomuns

Claro, esses recursos são incríveis e um desenvolvedor responsável deve ficar de olho nos painéis de monitoramento de aplicativos. Mas à medida que seu aplicativo é dimensionado, as equipes crescem e as responsabilidades são divididas, é mais importante do que nunca configurar processos automatizados que o alertam rapidamente sobre quaisquer problemas importantes de desempenho. É por isso que é uma prática recomendada configurar acionadores de alerta para seu aplicativo.

Empacotando

Para resumir, os Web Vitals são o novo padrão ouro em desempenho devido à sua correlação direta com a experiência do usuário. As equipes de desenvolvimento que estão monitorando e otimizando ativamente seus Web Vitals com base em insights reais do usuário fornecerão experiências digitais mais rápidas e resilientes.

Acabamos de arranhar a superfície do que o monitoramento pode fazer e as soluções para sustentar a manutenção do desempenho ao dimensionar seu aplicativo. Deixe-me saber nos comentários como você emprega um Orçamento de Desempenho, melhor observabilidade ou outras soluções para ter uma noite de sono relaxada!