Use ferramentas para medir o desempenho

Há vários objetivos principais na construção de um site resiliente com baixo custo de dados.

Para cada objetivo, é necessária uma auditoria.

Objetivo Por quê? O que testar?
Garantir a privacidade, a segurança e a integridade dos dados e permitir o uso de APIs eficientes Por que usar o HTTPS? HTTPS implementado em todas as páginas/rotas do site e recursos.
Melhorar a performance de carregamento 53% dos usuários abandonam sites que demoram mais de três segundos para carregar. JavaScript e CSS que podem ser carregados de forma assíncrona ou adiada. Defina metas para o tempo de interação e o tamanho do payload, por exemplo, TTI em 3G. Defina um orçamento de performance.
Reduzir o peso da página • Reduzir o custo de dados para usuários com planos de dados limitados • Reduzir os requisitos de armazenamento de apps da Web, o que é especialmente importante para usuários com dispositivos de baixa especificação • Reduzir os custos de hospedagem e veiculação • Melhorar a performance, a confiabilidade e a resiliência da veiculação Defina um orçamento de peso da página: por exemplo, o primeiro carregamento com menos de 400 KB. Verifique se há JavaScript pesado. Verifique os tamanhos dos arquivos para encontrar imagens, mídia, HTML, CSS e JavaScript inchados. Encontre imagens que podem ser carregadas de forma lenta e verifique se há código não utilizado com ferramentas de cobertura.
Reduzir solicitações de recursos • Reduza problemas de latência • Reduza os custos de veiculação • Melhora a performance, a confiabilidade e a resiliência da veiculação Procure solicitações excessivas ou desnecessárias para qualquer tipo de recurso. Por exemplo: arquivos carregados repetidamente, JavaScript carregado em várias versões, CSS que nunca é usado, imagens que nunca são visualizadas (ou que podem ser carregadas lentamente).
Otimizar o uso da memória A memória pode se tornar o novo gargalo, especialmente em dispositivos móveis. Use o Gerenciador de tarefas do Chrome para comparar seu site com outros em relação ao uso de memória ao carregar a página inicial e usar outros recursos do site.
Reduzir a carga da CPU Os dispositivos móveis têm CPU limitada, especialmente os dispositivos de baixa especificação. Verifique se há JavaScript pesado. Encontre JavaScript e CSS não usados com ferramentas de cobertura. Verifique se há tamanho excessivo de DOM e scripts que são executados desnecessariamente no primeiro carregamento. Procure JavaScript carregado em várias versões ou bibliotecas que poderiam ser evitadas com uma pequena refatoração.

Há uma ampla variedade de ferramentas e técnicas para auditar sites:

  • Ferramentas do sistema
  • Ferramentas integradas do navegador
  • Extensões do navegador
  • Aplicativos de teste on-line
  • Ferramentas de emulação
  • Analytics
  • Métricas fornecidas por servidores e sistemas de negócios
  • Gravação de tela e vídeo
  • Testes manuais

Confira abaixo qual abordagem é relevante para cada tipo de auditoria.

Solicitações de recursos de registro: número, tamanho, tipo e tempo

Uma boa maneira de começar a auditoria de um site é verificar as páginas com as ferramentas de rede do navegador. Se você não souber como fazer isso, consulte o guia de início rápido do painel de rede do Chrome DevTools. Ferramentas semelhantes estão disponíveis para Firefox, Safari, Internet Explorer e Edge.

Lembre-se de manter um registro dos resultados antes de fazer alterações. Para solicitações de rede, isso pode ser tão simples quanto uma captura de tela. Você também pode salvar dados de perfil como um arquivo JSON. Veja abaixo mais informações sobre como salvar e compartilhar resultados de testes.

Antes de começar a auditoria do uso da rede, desative o cache do navegador para garantir estatísticas precisas da performance do primeiro carregamento. Se você já faz o armazenamento em cache usando um service worker, limpe o armazenamento da API Cache. Use uma janela anônima para não precisar desativar o cache do navegador ou remover entradas armazenadas anteriormente.

Confira alguns recursos e métricas principais que você precisa verificar com as ferramentas do navegador:

  • Desempenho de carregamento: o Lighthouse oferece um resumo das métricas de carregamento. Addy Osmani escreveu um ótimo resumo dos momentos importantes do usuário para o carregamento da página.
  • Eventos da linha do tempo para carregar e analisar recursos e uso de memória. Se quiser ir mais a fundo, execute a memória e criação de perfil do JavaScript.
  • Peso total da página e número de arquivos.
  • Número e peso dos arquivos JavaScript.
  • Quaisquer arquivos JavaScript individuais grandes, por exemplo, com mais de 100 KB.
  • JavaScript não utilizado. Você pode verificar usando a ferramenta de cobertura do Chrome.
  • Número total e peso dos arquivos de imagem.
  • Arquivos de imagem individuais muito grandes.
  • Formatos de imagem: há PNGs que podem ser JPEGs ou SVGs? O WebP é usado com substitutos?
  • Indica se técnicas de imagem responsivas (como srcset) são usadas.
  • Tamanho do arquivo HTML.
  • Número total e peso dos arquivos CSS.
  • CSS não usado. No Chrome, use o painel de cobertura.
  • Verifique se há uso problemático de outros recursos, como fontes da Web (incluindo fontes de ícones).
  • Verifique a linha do tempo do DevTools para encontrar o que está bloqueando o carregamento da página.

Se você estiver trabalhando com Wi-Fi rápido ou uma conexão celular rápida, faça o teste com baixa largura de banda e emulação de alta latência. Não se esqueça de testar em dispositivos móveis e computadores. Alguns sites usam o sniffing do UA para exibir recursos e layouts diferentes para dispositivos diferentes. Talvez seja necessário testar em hardware real usando a depuração remota, não apenas com a simulação de dispositivo.

Verificar a carga de memória e CPU

Antes de fazer alterações, mantenha um registro do uso da memória e da CPU.

No Chrome, você pode acessar o Gerenciador de tarefas no menu "Janela". Essa é uma maneira simples de verificar os requisitos de uma página da Web.

Gerenciador de tarefas do Chrome mostrando o uso de memória e CPU para
  as quatro guias abertas do navegador
Gerenciador de tarefas do Chrome: cuidado com a memória e a CPU!

Testar a performance de carga inicial e subsequente

O Lighthouse, o WebPagetest e os Insights sobre velocidade de página são úteis para analisar a velocidade, o custo de dados e o uso de recursos. O WebPagetest também verificará o armazenamento em cache de conteúdo estático, o tempo até o primeiro byte e se o site faz uso eficaz de CDNs.

Salvar os resultados

Testar os requisitos principais do Progressive Web App

O Lighthouse ajuda a testar segurança, funcionalidade, acessibilidade, desempenho e desempenho do mecanismo de pesquisa. Especificamente, o Lighthouse verifica se o site implementa os recursos de PWA, como service workers e um manifesto de app da Web.

O Lighthouse também testa se seu site pode oferecer uma experiência off-line aceitável.

Você pode fazer o download de um relatório do Lighthouse como JSON ou, se estiver usando a extensão do Chrome do Lighthouse, compartilhar o relatório como um GitHub Gist: clique no botão de compartilhamento, selecione "Abrir no visualizador" e clique no botão de compartilhamento novamente na nova janela e salve como Gist.

Captura de tela mostrando como exportar um relatório do Lighthouse
  do Chrome como um resumo
Exportar um relatório para um resumo da extensão do Chrome do Lighthouse: clique no botão "Compartilhar"

Usar análises, acompanhamento de eventos e métricas de negócios para acompanhar a performance real

Se possível, mantenha um registro dos dados de análise antes de implementar as mudanças: taxas de rejeição, tempo na página, páginas de saída e tudo o que for relevante para os requisitos de negócios.

Se possível, registre as métricas de negócios e técnicas que podem ser afetadas para comparar os resultados depois de fazer mudanças. Por exemplo, um site de e-commerce pode acompanhar os pedidos por minuto ou registrar estatísticas para testes de estresse e resistência. Os custos de armazenamento de back-end, os requisitos de CPU, os custos de veiculação e a resiliência provavelmente vão melhorar se você reduzir o peso da página e as solicitações de recursos.

Se a análise não estiver implementada, agora é a hora! As métricas e análises de negócios são o árbitro final para determinar se o site está funcionando ou não. Se apropriado, incorpore o rastreamento de eventos para ações do usuário, como cliques em botões e exibições de vídeo. Também convém implementar a análise de fluxo da meta, ou seja, os caminhos pelos quais seus usuários navegam até "conversões".

Você pode acompanhar a velocidade do site no Google Analytics para verificar como as métricas de performance se correlacionam com as métricas de negócios. Por exemplo: "Com que rapidez a página inicial foi carregada?" em comparação com "A entrada pela página inicial resultou em uma venda?"

Captura de tela mostrando a velocidade do site no Google Analytics

O Google Analytics usa dados da API Navigation Timing.

Você pode registrar dados usando uma das APIs de performance do JavaScript ou suas próprias métricas, por exemplo:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

Também é possível usar o ReportingObserver para verificar avisos de descontinuação e intervenção do navegador. Essa é uma das muitas APIs para receber medições reais e em tempo real de usuários reais.

Experiência do mundo real: gravação de tela e vídeo

Faça uma gravação de vídeo do carregamento da página em dispositivos móveis e computadores. Isso funciona ainda melhor em altas taxas de quadros por segundo e se você adicionar uma tela de timer.

Você também pode salvar screencasts. Existem muitos apps de gravação de screencast para plataformas Android, iOS e computadores (e scripts para fazer o mesmo).

O carregamento da página de gravação de vídeo funciona de forma semelhante à visualização de filme no WebPagetest ou Capturar capturas de tela no Chrome DevTools. Você recebe um registro real da velocidade de carregamento dos componentes da página: o que é rápido e o que é lento. Salve gravações de vídeo e screencasts para comparar com as melhorias posteriores.

Uma comparação lado a lado de antes e depois pode ser uma ótima maneira de demonstrar melhorias.

O que mais?

Se for relevante, confira a pontuação de inchaço da Web. Esse é um teste divertido, mas também pode ser uma maneira atraente de demonstrar o excesso de código ou de mostrar que você fez melhorias.

O site What Does My Site Cost?, mostrado abaixo, oferece um guia aproximado do custo financeiro de carregamento do site em diferentes regiões.

Captura de tela do site whatdoesmysitecost.com

Muitas outras ferramentas autônomas e on-line estão disponíveis: dê uma olhada em perf.rocks/tools.