Há vários objetivos principais para criar um site de alto desempenho e resiliente com baixo custo de dados.
Para cada objetivo, é preciso fazer uma auditoria.
| Objetivo | Por quê? | O que testar? |
|---|---|---|
| Garantir a privacidade, a segurança e a integridade de dados, além de permitir o uso de APIs avançadas | Por que o HTTPS é importante | HTTPS implementado para todas as páginas/rotas e recursos do site. |
| Melhorar o desempenho de carregamento | 53% dos usuários abandonam sites que levam mais de três segundos para carregar | JavaScript e CSS que podem ser carregados de forma assíncrona ou adiados. Defina metas para o tempo até a interatividade e o tamanho do payload: por exemplo, TTI em 3G. Defina um montante de desempenho. |
| 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 o desempenho, a confiabilidade e a resiliência da veiculação | Defina um orçamento de peso da página: por exemplo, 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 muito grandes. 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 | • Reduzir problemas de latência • Reduzir custos de veiculação • Melhorar o desempenho, a confiabilidade e a resiliência da veiculação | Procure solicitações excessivas ou desnecessárias de qualquer tipo de recurso. Por exemplo: arquivos que são carregados repetidamente, JavaScript que é carregado em várias versões, CSS que nunca é usado, imagens que nunca são visualizadas (ou que poderiam ser carregadas de forma lenta). |
| 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 o uso da memória do seu site com o de outros 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 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 do 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
Abaixo, você vai aprender qual abordagem é relevante para cada tipo de auditoria.
Registrar solicitações de recursos: número, tamanho, tipo e tempo
Um bom ponto de partida para auditar um site é verificar as páginas com as ferramentas de rede do navegador. Se você não souber como fazer isso, consulte o Guia para iniciantes do painel Network 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 mudanças. Para solicitações de rede, isso pode ser tão simples quanto uma captura de tela. Também é possível salvar dados de perfil como um arquivo JSON. Confira abaixo mais informações sobre como salvar e compartilhar resultados de testes.
Antes de começar a auditar o uso da rede, desative o cache do navegador para garantir estatísticas precisas sobre o desempenho do primeiro carregamento. Se você já faz o armazenamento em cache por um service worker, limpe o armazenamento da API Cache. Talvez seja melhor usar uma janela de navegação anônima (particular) para não precisar se preocupar em desativar o cache do navegador ou remover entradas armazenadas em cache anteriormente.
Confira alguns recursos principais e métricas que você deve verificar com as ferramentas do navegador:
- Performance de carregamento: o Lighthouse fornece um resumo das métricas de carregamento. Addy Osmani escreveu um ótimo resumo dos momentos importantes do usuário para o carregamento de página.
- Eventos da linha do tempo para carregar e analisar recursos e uso da memória. Se quiser ir mais a fundo, execute a criação de perfil de memória e JavaScript.
- Peso total da página e número de arquivos.
- Número e peso dos arquivos JavaScript.
- Arquivos JavaScript individuais particularmente grandes (por exemplo, com 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 da imagem: há PNGs que poderiam 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 utilizado. 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 ver se há algo que bloqueia o carregamento de página.
Se você estiver trabalhando com uma conexão Wi-Fi ou celular rápida, teste com emulação de baixa largura de banda e alta latência. Não se esqueça de testar em dispositivos móveis e computadores. Alguns sites usam a detecção de UA para fornecer 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 mudanças, mantenha um registro do uso de memória e 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 o desempenho do primeiro carregamento e dos seguintes
Lighthouse, WebPagetest e Pagespeed Insights são úteis para analisar a velocidade, o custo de dados e o 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: cada resultado de teste tem o próprio URL.
- Pagespeed Insights: a ferramenta on-line Pagespeed Insights agora inclui dados do Chrome User Experience Report, destacando estatísticas de desempenho reais.
- Lighthouse: salve relatórios do painel de auditoria do Chrome DevTools clicando no botão de download:
Testar os requisitos principais do App Web Progressivo
O Lighthouse ajuda a testar a segurança, a funcionalidade, a acessibilidade, o desempenho e o desempenho do mecanismo de pesquisa. Em particular, o Lighthouse verifica se o site implementa corretamente os recursos de PWA, como service workers e um manifesto do app da Web.
O Lighthouse também testa se o site pode oferecer uma experiência off-line aceitável.
É possível fazer o download de um relatório do Lighthouse como JSON ou, se você estiver usando a extensão do Lighthouse para Chrome, compartilhar o relatório como um Gist do GitHub: clique no botão de compartilhamento, selecione "Abrir no visualizador", clique no botão de compartilhamento novamente na nova janela e selecione "Salvar como Gist".
Usar análises, acompanhamento de eventos e métricas de negócios para monitorar o desempenho no mundo 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, o que for relevante para os requisitos da sua empresa.
Se possível, registre as métricas de negócios e técnicas que podem ser afetadas para comparar os resultados depois de fazer as mudanças. Por exemplo: um site de e-commerce pode rastrear 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 você ainda não implementou as análises, agora é a hora. As métricas e análises de negócios são o árbitro final para saber 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 reproduções de vídeo. Também é possível implementar a análise de fluxo de metas: os caminhos que os usuários percorrem até as "conversões".
Você pode ficar de olho na Velocidade do site do 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 em tempo real de usuários reais.
Experiência real: gravação de tela e vídeo
Faça uma gravação de vídeo do carregamento de página em dispositivos móveis e computadores. Isso funciona ainda melhor com frame rates altos e se você adicionar um timer.
Você também pode salvar screencasts. Há muitos apps de gravação de screencast para Android, iOS e plataformas para computador (e scripts para fazer o mesmo).
O carregamento de página com gravação de vídeo funciona de maneira semelhante à visualização de tira de filme no WebPagetest ou à captura de 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 melhorias futuras.
Uma comparação lado a lado de "antes e depois" pode ser uma ótima maneira de demonstrar melhorias.
O que mais?
Se for relevante, receba uma pontuação de sobrecarga da Web. Esse é um teste divertido, mas também pode ser uma maneira interessante de demonstrar o excesso de código ou mostrar que você fez melhorias.
What Does My Site Cost?, mostrado abaixo, oferece um guia aproximado do custo financeiro de carregar seu site em diferentes regiões.
Muitas outras ferramentas independentes e on-line estão disponíveis: confira perf.rocks/tools.