Antes de coletar as métricas de performance para uma auditoria do site, é possível 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 do antes e depois dos problemas e 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 usadas e códigos e bibliotecas não utilizados.
Erros de execução
: verifique se há erros informados no console do navegador. Não deve haver nenhum :).
Linting
Há erros no código HTML, CSS ou JavaScript? Criar o linting 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 de editores de código ou executados na
linha de comando em processos de fluxo de trabalho e ferramentas de integração contínua, como
Travis.
Links e imagens quebrados
Há muitas ferramentas para testar links quebrados no momento da criação e
de execução, incluindo extensões do Chrome
(esta é boa) e ferramentas do Node, como
Broken Link Checker.
Plug-ins
Plug-ins como o Flash e o Silverlight podem representar 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 pessoas reais testando seu site 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. Links quebrados, por exemplo, desperdiçam tempo e parecem "não responder". O texto ilegível é lento para ler.
Testes em vários dispositivos
Teste diferentes tamanhos de janela de visualização e janela. Use pelo menos um dispositivo móvel e
um computador. Se possível, teste o site em um dispositivo móvel de baixa especificação com uma tela pequena. O
texto está legível? Há imagens corrompidas? Você consegue dar zoom? As áreas de toque são grandes o suficiente? Ela é lenta?
Algum recurso não responde? Faça uma captura de tela ou um vídeo dos resultados.
Testes entre plataformas
Quais plataformas você segmenta? 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: conectado, Wi-Fi e
celular. Você pode usar 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.
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 'efeito de cor', ou seja, o branco não parece branco, o que torna o conteúdo menos legível.
Resultados simples como esse podem ser muito mais importantes do que dados de desempenho obscuros.
Testar 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, é necessário entender a diversidade dos seus usuários.
O Lighthouse e outras ferramentas testam problemas específicos
de acessibilidade, mas nada supera o teste 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 a vários
amigos, familiares e colegas para testar seu site. Tente consumir conteúdo usando um leitor de tela, como
VoiceOver
no Mac ou
NVDA
no Windows.
Saiba mais sobre a implementação e a revisão da acessibilidade no curso da Udacity sobre acessibilidade e no artigo Fundamentos da Web Como fazer uma revisão de acessibilidade.
Mantenha um registro da auditoria de acessibilidade. É provável que você consiga fazer melhorias simples que sejam boas para todos os usuários.
Problemas fundamentais de IU e UX
Interações que não funcionam como deveriam, elementos que transbordam
em janelas e viewports menores, elementos de toque muito pequenos, conteúdo ilegível, rolagem
irregular… 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 se há conteúdo que transborda, proporção incorreta,
corte ruim e problemas de qualidade.
Testes subjetivos de interface
Nem todos esses testes são relevantes, mas mudanças simples podem facilitar a refatoração:
- A mensagem "O que posso fazer aqui?" fica clara imediatamente quando você abre o site?
- Você gosta de 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 outro conteúdo que possam 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 algo? Escreva para dispositivos móveis.