Como usar o Google Lighthouse para melhorar a velocidade do site

Conforme o Google, a taxa de rejeição de um site pode aumentar em 123% se a velocidade de carregamento da página aumentar de 1 segundo para 10 segundos.

Felizmente, desde então, a gigante da tecnologia oferece um conjunto de ferramentas valiosas para ajudar os usuários a melhorarem a velocidade do seu site e a experiência geral dos visitantes. E uma dessas ferramentas é o Google Lighthouse.

O que é o Google Lighthouse?

O Google Lighthouse é uma ferramenta gratuita projetada para melhorar o desempenho de um site. É um software de código aberto para qualquer pessoa poder usá-lo em qualquer página.

A ferramenta audita a acessibilidade e o SEO de uma página, com foco particular nos Core Web Vitals.

O que são os Core Web Vitals?

Core Web Vitals são um conjunto de métricas que o Google desenvolveu para medir a velocidade das páginas e a experiência geral do usuário. Em 2021, o Google introduziu a atualização do algoritmo Core Web Vitals, que mede as métricas de um site.

Essas métricas têm se tornado cada vez mais importantes para os proprietários de sites que desejam fornecer uma boa experiência ao usuário e conseguir uma classificação mais alta no Google.

Os três Core Web Vitals são:

1. Largest Contentful Paint (LCP): quanto tempo leva para o maior conteúdo da página carregar acima da dobra. Saiba mais sobre o LCP em nosso guia.
2. First Input Delay (FID): quanto tempo leva para uma página responder após uma interação do usuário. Confira nosso guia sobre FID.
3. Cumulative Layout Shift (CLS): quanto do conteúdo se move à medida que a página carrega. Leia mais sobre o CLS.

Leia mais: Core Web Vitals: um guia para melhorar a velocidade da página

O que você pode verificar com o Google Lighthouse

Você pode medir os Core Web Vitals do seu site usando o Google Lighthouse. A ferramenta audita seu site com base no dispositivo e na conexão do usuário. No entanto, você pode especificar o dispositivo e o relacionamento que deseja que a ferramenta emule nos seus testes.

Os resultados desses testes ajudarão você a saber quais estágios do carregamento da página você precisa otimizar para fornecer uma boa experiência ao usuário.

Como usar o Google Lighthouse

Você pode executar o Google Lighthouse com o navegador Chrome (no Devtools) ou como uma extensão do Chrome.

Após executar a auditoria da sua página, o Lighthouse gerará um relatório com cinco áreas diferentes:

1. Desempenho (Performance): inclui elementos que tornam sua página mais lenta, incluindo imagens e recursos.
2. Acessibilidade (Accessibility): audita a acessibilidade do seu conteúdo para os usuários, incluindo o uso de tecnologia assistiva.
3. Boas práticas (Best Practices): identifica qualquer elemento de desenvolvimento que não segue as diretrizes atuais e as melhores práticas recomendadas.
4. SEO: destaca os problemas de otimização da página, mas não é abrangente.
5. Progressive Web App (PWA): indica o desempenho do seu aplicativo e problemas com a implementação.

Como usar o Lighthouse no Chrome Devtools

No Chrome, você pode executar uma auditoria do Google Lighthouse no Chrome Devtools.

Para acessá-las, você precisa:

1. Baixar e instalar o Google Chrome para Desktop (caso ainda não o tenha).
2. Acessar a página que você deseja auditar.
3. Clicar com o botão direito do mouse em qualquer lugar da página e selecione Inspecionar.
4. Esse recurso abrirá um painel na parte inferior ou à direita da página. Selecione o Lighthouse na barra de ferramentas. (Se você não encontrar a opção, clique nas duas setas no final da barra de ferramentas).
5. O painel abrirá a ferramenta Lighthouse. Selecione Analisar carregamento de página.

Para acessar o Lighthouse com o Chrome Devtools:

1. Abra o navegador Chrome e, em seguida, abra o menu selecionando os três pontos à direita da barra de endereços.
2. Selecione Mais ferramentas.
3. Selecione Ferramentas do desenvolvedor.

Como usar o Lighthouse como uma extensão do Chrome

1. Faça o download do Google Chrome para computador.
2. Visite a Chrome Webstore.
3. Baixe e instale a extensão Lighthouse.
4. Reinicie seu navegador.
5. Clique no símbolo do farol ao lado da barra de endereços.
6. Selecione Generate report.

Qual é a diferença entre o Google Lighthouse e o PageSpeed Insights?

Além do Lighthouse, o Google também oferece outra ferramenta de auditoria: o PageSpeed Insights. Esta ferramenta pontua a velocidade de uma página e fornece uma lista de melhorias.

Ambas as ferramentas auditam aspectos semelhantes da página, incluindo velocidade de carregamento e os Core Web Vitals. No entanto, o PageSpeed Insights se concentra apenas em melhorar a velocidade, enquanto o Lighthouse cobre vários aspectos da página.

Recomendamos usar ambas as ferramentas em conjunto, para melhorar seu site de forma mais ampla.

Como usar o PageSpeed Insights

Para usar o PageSpeed Insights:

1. Acesse o PageSpeed Insights.
2. Copie e cole a URL da sua página.
3. Clique em Analisar.

Outras maneiras de melhorar seu site

Quando se trata de rastrear seus Core Web Vitals, quanto mais informações você tiver, melhor. Você pode centralizar os dados coletados do Lighthouse, PageSpeed Insights e outras ferramentas do Google em aplicativos de terceiros.

A ferramenta Auditoria de site, da Semrush, audita o SEO técnico do seu site, incluindo a velocidade e o desempenho das páginas.

O relatório de Core Web Vitals exibe os dados do Google Lighthouse em um formato fácil de ler, incluindo uma lista das páginas analisadas. Você pode editá-la diretamente na ferramenta e adicionar ou remover páginas para novos resultados.

Para uma visão geral do desempenho do seu site, selecione o relatório Desempenho na aba Visão Geral da ferramenta:

Este relatório fornece uma pontuação geral do desempenho do site, bem como a velocidade média de carregamento da página:

Você pode usar a tabela de Problemas de desempenho para revisar quaisquer questões que estejam afetando a performance do seu site. Selecione Ler mais para saber mais detalhes sobre cada problema e como corrigi-lo.

Para começar a usar a ferramenta Auditoria de site:

1. Entre na sua conta Semrush. Se você não tiver uma conta, pode criá-la gratuitamente.
2. Na barra de ferramentas, selecione Projetos para visualizar seu(s) projeto(s):
3. Clique no projeto da sua preferência e selecione Auditoria do site no painel de ferramentas.
4. A ferramenta solicitará que você defina as configurações de auditoria. Você poderá definir o escopo de rastreamento, proibir URLs e adicionar outras informações do site.
5. Selecione Iniciar auditoria do site.

Leia mais: Atualização do Core Web Vitals de 2021: avaliando o impacto inicia

Conclusão

A velocidade da página é tão importante para o Google quanto para seus usuários. Uma página lenta pode aumentar sua taxa de rejeição e até mesmo prejudicar sua classificação orgânica.

O Google Lighthouse ajuda você a auditar as páginas do seu site e identificar áreas específicas para melhorar a velocidade de carregamento e a experiência geral do usuário. Integre o Lighthouse com outras Devtools do Google ou aplicativos semelhantes para uma análise mais abrangente do desempenho do seu site.