Seu primeiro orçamento de performance

Ao definir um orçamento pessoal, empresarial ou familiar, você estabelece um limite para seus gastos e garante que ele não seja respeitado. Os orçamentos de desempenho funcionam da mesma maneira, mas para as métricas que afetam o desempenho do site.

Com um orçamento de desempenho estabelecido e aplicado, você pode ter certeza de que seu site será processado o mais rápido possível. Isso proporcionará uma experiência melhor para seus visitantes e um impacto positivo nas métricas de negócios.

Confira como definir seu primeiro orçamento de performance em algumas etapas simples.

Análise preliminar

Se você estiver tentando melhorar o desempenho de um site existente, comece identificando as páginas mais importantes. Por exemplo, podem ser páginas com a maior quantidade de tráfego de usuários ou uma página de destino de produto.

Depois de identificar as páginas principais, é hora de analisá-las. Primeiro, vamos nos concentrar nos marcos de tempo que melhor medem a experiência do usuário.

No painel "Auditorias" do Chrome DevTools, você encontrará o Lighthouse. Execute auditorias em cada página em uma janela de visitante para registrar duas vezes:

Painel do Lighthouse no Chrome DevTools

Vamos usar como exemplo um mecanismo de pesquisa altamente especializado, o Doggos.com. O objetivo do Doggos.com é indexar tudo relacionado a cães na internet, e suas páginas mais importantes são a página inicial e as páginas de resultados. Aqui estão os números de FCP e TTI medidos para o site em computadores e dispositivos móveis.

Computador First Contentful Paint (FCP) TTI
Página inicial 1.680 ms 5.550 ms
Página de resultados 2.060 ms 6.690 ms
Análise do site Doggos.com em computadores
Dispositivo móvel First Contentful Paint (FCP) TTI
Página inicial 1.800 ms 6.150 ms
Página de resultados 1.100 ms 7.870 ms
Análise de Doggos.com para dispositivos móveis

Análise da concorrência

Depois de analisar seu próprio site, é hora de analisar os sites de seus concorrentes. Comparar resultados de sites semelhantes ao seu é uma ótima maneira de descobrir um orçamento de performance. Este é um passo importante, quer você esteja trabalhando em um projeto estabelecido ou começando do zero. Você consegue vantagem competitiva quando é mais rápido que seus concorrentes.

Se você não tem certeza de quais sites consultar, teste estas ferramentas:

  1. Palavra-chave "relacionado:" da Pesquisa Google
  2. Recurso Sites semelhantes da Alexa
  3. SimilarWeb

Captura de tela da Pesquisa Google com a palavra-chave relacionada

Para ter uma imagem realista, tente encontrar cerca de 10 concorrentes.

Orçamento para marcos de tempo

Neste exemplo, nosso mecanismo de pesquisa de nicho tem vários concorrentes, e vamos nos concentrar em otimizar a página inicial para dispositivos móveis. Atualmente, mais de metade do tráfego da Internet ocorre em redes móveis, e usar números de celular como padrão beneficia não apenas seus usuários de dispositivos móveis, mas também os usuários de computadores.

Crie um gráfico com tempos FCP e TTI para todos os sites semelhantes e destaque o mais rápido no grupo. Um gráfico como este oferece uma imagem mais clara do desempenho do seu site em comparação com o da concorrência.

Site/página inicial First Contentful Paint (FCP) TTI
goggles.com 880 ms 3.150 ms
Doggos.com 1.800 ms 6.500 ms
quackquackgo.com 2.680 ms 4.740 ms
ding.xyz 2.420 ms 7.040 ms
Análise competitiva da Doggos.com na rede 3G
Cachorro em um computador
O Doggos.com parece estar indo bem na métrica da FCP, mas está seriamente atrasado no TTI

Há espaço para melhorias, e uma boa diretriz para isso é a regra dos 20%. Pesquisas afirmam que os usuários reconhecem uma diferença nos tempos de resposta quando ela é maior que 20%. Isso significa que, para alcançar uma performance visivelmente melhor do que o site com melhor desempenho, você precisa ser pelo menos 20% mais rápido.

Medida Hora atual Orçamento (20% mais rápido do que a concorrência)
First Contentful Paint (FCP) 1.800 ms 704 ms
TTI 6.500 ms 2.520 ms
Orçamento de performance que deixaria a Doggos.com à frente da concorrência

Se você estiver tentando otimizar um site existente, essa meta pode parecer impossível de alcançar. Isso não é um sinal para desistir. Comece com pequenos passos e defina um orçamento 20% mais rápido do que sua velocidade atual. Continue otimizando a partir daí.

Para Doggos.com, um orçamento revisado poderia ser assim.

Medida Hora atual Orçamento inicial (20% mais rápido do que o período atual) Meta de longo prazo (20% mais rápida que a concorrência)
First Contentful Paint (FCP) 1.800 ms 1.440 ms 704 ms
TTI 6.500 ms 5.200 ms 2.520 ms
Orçamento de performance revisado do Doggos.com

Combinar métricas diferentes

Um orçamento de performance sólido combina diferentes tipos de métricas. Já definimos o orçamento para os prazos de marco e agora vamos adicionar mais dois:

  • métricas com base na quantidade
  • métricas com base em regras

Fazer o orçamento para métricas com base na quantidade

Independente do peso total da página que você tenha, tente oferecer menos de 170 KB de Critical-path recursos (compactados/minificados). Isso garante que seu site seja rápido mesmo em dispositivos baratos e 3G lento.

Você pode ter um orçamento maior para a experiência em computadores, mas não exagere. O peso médio da página em computadores e dispositivos móveis é superior a 1 MB, de acordo com os dados do HTTP Archive do ano passado. Para ter um site de alto desempenho, você precisa definir um objetivo bem abaixo desses números da mediana.

Veja alguns exemplos com base nos orçamentos de TTI:

Rede Dispositivo JS Imagens CSS HTML Fontes Total Orçamento de tempo para interação da página
Conexão 3G lenta MOTO G4 100 30 10 10 20 Aprox. 170 KB 5 s
4G lento MOTO G4 200 50 35 30 30 Aprox. 345 KB 3 s
WiFi Computador 300 250 50 50 100 Aprox. 750 KB 2 s

Definir um orçamento com base em métricas de quantidade é um negócio complicado. Um site de comércio eletrônico com muitas fotos de produtos é muito diferente de um portal de notícias que é composto principalmente de texto. Se você tiver anúncios ou análises no seu site, isso aumentará a quantidade de JavaScript enviado.

Use a tabela acima como ponto de partida e faça ajustes com base no tipo de conteúdo com o qual você está trabalhando. Defina o que suas páginas vão incluir, revise sua pesquisa e tente um palpite em relação aos tamanhos de recursos individuais. Por exemplo, se você estiver criando um site com muitas imagens, defina limites mais rigorosos para o tamanho do JS.

Quando seu site estiver funcionando, confira o desempenho das métricas de performance centradas no usuário e ajuste o orçamento.

Orçamento para métricas com base em regras

Métricas muito eficazes com base em regras são as pontuações do Lighthouse. O Lighthouse classifica seu app em cinco categorias, e uma delas é o desempenho. As pontuações de desempenho são calculadas com base em cinco métricas diferentes, incluindo a primeira exibição de conteúdo e o tempo para interação da página.

Ao criar um site excelente, defina o orçamento de pontuação de desempenho do Lighthouse como pelo menos 85 (de 100). Use o Lighthouse CI para aplicá-lo em solicitações de envio.

Priorizar

Pergunte-se que nível de interação você espera em seu site. Se for um site de notícias, o objetivo principal dos usuários é ler o conteúdo. Por isso, você deve se concentrar na renderização rápida e em manter a FCP baixa. Os visitantes do Doggos.com querem clicar em links relevantes o mais rápido possível, então a prioridade é o TTI baixo.

Descubra exatamente que parte do seu público-alvo navega no computador ou em dispositivos móveis e priorize de acordo. Uma forma de descobrir isso é verificar o que seu público está fazendo nos sites dos concorrentes, usando o painel do Chrome User Experience Report.

Dados de distribuição de dispositivos do Relatório de experiência do usuário do Chrome
Dados de distribuição de dispositivos do relatório de experiência do usuário do Chrome

Próximas etapas

Verifique se o orçamento de desempenho foi aplicado em todo o projeto e incorpore-o ao seu processo de build.