# Em performance Web, o que é velocidade?

> Performance web: entenda a importância da velocidade em sites. Impacto direto em UX, conversão, SEO e sucesso de negócios digitais. Otimize já!

URL: https://dpw.dev/ui-ux/performance-web-velocidade/  
Publicado em: 2020-09-10  
Categoria: ui-ux  
Tags: performance  
Autor: Tárcio Zemel

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](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics); 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:

![Performance Web: feedbacks de performance comuns.](/images/blog/performance-web-velocidade/speed-feedback-1024x237.webp)

As métricas de desempenho tradicionais, como tempo de carregamento ou tempo de [DOMContentLoaded](/javascript/como-loading-de-javascript-funciona-domcontentloaded-e-onload/) 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:

![Métricas adicionais de performance Web.](/images/blog/performance-web-velocidade/speed-metrics_-1024x837.webp)

É 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](https://web.dev/speed-index) e [Lighthouse](https://developers.google.com/web/tools/lighthouse/v3/scoring) 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](https://developers.google.com/web/tools/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)](https://developers.google.com/web/tools/chrome-user-experience-report/). Fornece métricas que mostram como quem usa o navegador Chrome no mundo real experimenta destinos populares na Web;
- [PageSpeed Insights](https://developers.google.com/speed/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](https://developers.google.com/web/tools/chrome-devtools/). 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](https://web.dev/performance-budgets-101), assim como [um guia que descreve como estimular a cultura de performance](https://web.dev/how-to-report-metrics/) e tornar as métricas de velocidade tangíveis para todas as partes interessadas.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml