Pré-trabalho

Antes de coletar métricas de desempenho para uma auditoria do site, você pode fazer várias verificações para identificar correções fáceis e áreas de foco.

Pague a dívida técnica.

Sempre que possível, corrija bugs simples e remova recursos e códigos desnecessários antes de medir o desempenho, mas mantenha um registro de antes e depois dos problemas e correções. Essas melhorias ainda podem fazer parte do trabalho de auditoria.

Arquitetura e recursos do site
É fácil remover algo do repositório de códigos e do site, como páginas, conteúdos ou outros recursos legados não utilizados? Verifique se há páginas órfãs, modelos redundantes, imagens não usadas e códigos e bibliotecas não utilizados.

Erros de tempo de execução
Verifique se há erros informados no console do navegador. Não deve haver nenhum :).

Lint
Há erros no seu código HTML, CSS ou JavaScript? A criação de lint no fluxo de trabalho pode ajudar a manter a qualidade do código e evitar regressões. Recomendamos HTMLHint, StyleLint e ESLint, que podem ser usados como plug-ins do editor de código ou executados na linha de comando em processos de fluxo de trabalho e ferramentas de integração contínua, como o Travis.

Imagens e links corrompidos
Há muitas ferramentas para testar links corrompidos no tempo de build e na execução, incluindo extensões do Chrome (este é bom) e ferramentas do Node, como o Verificador de links corrompidos.

Plug-ins
Os plug-ins como Flash e Silverlight podem representar um risco de segurança, porque o suporte a eles foi descontinuado e não funcionam em dispositivos móveis. Use o Lighthouse para verificar se há plug-ins.

Testar com uma variedade de dispositivos e contextos

Não há nada melhor do que fazer com que pessoas reais testem seu site com dispositivos reais, vários navegadores e diferentes contextos de conectividade.

Algumas verificações são relativamente subjetivas, mas podem identificar problemas que afetam o desempenho percebido. Links quebrados, por exemplo, desperdiçam tempo e sentem que não respondem. A leitura de textos ilegíveis é lenta.

Teste em dispositivos diferentes
Teste diferentes tamanhos de janela de visualização e janela. Use pelo menos um dispositivo móvel e um desktop. Se possível, teste o site em um dispositivo móvel de baixa especificação e com uma tela pequena. O texto está legível? Alguma imagem está corrompida? Você consegue aplicar zoom? As áreas de toque são grandes o suficiente? É lento? Algum recurso não responde? Faça uma captura de tela ou grave os resultados em vídeo.

Testes em várias plataformas
Quais plataformas você segmenta? Você precisa testar os navegadores e sistemas operacionais que seus usuários utilizam agora e no futuro.

Conectividade
Teste em vários tipos de rede de destino: conectada, Wi-Fi e celular. Você pode usar as ferramentas do navegador para emular várias condições de rede.

Dispositivos
Teste seu site nos mesmos dispositivos que seus usuários. A foto a seguir mostra a mesma página em dois smartphones diferentes.

Página de postagem do blog em um telefone com especificações
alta e baixa

Em uma tela maior, o texto é pequeno, mas legível. Na tela menor, o navegador renderiza o layout corretamente, mas o texto fica ilegível, mesmo quando o zoom é aumentado. A tela está desfocada e tem um desvio de cores (o branco não parece branco), tornando o conteúdo menos legível.

Descobertas simples como essa podem ser muito mais importantes do que ocultar dados de desempenho.

Teste a interface e a UX

Acessibilidade, usabilidade e legibilidade
Para garantir que o conteúdo e a funcionalidade do seu site sejam acessíveis a todos, você precisa entender a diversidade dos seus usuários. O Lighthouse e outras ferramentas testam problemas de acessibilidade específicos, mas nada supera os testes no mundo real. Tente ler, navegar e inserir dados em vários cenários: por exemplo, ao ar livre, sob a luz do sol ou em um trem. Peça para vários amigos, familiares e colegas testarem seu site. Tente consumir conteúdo com um leitor de tela, como o VoiceOver no Mac ou o NVDA no Windows.

Saiba mais sobre como implementar e revisar a acessibilidade no curso da Udacity e no artigo sobre Fundamentos da Web Como fazer uma avaliação de acessibilidade (em inglês).

Mantenha um registro da sua auditoria de acessibilidade. É provável que você consiga fazer melhorias simples que sejam boas para todos os usuários.

Problemas fundamentais de interface e UX
Interações que não funcionam como deveriam, elementos sobrecarregados em janelas e janelas de visualização menores, áreas de toque muito pequenas, conteúdo ilegível, rolagem instável... Abra várias páginas no site, teste a navegação e todas as funcionalidades principais. Mantenha um registro.

Imagens, áudio e vídeo
: teste o conteúdo em excesso, a proporção incorreta, o corte inadequado e problemas de qualidade.

Testes subjetivos da interface
Talvez nem todos sejam relevantes, mas mudanças simples podem facilitar a refatoração:

  • A opção "O que posso fazer aqui?" está clara assim que o site é aberto?
  • Você é atraído a consumir conteúdo e seguir links?
  • Existem hierarquias visuais ou caminhos? Ou tudo tem o mesmo peso visual?
  • O layout está desorganizado?
  • Há muitas fontes?
  • Há imagens ou outro conteúdo que possa ser removido?
  • O design de conteúdo é tão importante quanto o design da interface. O conteúdo de texto e imagem do site é adequado para contextos de dispositivos móveis e computadores? Alguma coisa pode ser eliminada? Escreva para dispositivos móveis.