Antes de coletar métricas de performance para uma auditoria de site, faça algumas 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 das correções. Essas melhorias ainda podem fazer parte do seu trabalho de auditoria.
Arquitetura e recursos do site
É possível remover facilmente algo do repositório de código e do site, como páginas legadas não utilizadas, conteúdo ou outros recursos? Verifique se há páginas órfãs, modelos
redundantes, imagens não utilizadas 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 :).
Linting
: há erros no seu código HTML, CSS ou JavaScript? A criação de linting no seu
fluxo de trabalho pode ajudar a manter a qualidade do código e evitar regressões. Recomendamos o
HTMLHint, o StyleLint e o
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.
Links e imagens corrompidos
Há muitas ferramentas para testar links corrompidos no momento da criação e
da execução, incluindo extensões do Chrome
(esta
é boa) e ferramentas do Node, como o
Broken Link Checker.
Plug-ins
Plug-ins como Flash e Silverlight podem ser um risco de segurança, o suporte a eles
foi descontinuado
e eles não funcionam em dispositivos móveis. Use o Lighthouse para verificar se há
plug-ins.
Testar com vários dispositivos e contextos
Nada supera o teste do seu site por pessoas reais com dispositivos reais, vários navegadores e diferentes contextos de conectividade.
Algumas dessas verificações são relativamente subjetivas, mas podem identificar problemas que afetam o desempenho percebido. Por exemplo, links corrompidos desperdiçam tempo e dão a impressão de que o site não responde. Textos ilegíveis são lentos para ler.
Teste em vários dispositivos
Teste diferentes tamanhos de janela de visualização e de janela. Use pelo menos um dispositivo móvel e um dispositivo desktop. Se possível, teste seu site em um dispositivo móvel de baixa especificação com uma tela pequena. O
texto está legível? Alguma imagem está corrompida? Você pode dar zoom? As áreas de toque são grandes o suficiente? Está lento?
Algum recurso não está respondendo? Faça uma captura de tela ou grave um vídeo dos resultados.
Teste multiplataforma
Quais plataformas você quer segmentar? Você precisa testar nos navegadores e
sistemas operacionais que seus usuários usam agora e no futuro.
Conectividade
Teste em vários tipos de rede
de destino: conectada, Wi-Fi e
móvel. Use as ferramentas do navegador para emular várias condições de rede.
Dispositivos
: teste seu site nos mesmos dispositivos que os usuários. A foto a seguir mostra a mesma página em dois smartphones diferentes.
Na tela maior, o texto é pequeno, mas legível. Na tela menor, o navegador renderiza o layout corretamente, mas o texto fica ilegível, mesmo com zoom. A tela fica desfocada e tem um "desvio de cores" (o branco não parece branco), o que torna o conteúdo menos legível.
Descobertas simples como essa podem ser muito mais importantes do que dados de performance obscuros.
Testar a UI 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, como 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 usando um leitor de tela, como o VoiceOver no Mac ou o NVDA no Windows.
Saiba mais sobre como implementar e analisar a acessibilidade no curso da Udacity sobre acessibilidade e no artigo do Web Fundamentals Como fazer uma análise de acessibilidade.
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
transbordando 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 para verificar se há conteúdo transbordando, proporção incorreta,
recorte ruim e problemas de qualidade.
Testes subjetivos de interface
Nem todos eles são relevantes, mas mudanças simples podem facilitar a refatoração:
- A pergunta "O que posso fazer aqui?" fica imediatamente clara quando você abre o site?
- Você se sente atraído a consumir conteúdo e seguir links?
- Há hierarquias ou caminhos visuais ou tudo tem o mesmo peso visual?
- O layout está confuso?
- Há muitas fontes?
- Há imagens ou outros conteúdos que podem ser removidos?
- O design de conteúdo é tão importante quanto o design de interface. O conteúdo de texto e imagem do seu site é adequado para contextos de dispositivos móveis e computadores? É possível eliminar alguma coisa? Escreva para dispositivos móveis.