Ao definir um orçamento pessoal, empresarial ou familiar, você estabelece um limite para seus gastos e garante que não vai ultrapassá-lo. Os orçamentos de performance funcionam da mesma forma, mas para métricas que afetam o desempenho do site.
Com um orçamento de performance estabelecido e aplicado, você pode ter certeza de que seu site será renderizado o mais rápido possível. Isso vai proporcionar uma experiência melhor para os visitantes e impactar positivamente as 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 atual, comece identificando as páginas mais importantes. Por exemplo, páginas com o maior 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ê encontra o Lighthouse. Execute auditorias em cada página em uma janela de navegação anônima para registrar estes dois horários:
Vamos usar um mecanismo de pesquisa altamente especializado, o Doggos.com, como exemplo. O Doggos.com tem como objetivo indexar tudo relacionado a cachorros na Internet, e as páginas mais importantes são a inicial e a de resultados. Confira 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 dos concorrentes. Comparar resultados de sites semelhantes ao seu é uma ótima maneira de definir um orçamento de performance. Essa é uma etapa importante, seja para um projeto estabelecido ou para um novo. Você ganha vantagem competitiva quando é mais rápido que seus concorrentes.
Se você não souber quais sites consultar, confira algumas ferramentas para testar:
- Palavra-chave "related:" da Pesquisa Google
- Recurso Sites semelhantes da Alexa
- SimilarWeb
Para ter uma ideia realista, tente encontrar cerca de 10 concorrentes.
Orçamento para marcos de tempo
Neste exemplo, nosso mecanismo de pesquisa de nicho tem alguns concorrentes, e vamos focar na otimização da página inicial para dispositivos móveis. Hoje, mais da metade do tráfego da Internet acontece em redes móveis, e usar números de celular como padrão vai beneficiar não apenas os usuários de dispositivos móveis, mas também os de computadores.
Crie um gráfico com os tempos de FCP e TTI de todos os sites semelhantes e destaque o mais rápido. Um gráfico como este dá uma ideia mais clara de como seu site está em comparação com a 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%. A pesquisa afirma que os usuários reconhecem uma diferença nos tempos de resposta quando ela é maior que 20%. Isso significa que, se você quiser ser visivelmente melhor do que o melhor site comparável, precisa ser pelo menos 20% mais rápido.
| Medir | Hora atual | Orçamento (20% mais rápido 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 atual, essa meta pode parecer impossível de alcançar. Isso não é um sinal para você desistir. Comece com pequenas etapas 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 pode ter esta aparência.
| Medir | Hora atual | Orçamento inicial (20% mais rápido que o tempo atual) | Meta de longo prazo (20% mais rápido 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 das etapas e agora vamos adicionar mais dois:
- métricas baseadas em quantidade
- métricas baseadas em regras
Orçamento para métricas baseadas em quantidade
Qualquer que seja o peso total da página, tente entregar menos de 170 KB de recursos de caminho crítico (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 no computador, 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 com boa performance, você precisa mirar bem abaixo desses números medianos.
Confira alguns exemplos com base nos orçamentos de TTI:
| Rede | Dispositivo | JS | Imagens | CSS | HTML | Fontes | Total | Orçamento de Time to Interactive |
|---|---|---|---|---|---|---|---|---|
| Conexão 3G lenta | Moto G4 | 100 | 30 | 10 | 10 | 20 | Aprox. 170 KB | 5 s |
| Conexão 4G lenta | Moto G4 | 200 | 50 | 35 | 30 | 30 | ~345 KB | 3 seg |
| Wi-Fi | Computador | 300 | 250 | 50 | 50 | 100 | ~750 KB | 2 s |
Definir um orçamento com base em métricas de quantidade é complicado. Um site de e-commerce com muitas fotos de produtos é muito diferente de um portal de notícias, que é principalmente texto. Se você tiver anúncios ou análises no seu site, isso vai aumentar a quantidade de JavaScript que você está enviando.
Use a tabela acima como ponto de partida e ajuste com base no tipo de conteúdo com que você está trabalhando. Defina o que suas páginas vão incluir, revise sua pesquisa e faça uma estimativa para os tamanhos de recursos individuais. Por exemplo, se você estiver criando um site com muitas imagens, defina limites mais rígidos para o tamanho do JS.
Depois de ter um site funcionando, verifique seu desempenho nas métricas centradas no usuário e ajuste o orçamento.
Orçamento para métricas baseadas em regras
As pontuações do Lighthouse são métricas baseadas em regras muito eficazes. O Lighthouse classifica seu app em cinco categorias, e uma delas é a performance. As pontuações de desempenho são calculadas com base em cinco métricas diferentes, incluindo First Contentful Paint e Tempo para interação da página.
Ao tentar criar um site incrível, defina o orçamento da pontuação de performance do Lighthouse como pelo menos 85 (de 100). Use o Lighthouse CI para aplicar isso em solicitações de extração.
Priorizar
Pergunte a si mesmo qual nível de interação você espera no seu site. Se for um site de notícias, o objetivo principal dos usuários é ler conteúdo. Portanto, concentre-se em renderizar rapidamente e manter o FCP baixo. Os visitantes do Doggos.com querem clicar em links relevantes assim que possível. Por isso, a prioridade máxima é um TTI baixo.
Descubra exatamente qual parte do seu público navega em computadores e em dispositivos móveis e priorize de acordo. Uma maneira de descobrir isso é verificar o que seu público está fazendo nos sites dos concorrentes no painel do Chrome User Experience Report.
Próximas etapas
Verifique se o orçamento de performance é aplicado em todo o projeto e incorpore-o ao processo de build.