Por que e o quê?
Você provavelmente já ouviu falar sobre todas as vantagens que as técnicas de apps da Web progressivos podem oferecer ao seu site. Você pode se sentir tentado a começar a adicionar recursos de PWA. Isso é possível, mas é melhor se preparar para a PWA primeiro.
Nenhuma mágica de PWA vai corrigir problemas como o bloqueio de JavaScript ou imagens inchadas. As PWAs precisam de uma base sólida.
Como você verifica a integridade do seu site? A primeira etapa é fazer uma auditoria do site: uma análise objetiva do que funciona bem e onde (e como) pode haver melhorias.
A auditoria do seu site ou app ajuda a criar uma experiência resiliente e com bom desempenho, além de destacar as vitórias rápidas que podem ser implementadas com a aprovação mínima. Uma auditoria também fornece uma base para o desenvolvimento orientado a dados. A mudança melhorou as coisas? Como seu site se compara aos concorrentes? Você recebe 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 sua página inicial e salve os dados do relatório. Você recebe uma base quantificada e uma lista de tarefas para melhorias na performance, acessibilidade, segurança e SEO.
Se você tiver apenas 30 minutos…
O Lighthouse ainda é o melhor lugar para começar, mas com um pouco mais de tempo, você também pode registrar resultados de outras ferramentas:
- Painel "Security" do Chrome DevTools: uso do 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 usar constantemente uma CPU significativa ou mais memória do que outros apps, talvez seja necessário corrigir vazamentos de memória, problemas de execução de tarefas ou de carregamento de recursos. Teste o 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 do CDN.
- PageSpeed Insights: desempenho de carregamento, custo de dados e uso de recursos, incluindo dados do relatório de experiência do usuário do Chrome que destacam estatísticas de desempenho reais.
- Speed Scorecard e Impact Calculator: compare a velocidade do site com a da concorrência e estime a possível receita gerada com a melhoria da velocidade.
Teste seu site como um usuário que o vê pela primeira vez. Abra o site em uma janela anônima (privada) ou use as ferramentas do navegador para desativar o armazenamento em cache e limpar o armazenamento. Isso garante que todos os recursos sejam recuperados da rede e não de um cache local, para que você tenha uma imagem precisa do desempenho do primeiro carregamento.
Nada se compara a testes reais: teste seu site com os mesmos dispositivos e conectividade que seus usuários e registre sua experiência subjetiva.
Se você achar a variedade de ferramentas confusa…
Confira nosso guia: Como pensar sobre as ferramentas de velocidade.
Se não houver nada mais, use o Lighthouse para verificar:
- HTTPS: todos os sites precisam entregar todos os recursos por HTTPS.
- Configurações do servidor: seu servidor da Web ou CDN precisa usar a compactação corretamente, usar o HTTP/2 e incluir cabeçalhos adequados para permitir que o navegador armazene recursos em cache.
- Elementos de script que podem ser movidos para a parte de baixo da página e/ou receber um atributo async ou defer.
- JavaScript e bibliotecas que podem ser removidas.
- CSS não usado e JavaScript não usado.
- Imagens que podem ser salvas com compressão mais alta ou dimensões de pixel menores.
- Arquivos de imagem que seriam menores salvos usando um formato diferente, por exemplo, fotos salvas como PNGs.
Público-alvo, partes interessadas, contexto
As prioridades para refatoração dependem do público, do conteúdo e da funcionalidade. Quem visita seu site? Por que e como eles usam? Qual é seu orçamento de performance? Se você não tiver certeza da resposta a essas perguntas, tente fazer os exercícios de coleta de requisitos dos nossos recursos de treinamento de PWA: Seu público-alvo, seu conteúdo e Design para todos os 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, verifique as análises de página para ter uma ideia de onde se concentrar. Taxas de rejeição altas, tempo de permanência na página baixo e páginas de saída inesperadas podem ser um bom indicador de onde começar. Da mesma forma, métricas de negócios, como custos de hospedagem, cliques em anúncios e conversões. Receba uma visão geral das partes interessadas sobre quais dados são importantes para elas.
Testar, registrar, corrigir, repetir
Registre o estado do seu site antes de fazer qualquer mudança para descobrir problemas e definir um ponto de partida para melhorias ou regressões. Isso fornece dados para justificar e recompensar o esforço de desenvolvimento.
Teste vários tipos de páginas no seu site, não apenas a 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.