Use ferramentas para medir o desempenho

Sam Dutton

Há vários objetivos principais para criar um site resiliente e com bom desempenho e baixo custo de dados.

Para cada objetivo, é necessária uma auditoria.

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

• Ferramentas do sistema
• Ferramentas integradas do navegador
• Extensões do navegador
• Testes 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

Abaixo, você vai aprender 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.

Mantenha um registro dos resultados antes de fazer mudanças. 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. Confira abaixo mais informações sobre como salvar e compartilhar os resultados do teste.

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 (privada) 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.
• Qualquer arquivo JavaScript individual particularmente grande (mais de 100 KB).
• JavaScript não usado. 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?
• Se técnicas de imagem responsiva (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 uma conexão Wi-Fi ou celular rápida, teste com baixa largura de banda e alta latência. Não se esqueça de testar em dispositivos móveis e computadores. Alguns sites usam o sniffing do UA para fornecer diferentes recursos e layouts para diferentes dispositivos. 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 mudanças, 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.

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 velocidade, custo de dados e uso de recursos. O WebPagetest também verifica o armazenamento em cache de conteúdo estático, o tempo até o primeiro byte e se o site usa CDNs de maneira eficaz.

Salvar os resultados

• WebPagetest: os resultados de cada teste têm um URL próprio.
• PageSpeed Insights: a ferramenta on-line PageSpeed Insights agora inclui dados do relatório de experiência do usuário do Chrome que destacam as estatísticas de desempenho do mundo real.
• Lighthouse: salve relatórios do painel de auditoria do Chrome DevTools clicando no botão de download:

  

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 o 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.

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. Você também pode implementar a análise de fluxo de meta, que são os caminhos pelos quais os usuários navegam em direção às "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 carregou?" em comparação com "A entrada pela página inicial resultou em uma venda?"

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 se há 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. Há 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 maneira semelhante à visualização de filme no WebPagetest ou Capturar capturas de tela no Chrome DevTools. Você recebe um registro real da velocidade de carregamento do componente 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 interessante de demonstrar o inchaço do código ou 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.

Muitas outras ferramentas independentes e on-line estão disponíveis: confira perf.rocks/tools.