Google Lighthouse: Como melhorar a pontuação e as métricas de desempenho

Por Leandro Lopes 13/09/2022
23 Min Leitura
Google Lighthouse: Como melhorar a pontuação e as métricas de desempenho
Google Lighthouse: Como melhorar a pontuação e as métricas de desempenho

Sempre que o Google faz alterações na forma como planeja classificar sites, todos precisam prestar atenção – e estamos nesse ponto agora. O Google deixou claras suas intenções ao lançar os Core Web Vitals como parte de um novo fator de classificação, e é algo que você precisa considerar se quiser que seu site WordPress permaneça relevante.

É por isso que, neste artigo, vamos nos aprofundar no que tudo isso significa e como você pode usar o Google Lighthouse para otimizar o desempenho do seu site.

O que é o Lighthouse do Google?

O Google Lighthouse é uma ferramenta gratuita e de código aberto que mede o desempenho do seu site e fornece uma série de métricas e insights para ajudar você a melhorar a experiência geral do usuário. A ferramenta em si é simples de usar e, em apenas alguns segundos, apresentará um relatório com todas as informações relevantes do Core Web Vitals, bem como alguns itens acionáveis ​​para melhorar vários aspectos do site, como SEO e acessibilidade na web – para que você possa avaliar exatamente o desempenho do seu site.

O que é o Lighthouse do Google?
O que é o Lighthouse do Google?

Essa pontuação de desempenho é calculada ponderando as várias métricas de desempenho e oferece uma visão abrangente do desempenho do seu site. Se você quiser entender mais sobre como a pontuação é calculada, há uma calculadora muito útil disponível aqui .

É muito importante que você execute uma auditoria do Lighthouse em seu site WordPress, pois isso pode trazer à luz certas fraquezas de desempenho com seu site que impactam negativamente a experiência do usuário e fornecer as informações necessárias para otimizar as coisas.

Entendendo o relatório e as métricas do Google Lighthouse

As métricas do Lighthouse são divididas em cinco categorias diferentes, a saber: Desempenho, Acessibilidade, Melhores Práticas, SEO e Progressive Web App (PWA). Todos eles servem para melhorar a qualidade geral das páginas da web.

1. Auditoria de Desempenho

Lighthouse no WordPress: Auditoria de Desempenho
Auditoria de Desempenho
  • A primeira pintura de conteúdo (FCP) marca o primeiro ponto em que um usuário pode ver qualquer coisa na tela e é considerada a velocidade de carregamento percebida como resultado. Essa métrica tem um peso de 10% em relação à sua pontuação de desempenho. Os melhores sites lá fora, estão executando em 1,5 segundos, mas enquanto seu FCP estiver abaixo de 2 segundos, você ainda será considerado no intervalo ‘rápido’, que é onde você precisa estar.
  • O Índice de velocidade (SI) mostra a rapidez com que o conteúdo de uma página da Web é visivelmente preenchido. Essa métrica também possui uma ponderação de 10% ao calcular a pontuação de desempenho. Idealmente, você está procurando um tempo de índice de velocidade inferior a 4,3 segundos – o que se correlaciona com uma pontuação de índice de velocidade de 75 e acima.
  • The Largest Contentful Paint (LCP) é uma métrica que mede quanto tempo leva para o maior elemento visível no site ser renderizado.Essa métrica específica é ponderada em 25%, tornando-a um dos elementos mais importantes para acertar para otimizar a pontuação de desempenho. Uma boa pontuação neste departamento é de cerca de 2,5 segundos ou menos, pois isso contribui para a melhor experiência do usuário.
  • O Time to Interactive (TTI) é uma métrica que identifica casos em que uma página parece interativa para um usuário, mas na verdade não é. O objetivo aqui é minimizar o tempo entre o FCP e o TTI. Essa métrica tem um peso de 10% na pontuação geral de desempenho. Um bom nível para atingir aqui é estar abaixo de 3,8 segundos, considerado ‘rápido’ pelo Google .
  • O Tempo Total de Bloqueio (TBT) quantifica a capacidade de resposta de carregamento da sua página à entrada do usuário. Ele pode ser usado para substituir sua pontuação FID (First Input Delay) nos dados do laboratório. Eles medem coisas diferentes (entrada do usuário versus interação do usuário), mas ao melhorar o TBT, você geralmente também melhora o FID, que é um Core Web Vitals. Este é outro componente crucial da pontuação de desempenho com um peso de 30%. Um bom tempo de TBT é considerado qualquer coisa menor que 300 milissegundos.
  • A mudança de layout cumulativa (CLS) mede a estabilidade visual de uma página, quantificando a frequência com que os usuários podem experimentar mudanças inesperadas no layout. Essa métrica tem um peso de 15% na pontuação geral de desempenho. Uma boa pontuação de CLS é considerada 0,1 ou menos, o que se aproxima da experiência ideal do usuário.

2. Auditoria de Acessibilidade no Google Lighthouse

Lighthouse no WordPress: Auditoria de Acessibilidade
Auditoria de Acessibilidade

A pontuação de acessibilidade refere-se à usabilidade do seu site para todos os usuários, em toda a sua diversidade. Idealmente, seu site deve funcionar tão bem para aqueles que têm deficiências visuais, motoras, auditivas ou cognitivas quanto para aqueles que têm a sorte de estar livres dessas preocupações.

Você deve apontar aqui para o mais próximo possível de um 100 perfeito. A maneira mais comum de melhorar isso é garantir que seu texto tenha alto contraste, para que seja fácil de ler. Seu site deve ser efetivamente navegado com apenas um teclado, e suas imagens devem ter os textos alternativos relevantes incluídos para aqueles que não podem vê-los.

O pensamento aqui está alinhado com os princípios das Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) 2.0 , que estabelece as várias práticas recomendadas para as quais todos devemos trabalhar.

Leia também

3. Auditoria de Melhores Práticas

Auditoria de Melhores Práticas
Auditoria de Melhores Práticas

Esta seção executa várias auditorias em seu site para procurar os componentes de desenvolvimento da Web de práticas recomendadas que proporcionam uma ótima experiência do usuário.

Essas são as frutas mais fáceis que você definitivamente deveria cuidar, então se você não está em 100 aqui, veja as auditorias que não foram aprovadas e implemente essas mudanças para otimizar essa métrica específica.

As auditorias aprovadas têm um ponto verde próximo a elas e cada seção é expansível. Se você clicar neles, encontrará uma explicação detalhada de cada auditoria.

lighthouse melhores praticas
lighthouse melhores praticas

4. Auditoria de SEO

Auditoria de SEO - Lighthouse
Auditoria de SEO – Lighthouse

A penúltima seção das métricas do Lighthouse é a seção de SEO que analisa seu site para garantir que ele seja otimizado para a classificação do mecanismo de pesquisa. Isso não é olhar para suas palavras-chave específicas, é claro, mas apenas garantir que a estrutura geral da sua página esteja bem configurada para fins de classificação.

Aqui, ele procurará conteúdo gerado automaticamente, esquemas de links, camuflagem, redirecionamentos sorrateiros, texto oculto, páginas de entrada, conteúdo raspado e afins – então não pense que você pode se safar com nada disso. Você realmente deve ser autêntico e acima da placa neste departamento.

5. Auditoria do Progressive Web App (PWA)

A última seção é o PWA. Essas verificações validam os aspectos de um Progressive Web App. Um PWA é uma API criada e aprimorada que oferece melhores recursos, confiabilidade e estabilidade para todos, onde quer que você esteja no mundo. Como exemplo, o Uber foi reconstruído do zero seguindo os princípios do PWA.

Auditoria do Progressive Web App (PWA)
Auditoria do Progressive Web App (PWA)

E isso compõe o sistema de medição Lighthouse 6.0!

Agora, vamos ver exatamente como testamos o desempenho.

Como testar velocidade e desempenho usando o Lighthouse

Existem quatro ferramentas diferentes que você pode usar para executar uma auditoria do Lighthouse em seu site. Todos eles usam as mesmas métricas explicadas acima, bem como os mesmos KPIs.

  • Web.Dev : uma ferramenta intuitiva que executa a auditoria completa (Desempenho, Acessibilidade, SEO e Melhores Práticas), mas não leva em consideração o dispositivo para o qual você está fazendo a análise.
  • Ferramentas para desenvolvedores do Google Chrome : a ferramenta mais completa que analisa todos os KPIs mencionados acima (mais o PWA) tanto em dispositivos móveis quanto em desktops .
  • Google PageSpeed ​​Insights (PSI) : a ferramenta mais popular que mede apenas o KPI de desempenho do seu site.
  • GTmetrix : uma ferramenta de desempenho popular que também mede as métricas de desempenho do Lighthouse.

1. Web.Dev

A primeira ferramenta é uma ferramenta baseada em navegador chamada Web.Dev , onde você simplesmente digita a URL do seu site, clica em ‘Executar auditoria’ e ele fará o seu trabalho.

Web.Dev
Web.Dev

Certifique-se de clicar no botão ‘View Report’ para se aprofundar em cada métrica e obter os insights de que você precisa.

O Web.dev não fornece dois relatórios diferentes para dispositivos móveis ou desktop, você obtém apenas um relatório de análise.

2. Ferramentas do desenvolvedor do Google Chrome

A segunda maneira de fazer isso seria nas ferramentas de desenvolvedor do próprio navegador Chrome. Para executar uma auditoria no Chrome, siga estas etapas:

  • Abra o Google Chrome no modo de navegação anônima.
  • Navegue até o site em que deseja executar a auditoria. Vamos dar uma olhada em wp-rocket.me.
  • Clique com o botão direito em qualquer lugar da página e clique em ‘ Inspecionar ‘.
Ferramentas do desenvolvedor do Google Chrome
Ferramentas do desenvolvedor do Google Chrome

Você precisará procurar a guia chamada ‘ Lighthouse ‘, que pode estar oculta atrás das setas na parte superior da seção de ferramentas do desenvolvedor.

Você precisará procurar a guia chamada ' Lighthouse '
Você precisará procurar a guia chamada ‘ Lighthouse ‘

Quando estiver lá, clique em ‘Gerar relatório’ para obter a auditoria completa do Lighthouse.

Clique em 'Gerar relatório
Clique em ‘Gerar relatório

Você também pode baixar a extensão do Chrome chamada “Lighthouse ”, mas o Google diz que “a menos que você tenha um motivo específico, você deve usar o fluxo de trabalho do Chrome DevTools em vez do fluxo de trabalho da extensão do Chrome. O fluxo de trabalho do DevTools permite testar sites locais e páginas autenticadas, enquanto a extensão não.”

3. Google PageSpeed ​​Insights (PSI)

O Google PageSpeed ​​Insights é a ferramenta mais usada entre nossos clientes para medir o desempenho. A ferramenta é bastante simples. Tudo o que você precisa fazer é inserir qualquer URL e analisá-lo em alguns segundos.

 Importante: o PSI é capaz de entregar apenas um relatório de desempenho do seu site. Não avalia as métricas “SEO, Acessibilidade e Melhores Práticas” contrárias ao Web.dev e às Ferramentas do Desenvolvedor do Google Chrome.

Google PageSpeed ​​Insights (PSI)
Google PageSpeed ​​Insights (PSI)

O relatório contém seis seções principais. Vamos examiná-los e ver como as métricas do Lighthouse são organizadas.

  • A pontuação global: que é a nota geral de desempenho do seu site. Pode ser vermelho (0-49), laranja (50-89) ou verde (90-100)
  • Os “Dados de Campo”: baseados em usuários da vida real
  • O “Lab Data”: um conjunto artificial de dados.

Dados de campo vs Lab definidos pelo Google:

“Os dados de campo são um relatório histórico sobre o desempenho de uma determinada URL e representam dados de desempenho anônimos de usuários no mundo real em uma variedade de dispositivos e condições de rede. Os dados do laboratório são baseados em uma carga simulada de uma página em um único dispositivo e um conjunto fixo de condições de rede”.

Os primeiros dados apresentados pelo Lighthouse incluem os Core Web Vitals e três outras métricas.

Os Principais Vitais da Web:

Lighthouse no WordPress: LCP - Google Core Web Vitals
LCP – Google Core Web Vitals
Core Web Vitals
Core Web Vitals

Aqui estão as outras quatro métricas também medidas pelo Lighthouse:

  • O Índice de Velocidade (SI)
  • Tempo para Interação (TTI)
  • Tempo total de bloqueio (TBT)
  • Primeira pintura de conteúdo (FCP).

A seção “Diagnóstico” informa o que melhorar.

Lighthouse no WordPress: Seção Diagnóstivo Google Page Speed
Seção Diagnóstivo Google Page Speed

A seção “Oportunidades” oferece algumas sugestões sobre como tornar o carregamento do seu site mais rápido.

Seção Oportunidades do Google Page Speed
Seção Oportunidades do Google Page Speed

A seção “ Auditorias aprovadas ”: É sempre reconfortante ver alguma cor verde ao executar uma auditoria. Esta parte basicamente diz o que você está fazendo certo.

Lighthouse no WordPress: Seção Auditoria Aprovada
Seção Auditoria Aprovada

4. GTmetrix

GTmetrix é outra ferramenta de desempenho popular que analisa o desempenho do seu site e mede as métricas do Performance Lighthouse. Você pode testar seu site em diferentes locais. Por padrão, a ferramenta realizará o teste na área de trabalho. Você só precisa incluir sua URL e clicar em ‘Testar seu site’.

Você só precisa incluir sua URL e clicar em 'Testar seu site
Você só precisa incluir sua URL e clicar em ‘Testar seu site

Depois que a auditoria for concluída, você receberá uma nota de desempenho e saberá como os Core Web Vitals estão se saindo:

Nota de desempenho no GTMetrix
Nota de desempenho no GTMetrix

Além disso, a ferramenta oferece várias guias, começando pelo Resumo. Será simples ver quanto tempo leva para a página carregar e quais são os principais problemas.

Navegue pelas guias do GTMetrix, começando pelo resumo

Navegue pelas guias do GTMetrix, começando pelo resumo
A guia Desempenho fornece uma visão geral completa das métricas do Lighthouse:
Guia Desempenho do GTMetrix
Guia Desempenho do GTMetrix

Recomendamos que você explore também as outras guias: elas fornecerão informações úteis sobre o desempenho do seu site.

Como analisar o relatório de desempenho do Lighthouse

Depois de chegar ao relatório, a próxima etapa é analisar os resultados e identificar como você pode melhorar a pontuação de desempenho do seu site.

Certifique-se de clicar no botão ‘Visualizar relatório’ quando chegar lá, caso contrário você ficará preso apenas às manchetes e não aos detalhes.

Relatório Lighthouse do Google
Relatório Lighthouse do Google

Ao clicar no relatório detalhado, você poderá examinar cada componente individualmente e ver exatamente o que está acontecendo, incluindo diagnósticos e auditorias aprovadas. Leia o relatório com atenção e certifique-se de abrir todas as abas para verificar todas as métricas ( Desempenho, Acessibilidade, Melhores Práticas, SEO e Progressive Web App ).

Leia o relatório com atenção e certifique-se de abrir todas as abas
Leia o relatório com atenção e certifique-se de abrir todas as abas

Leve o seu tempo trabalhando em cada um e observando onde o Lighthouse está sugerindo melhorias. Normalmente, a mensagem é bastante direta e intuitiva, portanto, você deve ser capaz de aceitar esses conselhos, alterar o que precisa ser alterado e, em seguida, executar o relatório novamente.

Agora, vamos nos concentrar na categoria de desempenho do nosso relatório Lighthouse.

Como ler as pontuações da seção Performance do Google Lighthouse?

A seção “Desempenho” mostra as pontuações do Core Web Vitals (FCP, LCP e CLS) e as métricas SI, TBT e TTI.

Seção Desempenho do Google Lighthouse
Seção Desempenho do Google Lighthouse

Ao ler a pontuação de desempenho incluída acima, podemos ver que:

  • A primeira pintura de conteúdo é de 0,8 s (o que também é bom, pois o Google define os limites em 2,5 s)
  • O índice de velocidade é de 1,3 s (que está abaixo do limite de 4,3 s recomendado pelo Google)
  • A maior pintura de conteúdo é de 0,8 s (que está abaixo dos 2,5 s recomendados pelo Google)
  • O tempo para interativo é de 1,8 s (o que é bom, pois a pontuação deve ser inferior a 5 s)
  • O tempo total de bloqueio é de 220 ms (precisa melhorar, pois o Google recomenda uma pontuação abaixo de 300 ms)
  • A mudança de layout cumulativa é de 0,036 s (o que também é aceitável pelo Google, visto que está abaixo de 0,1 s).

Interpretando uma pontuação de desempenho bom versus não tão bom:

Exemplo de uma boa pontuação (métricas com = bom)

Exemplo de uma boa pontuação
Exemplo de uma boa pontuação

Exemplo de métricas de pontuação não tão boas com = métricas ruins com = precisa de melhorias

Exemplo de métricas de pontuação não tão boas
Exemplo de métricas de pontuação não tão boas

Confira também nosso conteúdo sobre Google Panda: O que é, como funciona e suas diretrizes.

Como otimizar sua pontuação de desempenho do Lighthouse no WordPress

Existem várias maneiras de otimizar o desempenho do Lighthouse em seu site WordPress. Vamos analisar alguns deles para dar uma ideia de como você pode melhorar as métricas do Lighthouse:

  • Configure o cache de página que acelera significativamente o tempo de resposta do servidor e ajuda a melhorar o Largest Contentful Paint (LCP).
  • Otimize o cache do navegador para garantir que você tenha as políticas corretas para manter arquivos estáticos em seu navegador.
  • Otimize suas fontes, suas imagens e seu código para garantir que você não esteja carregando CSS desnecessário ou arquivos JavaScript não utilizados que atrapalhem seu conteúdo principal (e a pontuação do LCP). Você também pode usar uma ferramenta como o Imagify para otimizar o tamanho da sua imagem no seu site WordPress.
  • Otimize suas fontes – por exemplo, use o pré-carregamento de fontes para melhorar o desempenho do deslocamento de layout cumulativo (CLS).
  • Use uma rede de entrega de conteúdo (CDN) se estiver operando em vários países para garantir uma ótima experiência em todo o mundo.
  • Use a compactação no nível do servidor para reduzir o tamanho do arquivo do seu site para carregamento rápido.
  • Certifique-se de que todas as suas imagens e incorporações tenham dimensões – especialmente aquelas que você está adicionando manualmente usando seu código. O WordPress adicionará automaticamente todas as imagens que você enviar por meio do editor, mas não poderá capturar as imagens manuais. Esta ação irá ajudá-lo a melhorar o CLS.
  • Não injete dinamicamente nenhum conteúdo acima do conteúdo existente, a menos que seja em resposta à ação de um usuário. Mais uma vez, você reduzirá as Mudanças de layout cumulativas.
  • Adiar ou remover JavaScript ou CSS desnecessários – se você está lutando para melhorar o Tempo para Interação (TTI) e o Tempo Total de Bloqueio (TBT), você deve verificar se há algum JavaScript e CSS desnecessário que está diminuindo a renderização da página . Estes são normalmente os culpados comuns.
  • Minimize o trabalho do thread principal ou reduza o tempo de execução do JavaScript para melhorar o Índice de velocidade (SI).

Esses são apenas alguns exemplos de coisas que você pode fazer para otimizar sua pontuação no Lighthouse.

Conclusão sobre Google Lighthouse

Espero que este artigo tenha ajudado a desmistificar as métricas de desempenho do Lighthouse e fornecer algumas etapas concretas para otimizar a velocidade da página do seu site WordPress .

Se você não se sentir confortável para realizar os procedimentos acima, temos uma equipe de Especialistas em WordPress, preparados para levar seu projeto digital para o próximo nível!

Assine nossa Newsletter!

Fique por dentro das últimas atualizações de desempenho do WordPress e da web.
Direto para sua caixa de entrada a cada duas semanas.

Compatilhe este Conteúdo
Postado por Leandro Lopes
Seguir
É especialista em WordPress com mais de 10 anos de experiência no CMS, além de experiência em provedores de hospedagem, banco de dados, front-end e back-end em desenvolvimento web. Trabalhou ou teve participação em projetos ligado à empresas: Hopi Hari, iG, entre muitos outros