Talvez você já tenha ouvido falar sobre os benefícios que as técnicas de Progressive Web App (PWA) podem trazer para seu site. Você pode se sentir tentado a adicionar recursos de PWA sem melhorar a base da performance do seu site. Mas nenhum recurso de PWA pode corrigir problemas com JavaScript de bloqueio e imagens inchadas.
Em vez disso, a primeira etapa é realizar uma auditoria do site, uma análise objetiva do que funciona bem e do que pode ser melhorado.
A auditoria do seu site ou app ajuda a criar uma experiência resiliente e de alta performance. Além disso, destaque os benefícios rápidos que podem ser implementados com aprovação mínima. Uma auditoria cria uma base para o desenvolvimento orientado por dados. Uma 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.
Com apenas 5 minutos
Execute o Lighthouse na sua página inicial e salve os dados do relatório. Você recebe um valor de referência quantificado e uma lista de tarefas para melhorar o desempenho, a acessibilidade, a segurança e o SEO.
Com apenas 30 minutos
O Lighthouse ainda é o melhor lugar para começar, mas, com mais tempo, você também pode registrar resultados de outras ferramentas:
- Painel de segurança do Chrome DevTools: uso de HTTPS.
- Painel de solicitações de rede do Chrome DevTools: tempos de carregamento, tamanhos de recursos e número de solicitações para HTML, CSS, JavaScript, imagens, fontes e outros arquivos.
- Gerenciador de tarefas do Chrome: se o site usa regularmente 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.
- WebPagetest: armazenamento em cache, tempo até o primeiro byte e 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 no mundo real.
Teste seu site como se fosse um usuário novo. Abra o site em uma janela anônima (privada) ou use as ferramentas do navegador para desativar o 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 da performance do primeiro carregamento.
Nada supera os testes no mundo real. Teste seu site em dispositivos e com conectividade representativos dos seus usuários e mantenha um registro da sua experiência subjetiva.
Se você não entende as ferramentas
Confira nosso guia: Como pensar em ferramentas de velocidade.
Se nada mais funcionar, 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 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 ou receber um atributo async ou defer.
- JavaScript e bibliotecas que podem ser removidos.
- Código não usado, como bibliotecas CSS e JavaScript.
- Oportunidades de redução do tamanho dos pixels da imagem.
- Mudanças no formato do arquivo que melhorariam o tamanho de uma imagem, como mudar um PNG para um JPG.
Público-alvo, partes interessadas, contexto
As prioridades para refatoração dependem do seu público, conteúdo e funcionalidade. Quem acessa seu site? Por que e como eles usam? Qual é seu orçamento de performance?
Quem são as partes interessadas e quais são as prioridades delas? Isso afeta a maneira como você estrutura, apresenta e compartilha os dados de auditoria.
Se não for possível auditar todo o site, verifique a análise de página para ter uma ideia de onde concentrar seus esforços. Taxas de rejeição altas, pouco tempo na página 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, gravar, 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. Para apps de página única, teste os componentes, rotas e fluxos de UX, em vez de apenas a primeira experiência de carregamento.