Na web a experiência do usuário vai além da interface: tempo de carregamento, interatividade e estabilidade são alguns dos pilares que podem definir seu sucesso ou ruína!
Entenda nesse artigo como utilizar uma das melhores ferramentas para análise da experiência de usuários do mundo real: Core Web Vitals!
- Introdução
- Entendendo Core Web Vitals
- Usando o Lighthouse no seu projeto
- O Core Web Vitals está em constante evolução
- Conclusão
- Referências
Introdução
Fazer um site bonito é bem legal, mas esse esforço pode ser jogado no lixo se a tela demorar muito para carregar ou ficar travando.
Pode parecer óbvio mas conforme temos a necessidade de adicionar mais funcionalidades na nossa aplicação/site, começamos a conviver com o pensamento de "trade offs":
Vale a pena meu site demorar 800 milissegundos a mais para carregar para que eu disponibilize um chatbot?
Vale a pena que a aplicação fique congelada por 1 segundo para que eu possa sincronizar um montão de dados sem que o usuário interaja com ela?
E mesmo assim isso são casos onde você tem uma necessidade específica e precisa ponderar sobre essas trocas, mas o cenário mais comum é outro:
As pessoas simplesmente saem desenvolvendo e se deparam com o monstro que criaram:
- Um projeto carregando muito JavaScript;
- Alguma rotina causando vazamento de memória;
- Código não utilizado sendo carregado e atrasando o carregamento da página;
- Imagens enormes não otimizadas demorando para carregar.
É muito fácil criar esses monstros no dia a dia, mas antes de entender como podemos evitar, vamos entender como fazemos para detectar esses problemas.
Entendendo Core Web Vitals
De acordo com o artigo Web Vitals:
As métricas Web Vitals são uma iniciativa do Google para fornecer orientações unificadas para indicadores de qualidade da página da Web que são essenciais para oferecer uma ótima experiência do usuário na Web.
Contudo existe um subconjunto muito mais crítico para a experiência do usuário que se resume em 3 métricas:
Largest Contentful Paint (LCP) - Maior exibição de conteúdo
A LCP informa o tempo de renderização da maior imagem ou bloco de texto visível na janela de visualização em relação ao momento em que o usuário navegou pela primeira vez à página. Para oferecer uma boa experiência ao usuário, a LCP precisa ocorrer em até 2,5 segundos após o início do carregamento da página.
Interaction to Next Paint (INP) - Interação com a próxima exibição
A INP observa a latência de todas as interações de clique, toque e teclado com uma página durante toda a vida útil e informa a duração mais longa, ignorando as exceções. Um INP baixo significa que a página é capaz de responder rapidamente à grande maioria das interações do usuário de maneira consistente. Para oferecer uma boa experiência do usuário, as páginas precisam ter um INP de 200 milissegundos ou menos.
Cumulative Layout Shift (CLS) - Mudança de layout cumulativa
A CLS é uma medida do maior valor de pontuações de troca de layout para cada mudança inesperada que ocorre durante a vida útil de uma página. Uma mudança de layout ocorre sempre que um elemento visível muda de posição de um frame renderizado para o próximo. Para oferecer uma boa experiência do usuário, é necessário manter um CLS de 0.1. ou menos.
É muito fácil testar o desempenho de um site nestas métricas, podemos tanto utilizar o PageSpeed Insights quanto a ferramenta Lighthouse que já vem embutida no navegador Google Chrome.
Pegue qualquer site, até este mesmo onde você está lendo e use uma destas ferramentas.
Seja pelo PageSpeed Insights ou pelo Lighthouse, ao analizar a página você terá um relatório parecido com estes:
Relatório do PageSpeed Insights
Relatório do Lighthouse
Usando o Lighthouse no seu projeto
Particularmente gosto mais de utilizar o Lighthouse pois é possível usá-lo no seu projeto como uma dependencia e integrar com a sua sua esteira de entrega de software.
Dessa forma podemos criar alertas automatizados para nos avisar caso alguma das métricas venha a ser violada ou passe dos valores que você estipular.
Lighthouse no NPM: https://www.npmjs.com/package/lighthouse
Por padrão ele analiza apenas a página que você apontou no seu site, mas é possível realizar automações, com o Puppeteer por exemplo, para simular a navegação de um usuário e extrair um relatório deste fluxo.
Ainda nesta utilidade, você pode usar uma ferramenta de dentro do DevTools, o Recorder que grava o fluxo do usuário na sua tela para que você possa reproduzir com ferramentas como o Puppeteer.
Assim fica simples demais testar seu frontend para estar sempre respeitando as métricas que você definiu, ou pelo menos que você possa notar quando algo de errado estiver acontecendo.
Ainda de acordo com Web Vitals em web.dev:
Para cada uma dessas métricas, para garantir que você atinja a meta recomendada para a maioria dos usuários, um bom limite a ser medido é o 75o percentil de carregamentos de página, segmentado em dispositivos móveis e computadores.
As ferramentas que avaliam a conformidade com as Core Web Vitals precisam considerar uma página em conformidade se ela atender aos destinos recomendados no 75o percentil para cada uma dessas três métricas.
O Core Web Vitals está em constante evolução
Cada fase é projetada para sinalizar aos desenvolvedores como eles devem pensar sobre cada métrica:
As métricas experimentais são potenciais Core Web Vitals que ainda podem estar passando por mudanças significativas dependendo dos testes e do feedback da comunidade.
As métricas pendentes são as Core Web Vitals futuras que passaram no estágio de teste e feedback e têm um cronograma bem definido para se tornarem estáveis.
As métricas estáveis são o conjunto atual de Core Web Vitals que o Chrome considera essenciais para oferecer ótimas experiências do usuário.
Recentemente houve a substituição da métrica FID (First Input Delay) pela INP, como descrito neste artigo, logo, é interessante ficar atendo às mudanças e tendencias da comunidade.
Conclusão
Core Web Vitals são uma ótima forma de analizar e mitigar os problemas do seu site, use e abuse desta ferramenta que com toda certeza vai contribuir para a qualidade geral do seu software.
Contudo analisar é apenas a primeira parte, acompanhe nos meus próximos conteúdos as técnicas e boas práticas mais interessantes para fazer um frontend incrível independente de framework.
Referências
Google Developers. Vitals - web.dev. Disponível em: https://web.dev/articles/vitals. Acesso em: 03 abr. 2024.
Google Developers. Novas métricas de campo para a experiência de página: Primeiras impressões. Disponível em: https://web.dev/blog/inp-cwv-march-12?hl=pt-br. Acesso em: 03 abr. 2024.
Google Developers. Google Chrome Developer Tools: Gravador. Disponível em: https://developer.chrome.com/docs/devtools/recorder. Acesso em: 03 abr. 2024.
npm. Lighthouse. Disponível em: https://www.npmjs.com/package/lighthouse. Acesso em: 03 abr. 2024.
Google Developers. Insights sobre velocidade da Web. Disponível em: https://developers.google.com/speed/docs/insights/v5/about. Acesso em: 03 abr. 2024.
Google Developers. PageSpeed Insights. Disponível em: https://pagespeed.web.dev/. Acesso em: 03 abr. 2024.
Google Chrome Web Store. Lighthouse. Disponível em: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk. Acesso em: 03 abr. 2024.
Top comments (0)