Como usar o Google Lighthouse para melhorar a velocidade do site

Acompanhe as novidades e ultimas postagens.

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.
tela de resultados do google lighthouse

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.
bot√£o inspecionar
opção lighthouse no código da página
google lighthouse com a opção de analisar a 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.
opção ferramentas do desenvolvedor no chrome

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.
extens√£o google lighthouse

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.
gome do pagespeed insights

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.

resultados na ferramenta audoria de site
relatório de core web vitals

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

relatório de desempenho do site

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

detalhes do relatório de desempenho do site

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.
localizando a ferramenta auditoria de site no menu
ferramentas para novo projeto
configura√ß√Ķes de auditoria do sie

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.

Fonte

Compartilhar:

Deixe um coment√°rio