O desempenho é uma parte importante da experiência do usuário e afeta as métricas de negócios. É tentador pensar que, se você for um bom desenvolvedor, terá um site com bom desempenho, mas a verdade é que um bom desempenho raramente é um efeito colateral. Como acontece com a maioria das outras coisas, para alcançar uma meta, você precisa defini-la claramente. Para começar, defina um orçamento de performance.
Definição
Um orçamento de desempenho é um conjunto de limites impostos às métricas que afetam o desempenho do site. Pode ser o tamanho total de uma página, o tempo que ela leva para carregar em uma rede móvel ou até mesmo o número de solicitações HTTP enviadas. Definir um orçamento ajuda a iniciar a conversa sobre desempenho na Web. Ele serve como ponto de referência para tomar decisões sobre design, tecnologia e adição de recursos.
Ter um orçamento permite que os designers pensem nos efeitos das imagens de alta resolução e no número de fontes da Web que eles escolhem. Ela também ajuda os desenvolvedores a comparar diferentes abordagens para um problema e avaliar frameworks e bibliotecas com base no tamanho e na análise de custo.
Escolher métricas
Métricas com base em quantidade ⚖️
Essas métricas são úteis nos estágios iniciais de desenvolvimento porque destacam o impacto da inclusão de imagens e scripts pesados. Eles também são fáceis de comunicar para designers e desenvolvedores.
Já mencionamos alguns itens que podem ser incluídos em um orçamento de desempenho, como peso da página e o número de solicitações HTTP, mas é possível dividi-los em limites mais granulares, como:
- Tamanho máximo das imagens
- Número máximo de fontes da Web
- Tamanho máximo de scripts, incluindo frameworks
- Número total de recursos externos, como scripts de terceiros
No entanto, esses números não dizem muito sobre a experiência do usuário. Duas páginas com o mesmo número de solicitações ou o mesmo peso podem ser renderizadas de forma diferente, dependendo da ordem em que os recursos são solicitados. Se um recurso crítico, como uma imagem hero ou uma folha de estilo em uma das páginas, for carregado com atraso no processo, os usuários vão esperar mais tempo para ver algo útil e notar que a página é mais lenta. Se na outra página as partes mais importantes carregarem rapidamente, eles podem nem notar se o resto da página não carregará.
Por isso é importante acompanhar outro tipo de métrica.
Marcações com prazos 🔘️
Os tempos de marco marcam eventos que ocorrem durante o carregamento da página, como o evento DOMContentLoaded ou load. Os momentos mais úteis são as métricas de performance centradas no usuário que informam algo sobre a experiência de carregar uma página. Essas métricas estão disponíveis nas APIs de navegador e como parte dos relatórios do Lighthouse.
A Primeira exibição de conteúdo (FCP, na sigla em inglês) mede quando o navegador exibe a primeira parte do conteúdo do DOM, como texto ou imagens.
O Tempo para interação (TTI, na sigla em inglês) mede quanto tempo leva para uma página se tornar totalmente interativa e responder de forma confiável à entrada do usuário. É uma métrica muito importante a ser acompanhada se você espera qualquer tipo de interação do usuário na página, como clicar em links, botões, digitar ou usar elementos de formulário.
Métricas com base em regras 💯
O Lighthouse e o WebPageTest calculam as pontuações de desempenho com base em regras gerais de práticas recomendadas, que você pode usar como diretrizes. Como bônus, o Lighthouse também oferece dicas para otimizações simples.
Você conseguirá os melhores resultados se acompanhar uma combinação de métricas de desempenho com base na quantidade e centradas no usuário. Concentre-se nos tamanhos dos recursos nas fases iniciais de um projeto e comece a monitorar a FCP e o TTI o mais rápido possível.
Definir um valor de referência
A única maneira de saber o que funciona melhor para seu site é experimentando: pesquisar e testar suas descobertas. Analise a concorrência para saber como você se compara. 🕵️
Se você não tiver tempo para isso, aqui estão bons números padrão para começar:
- Menos de 5 s de tempo para interação
- Menos de 170 KB de recursos de caminho crítico (compactados/minificados)
Esses números são calculados com base em dispositivos reais e na velocidade da rede 3G. Atualmente, mais da metade do tráfego da Internet acontece em redes móveis. Por isso, use a velocidade da rede 3G como ponto de partida.
Exemplos de orçamentos
É necessário ter um orçamento para diferentes tipos de página do site, já que o conteúdo varia. Exemplo:
- Nossa página de produto precisa enviar menos de 170 KB de JavaScript em dispositivos móveis.
- Nossa página de pesquisa precisa incluir menos de 2 MB de imagens em computadores
- Nossa página inicial precisa carregar e ficar interativa em menos de cinco segundos em uma conexão 3G lenta em um smartphone Moto G4
- Nosso blog precisa ter uma pontuação superior a 80 nas auditorias de desempenho do Lighthouse
Adicionar orçamentos de performance ao seu processo de criação
Escolher uma ferramenta para isso depende muito da escala do seu projeto e dos recursos que você pode dedicar à tarefa. Há algumas ferramentas de código aberto que podem ajudar você a adicionar orçamento ao seu processo de criação:
- Recursos de desempenho do Webpack
- bundlesize (em inglês)
- Lighthouse CI
Se algo ultrapassar um limite definido, você pode:
- Otimize um recurso atual 🛠️
- Remover um recurso existente 🗑️
- Não adicionar o novo recurso ✋⛔
Acompanhar o desempenho
Para garantir que seu site seja rápido o suficiente, você precisa continuar avaliando após o lançamento inicial. Monitorar essas métricas ao longo do tempo e receber dados de usuários reais mostra como as mudanças no desempenho afetam as principais métricas de negócios.
Conclusão
O objetivo de um orçamento de performance é garantir que você se concentre no desempenho em todo o projeto e configurá-lo com antecedência para evitar retornos posteriormente. Ele deve ser o ponto de referência para ajudar você a descobrir o que incluir no seu site. A ideia principal é definir metas para equilibrar melhor o desempenho sem prejudicar a funcionalidade ou a experiência do usuário.🎯
No próximo guia, vamos ajudar a definir seu primeiro orçamento de performance em algumas etapas simples.