Como usar o Google Lighthouse para testar o desempenho do site – TechCult
Miscelânea / / November 07, 2023
Quando se trata de classificar seu site em uma posição mais elevada nos resultados de pesquisas, a velocidade do site é um fator que não pode ser ignorado. Isso não apenas encanta os usuários, mas também se traduz em maior visibilidade. Afinal, ninguém quer clicar em uma página e esperar uma eternidade até que ela carregue. Você vê o TechCult, por exemplo, nossos blogs carregam bem rápido, não é? Hah, piadas à parte, se você está preocupado com o fato de seu site não conseguir ser classificado devido à baixa velocidade, o Google Lighthouse está aqui para ajudá-lo. No artigo de hoje, mostraremos como usar o Google Lighthouse para testes de desempenho.
![Como usar o Google Lighthouse para testar o desempenho do site](/f/7f811fe66422ab98c5e958550414c475.png)
O que é o Google Lighthouse e como usá-lo para testes de desempenho?
É um provérbio comumente dito que a primeira impressão é a última. Por falar nisso, muitas vezes um site que carrega rapidamente se destaca em termos de melhor experiência do usuário, o que pode resultar em maiores taxas de conversão. Até mesmo mecanismos de pesquisa como o Google classificam os sites de carregamento mais rápido em posições mais altas nos resultados de pesquisa.
Google Lighthouse é uma ferramenta automatizada de código aberto que ajuda desenvolvedores e proprietários de sites a avaliar e melhorar a qualidade das páginas da web. Possui auditorias de desempenho, acessibilidade, práticas recomendadas e SEO para dispositivos móveis e desktop. Com base em seus relatórios e recomendações detalhados, os usuários podem otimizar o desempenho do site para um melhor envolvimento do usuário. O Lighthouse pode ser executado em qualquer página da web, de acesso público ou privado. Vamos ver como funciona e como você pode usá-lo.
Método 1: adicionar e executar diretamente o Lighthouse
O Lighthouse também está disponível para usuários na forma de uma extensão do Google, que você pode baixar para executar auditorias no navegador Chrome. Siga os passos abaixo:
1. Visite a Página da Chrome Web Store para a extensão Lighthouse em qualquer navegador da web.
2. Clique em Adicionar ao Chrome.
![Clique em Adicionar ao Chrome para Google Lighthouse](/f/ad6fe62b112f529c85e847e2eb0f4f7b.png)
3. Selecione Adicionar extensão confirmar.
4. Depois de adicionado, inicie o site no navegador que deseja analisar.
5. Clique no Ícone de extensão (quebra-cabeça) ao lado da barra de endereço e selecione Farol.
6. Clique em Gerar relatório.
![Clique em Gerar relatório. | teste de desempenho do farol](/f/3f25d112b7f9b1fb93f9220e8165bb2f.png)
É isso! Em alguns segundos, o Lighthouse irá gerar um relatório detalhado analisando o site para o qual você executou o teste.
Método 2: use o PageSpeed Insights
O Google PageSpeed Insights também é um ferramenta de teste de desempenho web que usa o Lighthouse como mecanismo de análise. Portanto, você pode usá-lo para gerar relatórios para o seu site. Siga os passos:
1. Visite a Informações do PageSpeed local na rede Internet.
2. Insira o URL do site no campo de texto e clique em Analisar.
![Insira o URL do site no campo de texto e clique em Analisar.](/f/e87dd332ed467e60b1004f5137ae3baf.png)
Assim que o teste for concluído, você receberá o Relatório de experiência do usuário do Chrome que mostra os resultados experimentados por usuários reais.
![Resultados do PageSpped Insights | teste de desempenho do farol](/f/8069809c9c171fb448f1de6c4a4cd10d.png)
A seção Diagnosticar problemas de desempenho representa a pontuação do Lighthouse. Você pode verificar os resultados para dispositivos móveis e computadores.
![Resultados do Lighthouse – Diagnosticar problemas de desempenho](/f/552b36918980db18d172f623f38b0736.png)
Método 3: execute o Lighthouse no DevTools
O Lighthouse possui seu painel no Google Chrome DevTools que você também pode usar para testar o desempenho se o seu site rodar em um servidor local ou também para sites que requerem login. Veja como fazer isso:
1. Visite o site que deseja auditar.
2. Clique com o botão direito em qualquer lugar da página e selecione Inspecionar do cardápio.
![Clique com o botão direito em qualquer lugar da página e selecione Inspecionar no menu. | teste de desempenho do farol](/f/e893bef1e22a7473542798a872dc1d8e.png)
3. Clique no >> ícone (Mais guias) e selecione Farol no menu de contexto.
![Clique em (Mais guias) e selecione Farol no menu de contexto.](/f/9da5ba5935dd9335d517fab2fef5c487.png)
4. Clique no Analise o carregamento da página botão no canto superior direito e espere até que os resultados estejam prontos.
Observação: Selecione os Dispositivo adequadamente e guarde todos os Categorias habilitado.
![Clique no botão Analisar carregamento da página no canto superior direito e espere até que os resultados estejam prontos.](/f/dc4311b7879bba6b28382f2e71577273.png)
Você também pode alterar o modo. O Lighthouse no DevTools oferece três modos de teste:
- Navegação: Exibe resultados gerais, incluindo desempenho, acessibilidade e SEO.
![Farol de resultados de navegação no DevTools | teste de desempenho do farol](/f/fa3f155cd7c9f18f39983688d551bf17.png)
- Intervalo de tempo: Mostra resultados com base no tempo que uma página leva para carregar e interagir com o surfista. Você precisaria interagir com a página enquanto o teste estiver em execução.
![Ferramentas de desenvolvimento de pontuação do Timespan Lightshouse](/f/b8b8a74643b6b10ac4ad378adf012875.png)
- Instantâneo: Calcula a pontuação da página atual
![Pontuação do Snapshot Lighthouse DevTools | teste de desempenho do farol](/f/446b17f9aee799792bf815ed24c365da.png)
Leia também:31 melhores ferramentas de raspagem da Web
Método 4: usar o módulo Lighthouse com linha de comando
O Lighthouse também está disponível como um módulo Node que você pode integrar em seus sistemas de integração contínua e usar como linha de comando ou programaticamente. Tudo o que é necessário é uma versão do nó. Se você tem Node.js instalado no PC, siga os passos abaixo:
1. Faça login em seu servidor e execute o seguinte comando para instalar o módulo global Lighthouse no dispositivo:
npm install -g lighthouse
2. Depois de instalado, execute o seguinte comando para realizar um teste do Lighthouse:
lighthouse -- view
Você pode ver todas as opções disponíveis usando o seguinte comando.
lighthouse --help
Como o Lighthouse calcula a pontuação
O Google Lighthouse combina e avalia vários aspectos das métricas de desempenho de um site, como Desempenho, Acessibilidade, Melhores Práticas, SEO e PWA. Uma vez bem-sucedida, a auditoria gera um relatório que inclui uma pontuação para cada aspecto, bem como recomendações de melhorias necessárias para melhorar o desempenho e a interação do usuário em seu site. Os sites normalmente são avaliados em uma escala de 0 a 100.
Desempenho
O Lighthouse analisa a rapidez com que uma página da web carrega. A pontuação de desempenho é calculada levando em consideração as seguintes métricas –
- Primeira pintura com conteúdo (FCP): A rapidez com que o primeiro elemento do conteúdo é pintado na tela
- Pintura com maior conteúdo (LCP): Mede o tempo que leva para o maior elemento de conteúdo se tornar visível
- Mudança cumulativa de layout (CLS): Mede a quantidade de mudanças inesperadas de layout que ocorrem durante o carregamento da página para avaliar a estabilidade visual da página. CLS baixo indica que o site está estável.
- Tempo total de bloqueio: Mede o tempo durante o qual o thread principal fica bloqueado e não responde à entrada do usuário.
- Índice de velocidade: Indica a rapidez com que todo o conteúdo da página fica completamente visível
Essas métricas medem a velocidade de carregamento e a estabilidade visual do site. Vários fatores influenciam este relatório, como o tamanho e a quantidade de imagens, a quantidade de plugins utilizados e a eficiência do código do site.
![Farol de pontuação de desempenho | teste de desempenho do farol](/f/8ca1f8c0e79108464f972ed6055d6551.png)
O Lighthouse calcula a pontuação tomando a média ponderada dos valores da métrica. Naturalmente, as medições com maior peso têm um impacto maior na sua pontuação total de desempenho. As pontuações das métricas não são exibidas no relatório, mas são calculadas nos bastidores. Você pode clicar na opção Ver calculadora para obter acesso ao cálculo detalhado dos fatores que afetam o seu site.
![Calculadora de pontuação Lighthouse para desempenho](/f/b169f5bcf76e53d6a5c24cee84537897.png)
Acessibilidade
É uma pontuação centrada no usuário que mede a facilidade com que usuários com deficiência acessam seu site. É influenciado por fatores como a presença de texto alternativo nas imagens, o uso de atributos ARIA e a acessibilidade do teclado do seu site. Cada auditoria de acessibilidade é aprovada ou reprovada. Uma página não recebe pontos por passar parcialmente em uma auditoria de acessibilidade, ao contrário das auditorias de desempenho.
- Texto alternativo para imagens: Todas as imagens da página devem ter texto alternativo adequado e descritivo, pois é necessário para usuários com deficiência visual que dependem de leitores de tela para interpretar as imagens.
- HTML semântico: O uso adequado de elementos HTML semânticos, como título, cabeçalhos, listas, etc., ajuda os leitores de tela e outros softwares auxiliares a compreender a estrutura da página
- Contraste de cores: O contraste de cores entre o texto e o fundo deve atender aos padrões estabelecidos pelas Diretrizes de Acessibilidade para Conteúdo da Web. O contraste de cores suficiente garante que o texto seja legível para indivíduos com visão deficiente ou daltonismo.
![Pontuação de acessibilidade Google Lighthouse | teste de desempenho do farol](/f/b18358eef570d804cf28319111b5bc33.png)
Leia também: Como construir um site usando ChatGPT
Melhores Práticas
O Lighthouse mede o quão bem o seu site segue as melhores práticas e padrões de codificação de desenvolvimento web e fornece uma pontuação com base nisso. Ele verifica o uso de recursos JavaScript modernos e conexões seguras (HTTPS) e é influenciado por fatores como o uso de minificação e compactação, a presença de cabeçalhos de segurança e o uso de robots.txt arquivos. Algumas das auditorias comuns incluem:
- Evite grandes bibliotecas JavaScript
- Evite CSS não utilizado
- Ativar compactação de texto
- Elimine recursos de bloqueio de renderização
- Aproveite o cache do navegador
- Servir ativos estáticos com uma política de cache eficiente
![Pontuação do farol de práticas recomendadas](/f/2d27de23a93501aed1432faccf97e0f8.png)
SEO
SEO mede o quão bem o site está otimizado para mecanismos de pesquisa. É influenciado por fatores como a presença de meta descrições e tags de título, o uso de palavras-chave relevantes e a estrutura do conteúdo do seu site. A pontuação é calculada pela média das pontuações das seguintes auditorias:
- Título do documento
- Descrição
- Títulos
- Imagens
- Ligações
- Meta Descrição
- Robôs.txt
![Pontuação SEO do Google Lighthouse | teste de desempenho do farol](/f/93c9c1cd95a5c26240c1337afa2dd700.png)
Leia também: 27 melhores serviços gratuitos de hospedagem de sites
Como interpretar os resultados
O Lighthouse converte cada valor bruto da métrica em uma pontuação métrica de 0 a 100. Quanto maior a pontuação, melhor é. As pontuações das métricas são coloridas de acordo com estes intervalos:
- 0 a 49 (Triângulo Vermelho): Ruim
- 50 a 89 (Quadrado Laranja): Precisa de Melhorias
- 90 a 100 (Círculo Verde): Bom
Ao realizar testes no mesmo site, é comum observar oscilações nas pontuações gerais. Essa variabilidade pode ser atribuída a vários fatores.
- Cada análise fornece apenas insights sobre o desempenho de um único carregamento de página. Como nenhum carregamento de duas páginas é idêntico, os tempos de carregamento podem diferir naturalmente.
- A velocidade da página pode ser influenciada pela presença de conteúdo dinâmico, como anúncios ou elementos que mudam frequentemente, extensões do navegador que alteram as solicitações de rede e atividades em segundo plano no PC.
- As pontuações obtidas em ambientes diferentes, como o PageSpeed Insights e o seu computador local, podem não ser diretamente comparáveis devido a diferenças nas condições de hardware e de rede.
Como melhorar sua pontuação no farol
O Lighthouse fornece dados de laboratório (testes simulados) e dados de campo (dados reais do usuário) para avaliar o desempenho de uma página da web. Os dados de campo oferecem insights sobre como os usuários reais vivenciam o site, enquanto os dados de laboratório são úteis para testar mudanças e melhorias.
![Webdesign](/f/26dc96a3e7f35319a0f7c23dbd4d7e69.jpg)
Comece concentrando-se nas recomendações no domínio do desempenho. Um site de carregamento mais rápido melhorará a experiência do usuário e poderá aumentar sua classificação de SEO. Depois que sua pontuação de desempenho melhorar, você poderá começar a se concentrar nas recomendações de outras áreas. Como a acessibilidade e o SEO são componentes essenciais na qualidade geral do seu site, vale a pena dedicar esforços para melhorar também essas áreas.
Leia também: Zyro vs Wix: Qual construtor de sites você deve escolher?
Dicas bônus para iniciantes
Se você acabou de projetar e lançar seu site, aqui estão mais algumas dicas que você deve mantê-lo:
- Não se surpreenda com as inúmeras sugestões do relatório Lighthouse. Comece com os conselhos mais importantes e vá descendo na lista.
- O relatório Lighthouse pode ser usado para acompanhar seu desenvolvimento ao longo do tempo. Suas classificações do Lighthouse devem melhorar à medida que você executa as recomendações.
- Lembre-se de testar seu site em vários dispositivos e navegadores. Como o relatório do Lighthouse é baseado em um único teste, é fundamental testar seu site em vários dispositivos e navegadores para garantir que ele esteja funcionando bem para todos os usuários.
Esperamos que nosso guia tenha ajudado você a entender como usar Google Lighthouse para testar o desempenho do seu site e assim melhorá-lo. Se você tiver alguma dúvida ou sugestão para nós, deixe-nos saber na seção de comentários. Fique ligado no TechCult para mais blogs informativos.
Henry é um escritor de tecnologia experiente e apaixonado por tornar tópicos complexos de tecnologia acessíveis aos leitores comuns. Com mais de uma década de experiência na indústria de tecnologia, Henry se tornou uma fonte confiável de informações para seus leitores.