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.

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 HTTPS?	HTTPS implementado para todas as páginas/rotas e recursos do site.
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 o tamanho excessivo do DOM e os 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
• 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.

Observação : as imagens representam, de longe, o maior peso e a maior quantidade de solicitações para a maioria das páginas da Web. A latência piora de acordo com a conectividade, então solicitações excessivas de arquivos de imagem são um problema cada vez maior conforme a Web ocupa o espaço móvel. As imagens também consomem energia: mais solicitações de imagem, mais uso de rádio, mais baterias esgotadas. A renderização de imagens consome energia, e esse consumo é proporcional ao tamanho e à quantidade de imagens. O mesmo vale para a memória: pequenos aumentos nas dimensões dos pixels resultam em grandes aumentos no uso de memória. Com imagens em dispositivos móveis, principalmente em dispositivos de baixa especificação, a memória pode se tornar o novo gargalo. Imagens inúteis também são problemáticas para usuários com planos de dados limitados. Remova imagens redundantes. Se não for possível se livrar deles, faça otimizações: aumente a compactação o máximo possível, reduza as dimensões dos pixels e use o formato que gera os menores tamanhos de arquivo. Otimizar as "imagens principais", como banners e planos de fundo, é uma vitória fácil e única.

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.

Observação : geralmente, é possível usar ferramentas do navegador para identificar problemas simplesmente verificando as respostas da rede e ordenando por tamanho. Por exemplo, o PNG de 349 KB parecia ser um problema:

A imagem tinha 1600 pixels de largura, enquanto a largura máxima de exibição do elemento era de apenas 400 pixels. Descomprimida, a imagem precisava de mais de 4 MB de memória, o que é muito para um smartphone. Salvar a imagem novamente como um JPEG de 800 pixels de largura (para lidar com a largura de exibição de 400 pixels em telas 2x) e otimizar com o ImageOptim resultou em um arquivo de 17 KB: compare o PNG original com o JPEG otimizado.

Isso é uma melhoria de 95%.

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.

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

Observação : é simples ativar o armazenamento em cache de conteúdo estático para que os navegadores armazenem em cache os recursos na primeira vez que forem solicitados. Para isso, configure o servidor para incluir os cabeçalhos apropriados. Se um navegador puder armazenar recursos em cache, ele não precisará mais extraí-los da rede em visitas subsequentes. Isso melhora a velocidade de carregamento, reduz o custo de dados e diminui a carga da rede e do servidor, mesmo para navegadores que não oferecem suporte a cache por um service worker. Mesmo que você esteja usando a API Cache, é importante ativar o armazenamento em cache do navegador. Para saber mais, consulte as Ferramentas do PageSpeed e os recursos em Fundamentos da Web, principalmente a seção "Como invalidar e atualizar respostas em cache".

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.

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