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:
- Primeira exibição de conteúdo (FCP, na sigla em inglês)
- Tempo para interação da página (TTI, na sigla em inglês)
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 |
| 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 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:
- Palavra-chave "relacionado:" da Pesquisa Google
- Recurso Sites semelhantes da Alexa
- SimilarWeb
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 |
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 |
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 |
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.
Próximas etapas
Verifique se o orçamento de desempenho foi aplicado em todo o projeto e incorpore-o ao seu processo de build.