Performance: Como medir, mensurar e priorizar tarefas
Foto
Rosana
Amaral
Medir
Métricas, ferramentas e conceitos importantes para uma medição correta
01
Conceitos
É verdade que o desempenho de um site é relativo:
Fonte: web.dev
Conceitos
Nem toda métrica será útil para o usuário:
Isto está acontecendo?
A navegação começou com sucesso? O servidor respondeu?
É útil?
O conteúdo renderizado foi suficiente para que os usuários possam interagir com ele?
É utilizável?
Os usuários podem interagir com a página ou ela está ocupada?
É agradável?
As interações são suaves e naturais, livres de atrasos e interrupções?
Fonte: web.dev
Conceitos
Dados de campo: Dados de performance coletados a partir da experiência de usuários reais no campo.
Dados de laboratório: Dados de performance coletados em um ambiente controlado sob condições pré-definidas.
Exemplos de ferramentas:
Dados de laboratório: Lighthouse, Page Speed Insights.
Dados de campo: CrUX, Page Speed Insights e Chrome Developer Tools.
Os dados de laboratório oferecem condições mais propícias para reprodução e debugging, porém, dificilmente você vai conseguir relacionar esses dados com as KPIs do negócio.
Os dados de campo ou RUM (Real User Monitoring), capturam resultados do mundo real e são facilmente conectados às KPIs do negócio, mas, apresentam um ser de métricas e uma capacidade de debugging restrita.
Quando devemos usar os dados de laboratório?
No desenvolvimento de novos recursos. Antes de um recurso estar em produção será impossível testar suas características em campo.
Quando devemos usar os dados de campo?
Para determinar o real impacto para os usuários.
Velocidade de carregamento percebida: a rapidez com que uma página pode carregar e renderizar todos os seus elementos visuais na tela.
Responsividade de carga: a rapidez com que uma página pode carregar e executar qualquer código JavaScript necessário para que os componentes respondam rapidamente à interação do usuário
Responsividade do tempo de execução: após o carregamento da página, com que rapidez a página pode responder à interação do usuário.
Estabilidade visual: os elementos na página mudam de maneiras que os usuários não esperam e potencialmente interferem em suas interações?
Suavidade: as transições e animações são renderizadas numa taxa de quadros consistente e fluem com fluidez de um estado para o outro?
Métricas
First contentful paint (FCP), ou primeira renderização de conteúdo, mede o tempo desde o início do carregamento da página até o momento em que qualquer parte do conteúdo da página é renderizada na tela. (laboratório, campo)
Largest contentful paint (LCP), ou maior renderização de conteúdo mede o tempo desde o início do carregamento da página até o momento em que o maior bloco de texto ou elemento de imagem é renderizado na tela. (laboratório, campo)
Métricas
Métricas
Cumulative layout shift (CLS), ou mudança de layout cumulativa, mede a pontuação cumulativa de todas as mudanças de layout inesperadas que ocorrem entre quando a página começa a ser carregada e quando seu estado de ciclo de vida muda para "oculta". (laboratório, campo)
First input delay (FID), ou atraso na primeira entrada, mede o tempo desde quando um usuário interage pela primeira vez com seu site (ou seja, quando ele clica num link, toca em um botão ou usa um controle personalizado em JavaScript) até o momento em que o navegador seja capaz de responder a essa interação. (campo)
Métricas
Time to Interactive (TTI), ou tempo até interatividade, mede o tempo desde o início do carregamento da página até o momento em que é renderizada visualmente, seus scripts iniciais (se houver) tenham sido totalmente carregados e que seja capaz de responder de forma confiável e rápida à entrada do usuário. (laboratório)
Total blocking time (TBT), ou tempo total de bloqueio mede a quantidade total de tempo entre a FCP e a TTI onde a thread principal foi bloqueada por tempo suficiente para evitar a responsividade de entrada. (laboratório)
Métricas
Nova métrica
INP - Interaction to Next Paint
A Métrica INP substituirá a FID em março de 2024 de forma definitiva - Mas, o que a INP mede?
Resumidamente ela mede: o quão rápido uma página responde a interação do usuário. Ela observa a latência de todas as interações feitas por um usuário com a página, e reporta um único valor ou todos que estiverem abaixo do esperado.
O que pode ser considerada uma interação? Clique em um botão ou em qualquer item de ação, tap, ponteirup, pointerdown e outras. Scrolling não é calculado na INP.
A INP considera todas as interações enquanto a FID, apenas a primeira interação.
Métricas
Quais a métricas utilizar no dia a dia para entender o usuário e gerar impacto no negócio:
Métricas para testes e principalmente para ambientes de homologação:
Métricas
Mensurar
Mensurar para priorizar
02
ERROS
Quando falamos de mensuração em performance, falamos de um cenário ainda sem muitas regras.
Por isso, evite cometer os erros abaixo:
Fazer medições sem objetivo algum em várias ferramentas, sem histórico, sem horário ou data;
Medir e mensurar sem levar em consideração os pontos principais do negócio;
Não utilizar nenhuma metodologia;
Enviesar os dados;
Focar apenas na mensuração da hipótese que se quer provar;
Ferramentas
Estamos medindo mas, como podemos mensurar e extrair o melhor dos dados?
Abaixo temos algumas ferramentas para mensurar as nossas métricas já definidas:
Use o Search Console - Relatório do Core Web Vitals, para identificar grupos de páginas que precisam de atenção. ( Baseado no relatório de campo).
Vale verificar dentro desse grupo, as páginas que são mais importantes para o negócio, isso irá ajudar na priorização.
Search Console
Já selecionado o grupo prioritário de páginas, usando o dados de campo do Page Speed Insights conseguimos partir para mensuração usando alguns critérios:
Verifique no Analytics, os horários com mais acessos no seu site;
Todos os dias, nos horários selecionados acima, faça a verificação no PSI e colete os resultados dos dados de campo;
Leve os dados para um planilha, gerando assim, histórico.
Page Speed Insights
O site é muito grande e precisa ser testado no hora a hora ou todos os dias em diversos horários?
O Two minute Report se conecta com a API do PSI, gerando relatórios automáticos com a mensuração das métricas que definimos para o projeto.
Two Minute Reports
Para identificar itens a serem corrigidos com o foco em dados de laboratório, o Lighthous e o Chrome Devtools podem ajudar.
Particularmente, eu prefiro simplificar e utilizar apenas as fontes de dados de campo para criar o meu contexto de trabalho com performance no dia a dia.
Lighthouse e Chrome DevTools
O CrUX está disponível para se conectar automaticamente ao seu site, ele serve para montar um dashboard de dados de campo do site e nos ajuda a entender quantos % está compatível com as boas práticas de desempenho do Google em parceria com a W3C.
CrUX
Priorização
Depois de medir e mensurar, chegou a hora de priorizar as tarefas na prática
03
Priorizar
Mais importante do que medir e mensurar é saber priorizar de acordo com os objetivos do negócio. Abaixo, temos um funil que pode ser aplicado a qualquer negócio:
Descoberta
Otimize o primeiro carregamento
Métricas como: LCP/ FCP/ FID —>INP
Engajamento
Otimize o tempo de navegação
Métricas como: FID —>INP e CLS
Conversão
Otimize o tempo de navegação
Métricas como: FID —>INP e CLS
Re-engajamento
Otimize para o recarregamento da página ou cache para re-entrada
Entendendo as etapas
Descoberta → O usuário não quer encontrar um site que fique em branco muito tempo, que não carrega ou que não responda rapidamente quando ele interage, por isso, aqui, o importante é focar na primeira entrega.
Engajamento → Depois que os usuários entram no site, precisamos fazer com que eles fiquem e cheguem até a conversão. No Analytics, conseguimos analisar os drop-offs ou seja, onde os usuários estão deixando o site sem converter e a partir daí, podemos analisar as métricas como FID/INP e CLS, por exemplo.
Conversão → Para um usuário chegar até a conversão ele espera:
Que as imagens carregam rápido,
Que o site responda rápido as interações;
Que as páginas sejam responsivas;
E que o layout não mude subitamente.
Precisamos manter a qualidade no desempenho e garantir que métricas como INP e CLS estejam de acordo com as boas práticas.
Re-engajamento → Aqui, temos boas práticas de cookies e cache que devem ser aplicadas, principalmente quando falamos de e-commerces.
Priorizando na prática
Analise o seu site a partir do seu caminho feliz ou caminho de sucesso - ou templates, páginas, cluster dentro do blog;
Verifique as suas métricas dentro desse caminho de sucesso - Métricas de Desempenho e de negócio;
Mensure as métricas aplicando o funil de otimização de desempenho;
Trace objetivos reais por exemplo - se seu LCP está em 10s, não espere chegar a 2,5s na primeira semana ou na primeira sprint, busque sempre baixar em pelo menos 20%, pois, é quando o usuário sente a mudança;
Ao otimizar uma das métricas, você pode otimizar várias etapas do funil de uma única vez;
Priorizando na prática
No meu caminho feliz ou caminho ideal para chegar até onde desejo, podemos seguir da seguinte forma:
Obrigado(a)!
Foto
Rosana
Amaral