Com a velocidade da página se tornando uma métrica importante para SEO e UX ao longo dos anos, o conceito de um orçamento de desempenho na web também veio à tona. É agora mais evidente que o desempenho web é um tema que requer uma perspectiva partilhada entre todos os departamentos, em vez de ser apenas a prioridade de um único departamento ou indivíduo.

Para explicar isso com um exemplo: os departamentos de marketing podem querer implementar conversões e códigos de remarketing/retargeting, junto com ferramentas como Criteo e RTB House, que usam retargeting baseado em produto. Eles também podem esperar fotos e animações atraentes. Enquanto isso, os departamentos de produtos podem solicitar a integração de ferramentas como Hotjar e clareza. Os departamentos de software, por outro lado, pretendem desenvolver o mais rápido possível tanto no frontend quanto no backend. A demanda e os custos associados a essas demandas de velocidade da página estão realmente equilibrados. O orçamento de desempenho web surgiu para estabelecer esse equilíbrio de forma eficaz.

Um orçamento de desempenho web envolve definir uma velocidade alvo para sua plataforma em uma plataforma específica e estabelecer metas numéricas que todas as partes interessadas irão aderir para atingir essa velocidade. Resumindo, o custo de ser rápido é o orçamento de desempenho web.

 

image-5.png
Fonte: https://wp-rocket.me/blog/performance-budgets/

 

Tudo começa com uma proposta. Você propõe a rapidez com que sua página deve abrir em um determinado tipo de conexão. Por exemplo, algumas propostas de orçamento de desempenho poderiam ser:

  • A página inicial pode abrir em menos de 2 segundos em uma conexão móvel 3G rápida (1.6 Mbps)?
  • A página de resultados da pesquisa pode abrir em menos de 5 segundos em uma conexão 3G lenta (780 Kbps)?

A seguir, você cria um plano de ação e submétricas para atingir essas proposições, dividindo-o em partes.

Além das propostas, pode haver outras metas orçamentárias de desempenho. Por exemplo:

  • Aumentando o farol móvel pontuação da página de detalhes acima de 80
  • Reduzindo o tamanho de todas as imagens no site para desktop abaixo de 500 KB

Métricas de orçamento de desempenho

Existem três perspectivas diferentes aceitas para determinar as métricas de um orçamento de desempenho:

Métricas baseadas em números

  • Número máximo de fontes/Tamanho máximo da fonte
  • Número máximo de imagens/Tamanho máximo da imagem
  • Número máximo de scripts, estilos, vídeos, etc. / Tamanho máximo de script, estilo, vídeo, etc.
  • Tamanho máximo do HTML
  • Número máximo de solicitações HTTP
  • Número máximo de scripts de terceiros

 

image-7.png
Fonte: https://web.dev/vitals/

 

Métricas baseadas no tempo

  • Primeira vez do Contentful Paint (FCP)
  • Maior tempo de pintura com conteúdo (LCP)
  • Tempo de atraso da primeira entrada (FID)
  • Tempo para interação (TTI)
  • Tempo total de bloqueio (TBT)
  • Pontuação cumulativa de mudança de layout (CLS)
  • Pontuação do índice de velocidade

Métricas baseadas em regras

  • Pontuação do farol
  • Pontuação GTmetrix
  • Pontuação do teste da página da web
  • Pontuação Yslow
calculadora de orçamento de desempenho.png
Fonte: https://www.performancebudget.io/

Ao definir seu orçamento de desempenho web, geralmente é recomendado combinar todas essas perspectivas na medida certa, em vez de escolher apenas uma. Você pode usar o simulador de orçamento de desempenho para encontrar os números necessários para atingir a velocidade desejada.

Avalie os tipos de página separadamente

Um ponto crucial na hora de determinar o orçamento de desempenho é não baseá-lo em uma única página do site. Um erro comum é testar apenas a página inicial, o que leva a uma avaliação incompleta.

Você deve começar examinando a plataforma e identificando os diferentes tipos de páginas. Em seguida, analise o tráfego da plataforma para identificar as páginas que recebem mais tráfego e priorizá-las. O resultado será uma tabela semelhante a esta:

  • Página inicial
  • Páginas de listagem estáticas
  • Páginas de listagem dinâmica
  • Páginas de detalhes
  • Páginas de checkout
  • Páginas de resultados de pesquisa
  • Páginas de campanha
  • Páginas do blog

Você precisa se concentrar os orçamentos de desempenho desses tipos de página separadamente, com base nas prioridades.