Por que e o quê?
Você provavelmente já ouviu falar de todas as vantagens que as técnicas de Progressive Web App podem fazer pelo seu site. Pode ser tentador ir direto para adicionar recursos do PWA. Isso é possível, mas você vai ficar muito melhor se ficar "Pronto para o PWA" primeiro.
Nenhum recurso mágico do PWA corrige problemas, como o bloqueio de JavaScript ou imagens muito longas. Os PWAs precisam de uma base sólida.
Então, como você verifica a integridade do seu site? A primeira etapa é fazer uma auditoria do site: uma revisão objetiva do que funciona bem e onde (e como) pode haver melhorias.
Fazer auditorias do seu site ou app ajuda você a criar uma experiência resiliente e de alto desempenho e destacar conquistas rápidas que podem ser implementadas com o mínimo de aprovações. Uma auditoria também fornece uma linha de base para o desenvolvimento orientado por dados. Uma mudança melhorou tudo? Como seu site se compara com os concorrentes? Você terá métricas para priorizar o esforço e evidências concretas para se gabar depois de fazer melhorias.
Se você tiver apenas 5 minutos...
Execute o Lighthouse na página inicial e salve os dados do relatório. Você recebe uma referência quantificada e uma lista de tarefas para melhorar o desempenho, acessibilidade, segurança e SEO.
Se você só tiver 30 minutos...
O Lighthouse provavelmente ainda é o melhor lugar para começar, mas com um pouco mais de tempo você também pode registrar resultados de outras ferramentas:
- Painel de segurança do Chrome DevTools: uso de HTTPS.
- Painel de rede do Chrome DevTools: tempos de carregamento, tamanhos de recursos e número de solicitações de HTML, CSS, JavaScript, imagens, fontes e outros arquivos.
- Gerenciador de tarefas do Chrome: se o site usa constantemente uma quantidade significativa de CPU ou mais memória do que outros apps, talvez seja necessário corrigir vazamentos de memória, execução de tarefas ou problemas de carregamento de recursos. Teste seu site em dispositivos que representem seus usuários.
- WebPagetest: desempenho para diferentes locais e tipos de conexão, armazenamento em cache, tempo até o primeiro byte, uso da CDN.
- Pagespeed Insights: desempenho de carregamento, custo de dados e uso de recursos, incluindo dados do Chrome User Experience Report que destacam estatísticas de desempenho reais.
- Visão geral da velocidade e calculadora de impacto: compare a velocidade do site com a de concorrentes e estime a possível oportunidade de receita de melhorar a velocidade do site.
Teste seu site como um usuário que o acessa pela primeira vez. Abra o site em uma janela anônima ou use ferramentas do navegador para desativar o armazenamento em cache e limpar o armazenamento. Isso garante que cada recurso seja recuperado da rede, e não de um cache local, para que você tenha uma imagem precisa do desempenho do primeiro carregamento.
Nada supera os testes no mundo real. Teste seu site com os mesmos dispositivos e conectividade que seus usuários e mantenha um registro da experiência subjetiva.
Se você achar a variedade de ferramentas confusa...
Confira nosso guia: Como pensar sobre ferramentas de velocidade.
Se nada mais, simplesmente use o Lighthouse para verificar:
- HTTPS: todos os sites precisam fornecer todos os recursos por HTTPS.
- Configurações do servidor: seu servidor da Web ou CDN deve usar a compactação corretamente, usar HTTP/2 e incluir cabeçalhos apropriados para permitir que seu navegador armazene recursos em cache.
- Elementos de script que podem ser movidos para a parte de baixo da página e/ou um atributo async ou defer.
- JavaScript e bibliotecas que podem ser removidas.
- CSS não utilizado e JavaScript não utilizado.
- Imagens que podem ser salvas com compactação mais alta ou dimensões menores em pixels.
- Arquivos de imagem menores salvos usando um formato diferente, por exemplo, fotos salvas como PNGs.
Público-alvo, partes interessadas, contexto
As prioridades da refatoração dependem do público, do conteúdo e da funcionalidade. Quem visita seu site? Por que e como eles usam esse recurso? Qual é seu orçamento de performance? Se você não tiver certeza sobre a resposta para essas perguntas, tente os exercícios de coleta de requisitos dos nossos recursos de treinamento sobre PWA: Seu público, seu conteúdo e Design para todos os seus usuários.
Quem são as partes interessadas e quais são as prioridades delas? Isso afetará a maneira como você estrutura, apresenta e compartilha seus dados de auditoria.
Se não for possível auditar todo o site, confira a análise da página para saber onde se concentrar. Taxas de rejeição altas, tempo na página baixo e páginas de saída inesperadas podem ser bons indicadores de onde começar. Também há métricas de negócios, como custos de hospedagem, cliques em anúncios e conversões. Obtenha uma visão geral das partes interessadas sobre quais dados são importantes para elas.
Testar, gravar, corrigir, repetir
Registre o estado do site antes de fazer qualquer mudança para descobrir problemas e definir um ponto de partida para melhorias ou regressões. Isso fornece dados que justificam e recompensam o esforço de desenvolvimento.
Teste vários tipos de página no seu site, não apenas na página inicial. Para apps de página única, teste diferentes componentes, rotas e fluxos de UX, e não apenas a experiência de primeiro carregamento.