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.
Verificação de validade: arquitetura e código
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.
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.