Existem vários objetivos principais para criar um site resiliente e de alto desempenho com baixo custo de dados.
Para cada objetivo, você precisa de uma auditoria.
| Objetivo | Por quê? | O que testar? |
|---|---|---|
| Garanta privacidade, segurança e integridade dos dados, além de permitir o uso eficiente da API | Por que o HTTPS é importante | HTTPS implementado em todas as páginas/rotas do site e todos os recursos. |
| 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 maneira assíncrona ou adiada. Defina metas de tempo para interação e tamanho do payload, como 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, especialmente importante para usuários em dispositivos com especificações baixas • Reduzir os custos de hospedagem e disponibilização • Melhorar o desempenho, a confiabilidade e a resiliência do servidor | 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 o tamanho dos arquivos para encontrar imagens pesadas, mídia, HTML, CSS e JavaScript. Encontre imagens que possam ter carregamento lento e verifique se há códigos não utilizados com as ferramentas de cobertura. |
| Reduzir as solicitações de recursos | • Reduzir problemas de latência • Reduzir os custos de veiculação • Melhorar o desempenho, a confiabilidade e a resiliência do serviço | Procure solicitações excessivas ou desnecessárias para qualquer tipo de recurso. Por exemplo: arquivos carregados repetidamente, JavaScript que é carregado em várias versões, CSS que nunca é usado, imagens que nunca são visualizadas (ou 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 | Dispositivos móveis têm CPU limitada, especialmente dispositivos com especificações baixas. | Verifique se há JavaScript pesado. Encontre JavaScript e CSS não utilizados com as 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 possam ser evitadas com uma pequena refatoração. |
Há uma ampla variedade de ferramentas e técnicas para auditar sites:
- Ferramentas do sistema
- Ferramentas de navegador integradas
- Extensões do navegador
- Aplicativos de teste on-line
- Ferramentas de emulação
- Análise
- Métricas fornecidas por servidores e sistemas de negócios
- Gravação de tela e vídeo
- Testes manuais
Veja abaixo qual abordagem é relevante para cada tipo de auditoria.
Solicitações de recursos de registro: número, tamanho, tipo e tempo
Um bom ponto de partida ao auditar um site é verificar as páginas com as ferramentas de rede do navegador. Se você não tiver certeza de como fazer isso, consulte o Guia explicativo 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 as alterações. Para solicitações de rede, isso pode ser tão simples quanto uma captura de tela. Você também pode salvar dados do perfil como um arquivo JSON. Veja 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 para o desempenho do primeiro carregamento. Se você já faz o armazenamento em cache por meio de um service worker, limpe o armazenamento da API Cache. Use uma janela anônima (particular) para não se preocupar em desativar o cache do navegador ou remover entradas armazenadas em cache anteriormente.
Estes são alguns dos principais recursos e métricas que você deve verificar com as ferramentas do navegador:
- Desempenho de carregamento: o Lighthouse fornece um resumo das métricas de carregamento. Addy Osmani escreveu um ótimo resumo dos momentos principais do usuário para o carregamento de página.
- Eventos da linha do tempo para carregar e analisar recursos e usar a memória. Se você quiser se aprofundar, 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.
- Qualquer arquivo JavaScript particularmente grande (com mais de 100 KB, por exemplo).
- JavaScript não utilizado. É possível verificar usando a ferramenta de cobertura do Chrome.
- Número total e peso dos arquivos de imagem.
- Qualquer arquivo de imagem individual particularmente grande.
- Formatos de imagem: há PNGs que podem ser JPEGs ou SVGs? O WebP é usado com substitutos?
- Define se as 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 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 se há algo que bloqueie o carregamento da página na linha do tempo do DevTools.
Se você está trabalhando com Wi-Fi rápido ou uma conexão celular rápida, teste com baixa largura de banda e emulação de alta latência. Lembre-se de testar tanto em dispositivos móveis quanto em computadores. Alguns sites usam a detecção de UA para fornecer recursos e layouts diferentes para dispositivos diferentes. Pode ser necessário testar no hardware real usando a depuração remota (em inglês), não apenas com a simulação de dispositivos.
Verificar a memória e a carga da CPU
Antes de fazer alterações, mantenha um registro do uso da memória e da CPU.
No Google 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 do carregamento subsequente
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 verificará o armazenamento em cache do conteúdo estático, o tempo para o primeiro byte e se seu site faz uso eficaz de CDNs.
Salve os resultados
- WebPagetest: os resultados de teste têm seu próprio URL.
- PageSpeed Insights: a ferramenta on-line Pagespeed Insights agora inclui dados do Relatório de experiência do usuário do Chrome que destacam estatísticas de desempenho reais.
- Lighthouse: salve os relatórios do painel de auditoria do Chrome DevTools clicando no
botão de download:
Testar os principais requisitos do App Web Progressivo
O Lighthouse ajuda a testar segurança, funcionalidade, acessibilidade, performance e desempenho do mecanismo de pesquisa. Mais 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.
É possível fazer o download de um relatório do Lighthouse como JSON ou, se você estiver usando a extensão do Chrome do Lighthouse, compartilhá-lo como um Gist do GitHub: clique no botão de compartilhamento, selecione "Abrir no visualizador" e clique no botão de compartilhamento novamente na nova janela e em "Salvar como Gist".
Use análise, acompanhamento de eventos e métricas de negócios para acompanhar o desempenho real
Se possível, mantenha um registro dos dados de análise antes de implementar as alterações: taxas de rejeição, tempo na página, páginas de saída: o que for relevante para seus requisitos de negócios.
Se possível, registre as métricas comerciais e técnicas que podem ser afetadas para que seja possível comparar os resultados depois de fazer as alterações. Por exemplo: um site de comércio eletrônico 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 exibição e a resiliência provavelmente melhorarão se você reduzir o peso da página e as solicitações de recursos.
Se as análises não forem implementadas, este é o momento. As métricas e análises de negócios são que decide se o site funciona ou não. Se apropriado, incorpore o acompanhamento de eventos para ações do usuário, como cliques em botões e reproduções de vídeo. Também convém implementar a análise de fluxo de meta: os caminhos pelos quais os usuários navegam para "conversões".
Acompanhe a Velocidade do site do Google Analytics para verificar como as métricas de desempenho se relacionam com as de negócios. Por exemplo: "Qual foi a velocidade de carregamento da página inicial?" em comparação com "A entrada pela página inicial resultou em uma venda?"
O Google Analytics usa dados da API Navigation Timing.
É possível registrar dados usando uma das APIs JavaScript de desempenho 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 do navegador e intervenção. Essa é uma das muitas APIs para acessar medições reais de usuários reais.
Experiência no mundo real: gravação de tela e vídeo
Faça uma gravação em vídeo do carregamento de página em dispositivos móveis e computadores. Isso funciona ainda melhor em frame rates altas e com uma exibição de timer.
Você também pode salvar screencasts. Existem muitos apps de gravação de screencast para Android, iOS e plataformas de computador (e scripts para fazer o mesmo).
O carregamento da página de gravação de vídeo funciona como a visualização de tira 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 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, receba uma pontuação de sobrecarga da Web. Esse é um teste divertido, mas também pode ser uma maneira interessante de demonstrar a sobrecarga de código ou mostrar que você fez melhorias.
Quanto custa meu site?, mostrado abaixo, fornece 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.