Os proprietários dos sites que estão preocupados com o ranqueamento no Google sabem que o buscador estabelece políticas para escolher quais são os primeiros resultados das pesquisas.

São mais de 200 normas que sempre estão sendo atualizadas. Isto é ainda mais importante para quem faz as páginas. Eles têm a responsabilidade de construí-las pensando em obter um posicionamento favorável no motor de busca.

Desenvolvedores do Google, tendo em mente a importância do desempenho dos sites, lançaram recentemente uma ferramenta que os avalia de forma prática, para ajudar os web developers tanto durante a criação como na atividade do site.

Este recurso é o Google Lighthouse.

Este artigo vai por você a par do que é, como usar e que informações ele fornece. Continue a leitura!

O Google Lighthouse
É uma ferramenta de código aberto que, como dito, analisa uma página e exibe um relatório sobre ela. O foco é a análise de desempenho dela. O Lighthouse retorna uma nota entre 0 e 100 em quatro quesitos que serão detalhados logo mais:

• Performance
• Acessibilidade
• Melhores práticas
• SEO (otimização para motores de busca)
• PWA (sigla em inglês para aplicação web progressiva)

Estas notas servem para indicar o que pode ser aprimorado, orientando o desenvolvedor quanto aos ajustes no HTML para um melhor ranqueamento. O aplicativo pode ser executado tanto como extensão do Google Chrome quanto por linha de comando. É importante ressaltar que é preciso ter, no mínimo, a versão 52 do navegador para que o aplicativo funcione corretamente.

Além de sinalizar os pontos em que o site precisa ser incrementado, ele também descreve os pontos positivos. Quer dizer, ele explica o porquê das aprovações. Assim, o desenvolvedor vai entender o que o Google considera relevante na hora de exibir os resultados e aplicará em todas as páginas que construir dali por diante.

O recurso retorna as informações em inglês inicialmente. Mas para quem não tem familiaridade com o idioma, o próprio Chrome oferece um serviço de tradução instantânea. Para ver a página em português, clique com o botão direito sobre ela e, no meu que aparecer, escolha a opção Traduzir para o português.

Core Web Vitals
O Lighthouse reúne informações sobre o Core Web Vitals. São uma iniciativa do Google que compreende um conjunto de dados organizados sobre requisitos vitais para a experiência do usuário. Em termos mais simples, são aspectos importantes da página que são avaliados e para saber se precisam ou não ser melhorados.
O Core Web Vitals recomenda a análise de métricas importantes como:

LCP
É a sigla para Largest Contentful Paint. Ela mede a performance de download da página em seu conteúdo principal. O ideal é que ele seja exibido em no máximo 2,5 segundos após o início do carregamento.

FID
Significa First Imput Delay. Essa é a métrica para interatividade do usuário com a página. Considera-se satisfatório quando o FID é menor 0,1 segundo. Para isso, quanto mais dedutiva for a página, melhor. Isto se consegue, principalmente, pelo planejamento da distribuição dos seus elementos.

CLS
É o Cumulative Layout Shift. Ela classifica a estabilidade visual da página, mensurando a mudança nas posições dos elementos em relação a onde estavam no primeiro carregamento. Um exemplo: talvez um usuário tente clicar em um botão que executa uma ação, mas ele muda de posição por causa do carregamento de um novo objeto. Detalhes assim tendem a prejudicar a interação, que é fundamental. 

Como o Lighthouse surgiu
Ele chegou há alguns anos para ajudar os desenvolvedores a melhorar seu trabalho quanto à exibição no Google. A gigante das buscas fez estudos sobre o comportamento dos usuários e diversos outros parâmetros, como acessibilidade e SEO para proporcionar aos usuários uma experiência otimizada e aos donos mais visibilidade.

A importância da ferramenta hoje
O principal problema dos sites hoje é exatamente a sua performance. O usuário moderno, em especial o público mais jovem geralmente é imediatista e nada paciente. Segundo estudo publicado no site Profissional de E-commerce, os sites lentos são os mais rejeitados. Mais de 60% dos usuários entrevistados afirmaram que, caso o site demore um pouco mais do que 5 segundos para carregar, procuram outro com o mesmo conteúdo.

Isto se aplica muito bem aos e-commerces. A pesquisa revelou que 79% dos visitantes mais frequentes deixam de comprar pela lentidão. Assim, ela gera insatisfação de ambos os lados.

Você se lembra das políticas que o Google leva em consideração ao ranquear os sites na busca orgânica? A velocidade de carregamento é uma das principais. O Lighthouse faz uma simulação de como é visitar o seu site com uma conexão de internet de velocidade baixa com um dispositivo móvel, que é o mais usado atualmente.

Então, sobram motivos para aplicar a ferramenta do Google e sua alternativa, o web dev. Você vai conhecê-la agora.

O Web Dev
É um recurso para desenvolvedores, também criado pelo Google. Ele indica melhorias técnicas para incrementar a performance do site. Esta alternativa funciona de forma integrada com o Google Lighthouse. 

O próprio buscador afirma que o web.dev nasceu para auxiliar os desenolvedores a aplicar as práticas mais atuais para os seus sites e aplicativos.

Assim como o Lighthouse, ele exibe, após um exame, notas referentes aos principais aspectos que envolvem o desempenho do site. É só copiar e colar a URL do site que você deseja investigar e pronto: o web.dev já retorna com os resultados.

Agora vamos à parte fundamental: o que é medido pelo Lighthouse? Veremos.

Métricas verificadas pelo Google Lighthouse

Performance
Com este relatório, você fica conhecendo as oportunidades para aumentar o desempenho da página. Esta auditoria favorece a otimização, para que o acesso dos usuários seja otimizado. Isto envolve a visualização e a interação deles com o conteúdo apresentado.

Os campos apresentados são:

• Métricas: velocidade de indexação, tempo de interação e tempo total de bloqueio;
• Oportunidades: caminhos para otimizar o site, como redimensionamento de imagens, remoção de CSS inúteis, carregamento antecipado de algumas solicitações mais importantes; 
• Diagnóstico: práticas recomendadas para aprimorar as pontuações de desempenho.

Acessibilidade
Quando se fala em acessibilidade, podemos entender como a facilidade que o usuário tem para navegar na página. A avaliação de acessibilidade, porém, só identifica alguns problemas por vez. O relatório final exibe os seguintes detalhes:

• Pontuação de auditoria: Informa a nota no quesito;
• Navegação: informa dificuldades de navegação, como páginas com títulos e links ausentes, por exemplo;
• ARIA: Aponta erros na codificação da página, como atributos vazios ou com valores inválidos;
• Nomes e etiquetas: diz quais elementos na página não possuem identificação, como texto alternativo faltando e links sem indicação precisa do destino;
• Contraste: mostra áreas do site com constraste de cores inadequada;
• Tabelas: aponta tabelas e listas sem formatação e desorganizadas;
• Áudio e vídeo: revela os que estão sem descrição, se os arquivos estão corrompidos ou falhas de reprodução;
• Localização: assinala falhas de tradução e localização de conteúdo;

Além dos pontos citados, o Lighthouse aponta itens para verificação manual, como organização de abas, por exemplo.

Melhores práticas
Estas boas práticas se referem à construção do código da página. Os fatores analisados são:

• Geral: indica erros no código que podem levar ao mau desempenho ou mesmo a travamentos: ausência do doctype HTML e erros de navegação, por exemplo;
• Desempenho: sugere maneiras de aprimorar a performance, como usar o HTTP/2;
• Segurança: exibe possíveis brechas, como a falta do uso do protocolo HTTPS;

Experiência de usuário: recomenda pontos para aprimoramento da interação com o usuário, como permissões de localização, de notificação, dentre outros;

SEO
O objetivo do SEO é organizar um conjunto de técnicas para aumentar as chances de fazer o site aparecer nas primeiras posições de uma busca orgânica. O relatório do Lighthouse apresenta os seguintes aspectos:

• Mecanismos de busca: mostra erros de otimização de SEO, como meta description e textos descritivos faltantes;
• Indexação: expõe as razões pelas quais a página não é elencada nas páginas de resultados do Google, como plug-ins;
• Compatibilidade com dispositivos móveis: indica o que pode ser melhorado em relação à visualização e navegabilidade nos celulares. Isto envolve o uso de fontes ilegíveis, objetos desproporcionais ou invisíveis e menus incompletos, só para citar alguns dos problemas;

A navegação por dispositivos móveis merece atenção especial. O Google adotou como parâmetro de ranqueamento os sites compatíveis com mobile. Aqueles que têm versões adaptadas ou exclusivas para celulares e tablets ganham mais visibilidade nas páginas de resultados. O buscador dá preferência para eles.

Isto é importante porque hoje há mais celulares do que desktops acessando a internet agora. A pesquisa TIC 2020, do IBGE, aponta que aproximadamente 60% dos internautas brasileiros usam exclusivamente telefones celulares.

É por esta razão que o Google se preocupa tanto em priorizar os sites desenvolvidos com a técnica Mobile First, que como o nome sugere, desenvolve os sites pensando primeiramente nos dispositivos móveis.

PWA
É uma auditoria que visa testar os aplicativos integrados à página. Veja o que é avaliado:

• Rapidez e confiabilidade: aponta se o carregamento do aplicativo é excessivamente lento em redes móveis;
• Otimização para PWA: mostra o quanto da página ainda precisa ser configurada para se obter uma tela inicial customizada, o que envolve uma cor tema e mais detalhes;
• Verificação manual: analisa se cada página possui uma URL, se existem impedimentos de rede na navegação entre uma página e outra.

Como otimizar o seu site com o Google Lighthouse
Embora o aplicativo ofereça uma infinidade de informações, a mecânica de utilização é bem simples. Você pode usá-lo de duas maneiras: instalando uma extensão no Chrome ou usando um atalho no próprio navegador.

Usando a extensão
Antes de tudo, é preciso lembrar que ela funciona na versão 52 ou posterior. Pesquise pela extensão na Chrome Web Store. Em seguida, clique no botão para instalar. 

Para usar, clique no botão de extensões, ao lado direito da barra de endereços do Chrome. O navegador pedirá para confirmar se deseja dar acesso à extensão. Dê a permissão, clicando em Generate Report e em seguida uma nova aba vai abrir, já executando a aplicação, que instantaneamente fará o estudo do site.

Logo de início, você já terá acesso às notas de performance, acessibilidade, melhores práticas, SEO e PWA. As cores verdes com notas maiores que 90 indicam uma boa atuação. As cores laranja e vermelha indicam a necessidade de alterações para melhorar o desempenho.

Usando o navegador
É só pressionar F12 no teclado com o Chrome aberto na página a ser avaliada. Uma alternativa é clicar com o botão direito e escolher a opção Inspecionar. Vai surgir do lado direito uma coluna com uma grande quantidade de informações. Clique em Lighthouse para começar o procedimento.

É possível escolher quais categorias deverão ser exploradas e se a ação deverá ser voltada para desktop ou mobile. Use a opção Generate Report para exibir a pontuação e as melhorias sugeridas.

Os usuários do Windows são muito beneficiados com o Lighthouse. Porém, se você usa o Linux Ubuntu na sua empresa, você também pode trabalhar com a ferramenta do Google, com a diferença de que a instalação e a análise são feitas por linha de comando.

Porque usar o Google Lighthouse
A função principal da ferramenta é testar os fatores de webdesign que o Google considera fundamentais. Os indicativos que você receberá são importantíssimos para corrigir problemas e fazer com que seu site seja notado rapidamente numa busca orgânica. Veja agora as principais razões para usar o Lighthouse a partir de já:

Facilidade: para quem ainda não tem experiência com métricas, análise de desempenho e SEO, tudo isso pode parecer complexo. Mas o Lighthouse traz estas informações de uma maneira simples de entender e para isso basta um clique.

Modificabilidade: ao detectar uma falha ou um campo para melhoria, ele exibe um checklist que orienta as correções, sempre visando o desempenho. Os relatórios consideram inclusive detalhes, como erros em uma linha de código.

Atualização: os desenvolvedores do Google sempre estão trabalhando em atualizações no aplicativo para que os testes sejam feitos de acordo com os padrões e políticas do motor de busca. Assim, o desenvolvedor local não precisa se preocupar com o gasto de tempo em métricas ultrapassadas.