Por que e o quê?
Você provavelmente já ouviu falar de todas as vantagens que as técnicas de App Web Progressivo podem fazer para seu site. Você pode se sentir tentado a começar diretamente e adicionar recursos de PWA. Isso é possível, mas será muito melhor se você ficar "pronto para PWA" primeiro.
Nenhum recurso mágico de PWA corrigirá problemas como o bloqueio de JavaScript ou imagens grandes. 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 análise objetiva do que funciona bem e onde (e como) poderia ser melhorado.
Auditar seu site ou app ajudará você a criar uma experiência resiliente e de alto desempenho, além de destacar ganhos rápidos que podem ser implementados com o mínimo de aprovação. A auditoria também fornece uma linha de base para o desenvolvimento baseado em dados. Uma mudança melhorou as coisas? Como seu site se compara à concorrência? Você consegue métricas para priorizar o esforço e evidências concretas para se gabar depois de fazer melhorias.
Se você só tiver 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 pendentes para melhorias de 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 Network 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: caso o site use 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 seu site em dispositivos que representem os usuários.
- WebPagetest: desempenho para diferentes locais e tipos de conexão, armazenamento em cache, tempo para o primeiro byte, uso da CDN.
- Pagespeed Insights: mostra o desempenho do carregamento, o custo de dados e o uso de recursos, incluindo dados do relatório de experiência do usuário do Chrome destacando estatísticas de desempenho reais.
- Visão geral da velocidade e a Calculadora de impacto: compare a velocidade do site com a de apps semelhantes e estime a oportunidade de receita em potencial para melhorar a velocidade do site.
Teste seu site porque ele é exibido para um usuário novo. Abra o site em uma janela anônima (particular) 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 das suas experiências subjetivas.
Se você acha a variedade de ferramentas confusa...
Confira nosso guia: Como pensar sobre as ferramentas de velocidade.
Se nada mais, basta usar o Lighthouse para verificar:
- HTTPS: todos os sites precisam exibir todos os recursos por HTTPS.
- Configurações do servidor: o servidor da Web ou CDN precisa usar a compactação corretamente, usar HTTP/2 e incluir cabeçalhos apropriados 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 adiar.
- JavaScript e bibliotecas que podem ser removidas.
- CSS não usado e JavaScript não utilizado.
- Imagens que podem ser salvas com maior compactação ou dimensões em pixels 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 da 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 os requisitos de exercícios dos nossos recursos de treinamento em PWA: Seu público, 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 os dados de auditoria.
Se não for possível auditar todo o site, confira as análises da página para ter uma ideia do foco. Altas taxas de rejeição, baixo tempo na página e páginas de saída inesperadas podem ser um bom indicador de por onde começar. O mesmo acontece com métricas de negócios, como custos de hospedagem, cliques em anúncios e conversões. Tenha 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 para justificar e recompensar o esforço de desenvolvimento.
Teste vários tipos de página 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 primeira experiência de carregamento.