Já é ponto pacífico entre devs que velocidade é importante em projetos Web, mas o quê exatamente queremos dizer com isso? Em performance Web, o quê realmente significa ter um site/app rápido?
É comum ouvir pessoas falando em termos de carregamento de seu site em “X segundos” ou algo semelhante, mas carregamento não é um único momento no tempo; em performance na Web, é uma experiência que nenhuma métrica pode capturar totalmente.
Ao invés de medir o load com apenas uma métrica, é preciso cronometrar cada momento durante a experiência que afeta a percepção do visitante sobre a velocidade de carregamento.
Quando alguém navega por uma página web, normalmente está procurando por determinados tipos de feedback:
As métricas de desempenho tradicionais, como tempo de carregamento ou tempo de DOMContentLoaded não são confiáveis, uma vez que sua ocorrência pode ou não corresponder a esses marcos de feedback.
Por isso, surgiram métricas adicionais que podem ser usadas para entender quando uma página fornece este feedback para seus visitantes:
É importante entender os diferentes insights oferecidos por essas métricas de performance Web e, em seguida, estabelecer aqueles que são importantes para a UX. Algumas marcas (brands) até definem métricas personalizadas adicionais específicas às expectativas que as pessoas têm de seu serviço.
No caso do Pinterest, por exemplo, as pessoas desejam ver as imagens, por isso, definiram uma métrica personalizada, Pinner Wait Time (Tempo de Espera do Pinner), que combina o tempo de interação e os tempos de carregamento da imagem acima da dobra.
Mesmo que o load seja mais de um momento no tempo, ainda pode ser útil ter uma única métrica para fins de relatório ou comparação simplificados: Speed Index e Lighthouse podem ser usados dessa maneira.
Como medir a velocidade?
O desempenho no mundo real é altamente variável devido às diferenças nos dispositivos de acesso, conexões de rede e outros fatores. Por exemplo, se você carregar seu site usando uma conexão de rede a cabo em seu escritório e compará-lo com o acesso via Wi-Fi em uma cafeteria, as experiências provavelmente serão muito diferentes.
Existem muitas ferramentas no mercado que podem ajudar a coletar dados de laboratório ou de campo para avaliar o desempenho de uma página.
Dados de laboratório vs. Dados de campo
Os dados de laboratório (Lab Data) são dados de performance coletados em um ambiente controlado, com dispositivos e configurações de rede predefinidos, enquanto dados de campo (Field Data) são dados de desempenho coletados de carregamentos de páginas reais, experimentados por pessoas comuns fazendo os acessos.
Cada tipo tem seus próprios pontos fortes e limitações.
Lab Data
Lab Data oferece resultados reproduzíveis e um ambiente de depuração, mas pode não capturar gargalos do mundo real e não pode ser correlacionados com KPIs de página do mundo real.
Com os dados de laboratório, é preciso entender os dispositivos e redes típicos de seus usuários e espelhar adequadamente essas condições ao testar o desempenho.
Tenha em mente que, mesmo em áreas com 4G, as pessoas ainda podem experimentar conexões mais lentas ou intermitentes quando em elevadores, durante o trajeto ou em ambientes semelhantes.
Field Data
Também chamado de Real User Monitoring ou RUM, Field Data captura a verdadeira UX do mundo real e permite a correlação com KPIs de negócios — embora tenha um conjunto restrito de métricas e recursos de debug limitados.
Ferramentas para medir performance Web
Quando se trata de aferir a performance de sites e apps, existem muitas ferramentas disponíveis para cenários variados.
Algumas são destinadas a Lab data; outras, field data; ainda, as para ambos os tipos.
- Lighthouse. Pega um URL e executa uma série de auditorias na página, gerando um relatório de performance da mesma;
- Chrome User Experience Report (CrUX). Fornece métricas que mostram como quem usa o navegador Chrome no mundo real experimenta destinos populares na Web;
- PageSpeed Insights. Usa o Lighthouse para coletar e analisar lab data sobre a página, enquanto os field data são baseados no Chrome User Experience Report do Chrome;
- Chrome Developer Tools. Conjunto de ferramentas de desenvolvedor integradas diretamente no navegador Google Chrome. Permite traçar o perfil do tempo de execução de uma página, bem como identificar e depurar gargalos de desempenho.
Como permanecer rápido?
As marcas (brands) que otimizam a velocidade geralmente descobrem que regredem rapidamente. Isso acontece porque trabalhar com desempenho de sites é muito parecido com entrar em forma: não é suficiente fazer um esforço único; é preciso mudar o estilo de vida.
Os orçamentos de desempenho (performance budgets) são uma forma de resolver isso. Um orçamento de desempenho é um conjunto de limites de métricas que afetam o desempenho de um site/app. O conceito é semelhante a um orçamento financeiro: você define um limite e se certifica de mantê-lo.
Em geral, um bom orçamento de desempenho combina diferentes tipos de métricas; então, por exemplo, o orçamento de desempenho para uma página de produto pode ser o seguinte:
| Time To Interactive (TTI) em 3G lento | menor que | 5 segundos |
| First Contentful Paint (FCP) em 3G lento | menor que | 2 segundos |
| Nota do Lighthouse | maior que | 80 |
| Tamanho total do JavaScript | menor que | 170KB |
Uma vez definido, um orçamento de desempenho deve ser aplicado, o que significa, por exemplo, incorporar o orçamento em seu processo de build e relatórios.
Ferramentas como o Lighthouse podem ser incluídas em sua integração contínua, tornando possível fazer testes que falham em um build se as principais métricas ficarem abaixo de um limite definido.
Além disso, relatórios regulares por meio de painéis ou relatórios resumidos podem ajudar com visibilidade e responsabilidade. O Pinterest é um exemplo de empresa que implementou orçamentos de desempenho para garantir que sua experiência rápida permaneça rápida.
É possível encontrar mais detalhes sobre orçamentos de desempenho, assim como um guia que descreve como estimular a cultura de performance e tornar as métricas de velocidade tangíveis para todas as partes interessadas.