Muitos desenvolvedores do Google acreditam que o desempenho é um fator muito importante na construção das aplicações.

Os apps para smartphones possuem uma boa reputação para os usuários, em questão de desempenho e segurança. Mas, o grande problema são os websites mobile.

Apesar das gigantes empresas Google e Facebook criarem alternativas para melhorar esse quesito  — Facebook Instant Articles e Google Accelerated Mobile Pages — o problema ainda persiste.

Porém, a Google levou isso tão a sério, que já prioriza o desempenho nos resultados das buscas, levando em conta a velocidade das páginas. Afinal, um site mais rápido significa melhores posições nos mecanismos de pesquisa e usuários contentes.

No artigo a seguir, reunimos todas as informações sobre o Lighthouse e como usá-lo. Acompanhe!

O que é o Google Lighthouse?

O Lighthouse é uma ferramenta automatizada de código aberto que aprimora a qualidade dos apps da Web. Ele pode ser executado como extensão do Chrome ou por linha de comando (NodeJS).

O Lighthouse simula diversas situações que podem afetar a experiência do usuário. Ele executa uma série de testes na página e gera um relatório sobre o desempenho.

No relatório final, você poderá usar os testes que apresentaram falhas como indicadores do que pode ser melhorado no seu site.

Lighthouse x Page Speed Insights: qual a diferença?

Na prática, o Lighthouse fornece um relatório completo da sua página, com base em diversas métricas. Ela avalia o desempenho, SEO, acessibilidade e outras boas práticas para apresentar a pontuação geral. 

Por outro lado, o PageSpeed Insights realiza medições a partir do Lighthouse. Então, apresenta um relatório completamente focado no desempenho do site. As métricas utilizadas nesse cálculo de desempenho são:

  • Tempo de Renderização de Primeiro Conteúdo (First Contentful Paint – FCP);
  • Speed Index (Índice de Velocidade – SI);
  • Tempo de Renderização de Maior Conteúdo (Largest Contentful Paint – LCP);
  • Tempo Para Interativo (Time to Interactive – TTI);
  • Tempo Total de Bloqueio (Total Blocking Time – TBT);
  • Mudança de Layout Cumulativa (Cumulative Layout Shift – CLS).

Como funciona o teste de desempenho?

lighthouse como funciona

Conforme explicamos mais acima, a principal função do Lighthouse é testar os fatores de web design que o Google considera essenciais para um site. Essa avaliação é feita com base nos itens a seguir:

  • desempenho: mede o desempenho de agilidade da página a partir da simulação de determinados parâmetros, como a velocidade de carregamento do site em uma conexão 4G;
  • Progressive Web Application: verifica se o seu site oferece uma experiência de usuário fluida e moderna, semelhante a um aplicativo;
  • acessibilidade: avalia os níveis de acessibilidade da página, vulnerabilidades e outros aspectos;
  • melhores práticas: confere se o site se enquadras nas recomendações do Google;
  • SEO: indica se é necessário revisar ou melhorar o SEO da página para impulsionar a classificação nos mecanismos de busca

Todos esses fatores representam o desempenho geral de uma página. No relatório final, constará uma pontuação que indica os principais pontos de melhoria do site. Para entender melhor como isso funciona, acompanhe o seguinte tópico.

Pontuação de desempenho no Lighthouse

Geralmente, as métricas utilizadas pelo Lighthouse afetam a pontuação de desempenho do site, mas não o diagnóstico e os resultados de oportunidades. Por isso, ao melhorar esses fatores, provavelmente haverá um aumento nos valores das métricas. 

Flutuações na pontuação de desempenho

Grande parte das variações na pontuação geral de desempenho e nos valores das métricas, não estão diretamente relacionadas com o Lighthouse. Tais flutuações ocorrem devido à mudanças nas seguintes condições:

  • testes A/B ou mudanças nos anúncios impulsionados;
  • alterações no tráfego da Internet;
  • testes executados em dispositivos distintos, como um notebook de baixo desempenho e um desktop de alto desempenho;
  • extensões de navegadores que modificam solicitações da rede;
  • uso de softwares antivírus.

Além disso, fica mais fácil entender a pontuação do Lighthouse se você visualizá-la de forma distribuída, em vez de um número único. 

Ponderações na pontuação de desempenho

A pontuação de desempenho é o resultado da média ponderada das métricas. Portanto, as métricas de maior peso, afetam mais a pontuação geral. Vale ressaltar que as pontuações das métricas não aparecem no relatório, mas são calculadas internamente. 

Esses valores mudam conforme o tempo, pois o Lighthouse realiza pesquisas com usuários periodicamente. Assim, fica mais fácil compreender o que eles percebem que afetam o desempenho de um site. Em suma, os pesos das métricas são distribuídos dessa forma:

Pesos no Lighthouse 8:

  • First Contentful Paint: 10%;
  • Speed Index: 10%;
  • Largest Contentful Paint: 25%;
  • Time to Interactive: 10%;
  • Total Blocking Time (tempo de bloqueio total): 30%;
  • Cumulative Layout Shift (CLS): 15%.

Peso no Lighthouse 6:

  • First Contentful Paint: 15%;
  • Speed Index: 15%;
  • Largest Contentful Paint: 25%;
  • Time to Interactive: 15%;
  • Total Blocking Time: 25%;
  • Cumulative Layout Shift (CLS): 5%.

Fatores determinantes para as pontuações das métricas

Assim que o Google Lighthouse reúne todas as métricas de desempenho, ele converte os valores brutos em uma pontuação de 0 a 100. Vejamos a métrica LCP, por exemplo.

Seu valor representa o tempo de início do carregamento da página feita pelo usuário, até a renderização completa do seu conteúdo. As páginas de melhor desempenho renderizam em cerca de 1.220 milissegundos, recebendo uma pontuação de 99.

Além disso, a ferramenta usa um modelo de curva logarítmica de pontuação, com base nos dados do HTTPArchive. Segundo esses dados, uma pontuação de 50 significa um desempenho mediano. Já a pontuação a partir de 90, indica um desempenho bom/verde.  

Relação de desempenho desktop vs celular

As curvas de desempenho citadas acima, são definidas a partir de informações reais. No Lighthouse 6, por exemplo, todos os dados eram colhidos em dispositivos móveis. Mesmo assim, essas informações eram utilizadas quando a ferramenta era executada em desktop. 

Como resultado, os números indicavam pontuações artificialmente infladas. Felizmente, o Lighthouse 6 corrigiu esse erro, e agora existem pontuações específicas para cada dispositivo. 

Codificação das pontuações por cores

Todas as pontuações das métricas, bem como as de desempenho são representadas por cores. Essas cores indicam o seguinte:

  • vermelho: 0 a 49, ruim;
  • laranja: 50 a 89, precisa melhorar;
  • verde: 90 a 100, bom. 

A fim de oferecer uma experiência de usuário de qualidade, os sites precisam se adequar para ter uma pontuação entre 90 a 100. Entretanto, conseguir a pontuação máxima é extremamente raro e, portanto, não é algo esperado. 

4 formas de auditar uma URL com o Lighthouse 

lighthouse auditoria

O Lighthouse pode ser executado de quatro formas: pela extensão do Chrome, por linha de comando, pelo site web.dev/measure e com o Chrome DevTools.

A extensão do Chrome oferece uma interface mais fácil de usar para a leitura de relatórios. Já a ferramenta de linha de comando, permite que você integre o Lighthouse a sistemas de integração contínua. Veja as outras possibilidades abaixo. 

1. Extensão do Chrome

Baixe o Google Chrome 52 ou posterior. Depois, instale a extensão do Chrome do Lighthouse.

Feito isso, acesse a página que quer verificar. Clique no ícone do Lighthouse na barra de ferramentas do Chrome.

Caso o ícone não apareça na barra de ferramentas, ele poderá estar oculto no menu principal do Chrome. Após clicar no ícone, você deverá ver um menu.

Você pode clicar em “Options” e definir os testes a serem feitos, como Progressive Web App, Performance, Acessibilidade e Melhores práticas.

Para executar os testes do Lighthouse, clique no botão “Generate report”.

Após a conclusão das avaliações, o programa abre uma nova guia e exibe um relatório com os resultados da página. Confira o resultado realizado com o site do Google Brasil.

2. Com linha de comando

Primeiro, instale o Node na versão 5 ou posterior. Em seguida, instale o Lighthouse como módulo global do Node:

  • npm install -g lighthouse

Para executar a avaliação do Lighthouse em uma página, digite:

  • lighthouse https://google.com.br

Para receber ajuda, digite:

  • lighthouse –help

Lembrando que se trata de um software de código aberto. Ele está na versão Beta, então você pode alterá-lo a qualquer momento, além de poder resolver os problemas encontrados no rastreador de problemas do projeto.

3. Pelo site web.dev/measure/

Outra ferramenta que permite testar sua página com facilidade e rapidez é o web.dev/measure

Comece acessando o site Web.dev e cole a URL da sua página para iniciar a auditoria. O processo leva somente alguns segundos e gera relatórios detalhados com a pontuação geral. 

Cada resultado também evidencia os testes de métricas realizados, bem como o que você precisa fazer para melhorar o desempenho da página. 

Contudo, é importante lembrar que não há a necessidade de alcançar a pontuação máxima (100). Afinal, o Google não considera esse número, já que é extremamente complicado de atingi-lo. 

Então, basta considerar as recomendações do relatório e aprimorar o máximo que puder. 

4. Com o Chrome DevTools (Ferramentas para Desenvolvedores)

Outra possibilidade é executar a auditoria com o DevTools, uma ferramenta para desenvolvedores. Confira o passo a passo:

  • acesse a URL que pretende auditar;
  • selecione a opção “DevTools” para exibir as configurações;
  • escolha o tipo de dispositivo para a simulação — se for um celular, selecione a opção “Móvel” na categoria “Dispositivos”;
  • no setor “Categorias”, selecione “Performance”;
  • clique em gerar relatório e aguarde entre 10 a 30 segundos;
  • feito isso, o DevTools exibe um relatório completo do desempenho do seu site;
  • para saber mais detalhes, clique em um item do relatório e acesse a documentação do problema citado.

Entenda as categorias no relatório do Lighthouse

lighthouse

Agora que você já sabe como realizar a auditoria na sua página de formas variadas, vamos explicar as categorias do relatório, qual é a sua relevância, sinalizar quais verificações são feitas em cada auditoria e outros detalhes. Veja mais abaixo. 

Auditoria de performance

Nesse relatório, a ferramenta indica quais oportunidades você deve aproveitar para melhorar o desempenho de carregamento do seu site. 

A auditoria permite a otimização da página, a fim de facilitar o acesso dos usuários, bem como a visualização e interação dos mesmos com o seu conteúdo. Nesse sentido, todo o processo é realizado com base:

  • na pontuação de desempenho: detalhada nos tópicos anteriores;
  • nas métricas: Speed Index, Tempo de Interação, Tempo Total de Bloqueio e outros indicadores, também citados no decorrer deste conteúdo;
  • oportunidades: dicas de como otimizar o site, como redimensionar as imagens, remover CSS não utilizado, pré-carregar solicitações importantes e outros; 
  • diagnóstico: recomendações de boas práticas para obter melhores pontuações de desempenho, como evitar um tamanho excessivo de DOM e outras.

Auditoria de acessibilidade

São verificações que detectam oportunidades para melhorar a acessibilidade do site. Contudo, a auditoria só consegue identificar um pequeno subconjunto de problemas por vez. Assim, o relatório final também indica realizar o teste manual.  

Os pontos destacados na auditoria de acessibilidade são:

  • pontuação de auditoria: apresenta a pontuação de desempenho, conforme destrinchamos mais acima;
  • navegação: detecta problemas de navegação, como página sem título, sem links, ausência de elementos em ordem decrescente e outros;
  • ARIA: identifica falhas de construção da página, como atributos sem valores válidos e outros; 
  • nomes e etiquetas: aponta quais elementos da página estão sem identificação, como imagens sem texto alternativo, links sem nomes discerníveis e outros;
  • contraste: mostra quais áreas do site não apresentam uma taxa de contraste de cores suficiente;
  • tabelas e listas: informa quando as tabelas de listas da página estão desorganizadas e sem formatação;
  • práticas recomendadas: indica quais as práticas recomendadas de configuração da página, conforme as exigências do Google;
  • áudio e vídeo: mostra quando os arquivos de vídeo e áudio presentes no site estão sem descrição, com falhas de reprodução de áudio e outros problemas;
  • internacionalização e localização: indica falhas de tradução e localização do conteúdo presente na página, como ausência de Libras e outros;
  • itens adicionais para verificar manualmente: recomendações de verificação manual dos problemas de acessibilidade, como analisar se a página possui abas organizadas e outros.  

Auditoria de melhores práticas

Destaca oportunidades para aprimorar a qualidade do código da página de forma geral. Os pontos contidos no relatório de melhores práticas são:

  • práticas recomendadas gerais: aponta erros no código da página, como ausência do doctype HTML, erros de navegação registrados no console e outros;
  • desempenho da página: indica formas de melhorar o desempenho da página, como utilizar HTTP/2 para todos os recursos e outros;
  • segurança da página: apresenta possíveis falhas de segurança da página, como a não utilização do HTTPS e outros;
  • experiência de usuário: mostra recomendações para aprimorar a experiência do usuário dentro da página, como permissões de geolocalização, notificação e outros;
  • tecnologias obsoletas: mostra quais tecnologias obsoletas podem prejudicar o desempenho da página e como evitar isso, como o uso de aplicações em Cache e outros;
  • auditorias de diagnóstico: exibe uma biblioteca de JavaScript.

Auditoria de SEO

Essa auditoria mostra como deixar sua página otimizada para que apareça nos primeiros resultados de busca do Google. Também apresenta recomendações para a verificação manual. Os itens apontados nesse relatório são:

  • garanta que os mecanismos de busca entendam seu conteúdo: aponta erros de otimização de SEO do site, como ausência de meta description, ausência de texto descritivo no links e outros;
  • garanta que os mecanismos de busca sejam capazes de rastrear e indexar sua página: evidência os fatores que impedem a indexagem da página nos mecanismos de busca, como plugins usados no documento e outros;
  • deixe sua página compatível com dispositivos móveis: mostra os pontos que tornam seu site incompatível com dispositivos móveis, como fontes ilegíveis, pontos de toque com tamanhos inadequados e outros;
  • itens a verificar manualmente: recomendações de verificação manual complementares, como a estrutura das informações contidas na página.

Auditoria de PWA

Por fim, mas não menos importante, essa auditoria busca validar os requisitos de uma Aplicação Web Progressiva (Progressive Web App). Os pontos avaliados são:

  • rapidez e confiabilidade: indica quando o carregamento da página é lento demais em redes móveis e outros aspectos;
  • possibilidade de instalação: aponta se o site não usa HTTPS, não registra um service worker e outros pontos;
  • otimização para PWA: aponta quanto a página não está configurada para uma tela inicial personalizada, não apresenta uma cor tema para a barra de endereço e outros; 
  • itens adicionais para verificar manualmente: verificar manualmente se cada página possui uma URL, se há bloqueio e rede nas mudanças de página e outros.

Afinal, o que é uma Aplicação Web Progressiva (PWA)?

lighthouse pwa

Desde o Google I / O – 2016, desenvolvedores do Google estão trabalhando duro na construção do Lighthouse, um aliado incrível para a construção de grandes Aplicativos da Web Progressiva – Progressive Web App (PWA). 

Segundo Pete LePage, desenvolvedor do Google, Progressive Web Apps são experiências que combinam o melhor da Web e o melhor dos aplicativos.

Um Progressive Web App é:

  • progressivo: funciona para qualquer usuário, independentemente do navegador escolhido, pois é criado com aprimoramento progressivo;
  • responsivo: se adequa a qualquer formato — desktop, celular e tablet;
  • independente de conectividade: trabalha off-line ou em redes de baixa qualidade;
  • semelhante a aplicativos: parece com aplicativos para os usuários, com interações e navegação de estilo de aplicativos;
  • seguro: fornecido via HTTPS para evitar invasões e garantir que o conteúdo não seja roubado ou alterado;
  • descobrível: pode ser identificado como “aplicativo” graças aos manifestos W3C;
  • instalável: permite que os usuários “guardem” os aplicativos mais úteis em suas telas iniciais sem precisar acessar uma loja de aplicativos;
  • linkável: compartilhe facilmente por URL, não requer instalação complexa.

Como usar o Lighthouse para otimizar a performance do site?

lighthouse otimizar performance

De modo geral, existem alguns pontos que você pode se concentrar para melhorar o desempenho do seu site, bem como a interação dos usuários com seu conteúdo. Veja mais detalhes abaixo.

1. Priorize as orientações da seção “Oportunidades”

Considere as recomendações de oportunidades para melhorar a otimização da página, como:

  • eliminar os recursos de render-blocking;
  • redimensionar imagens corretamente;
  • remover imagens offscreen;
  • minificar CSS para reduzir o tempo de carregamento;
  • minificar JavaScript;
  • remover CSS não utilizado;
  • codificar imagens de forma eficiente;
  • aplicar imagens em formatos modernos;
  • comprimir recursos baseados em texto;
  • pré-conectar às origens necessárias;
  • reduzir os tempos de resposta do servidor (TTFB);
  • evitar vários redirecionamentos de página;
  • pré-carregar solicitações importantes;
  • usar formatos de vídeo para conteúdos animados;
  • reduzir o impacto do código de terceiros;
  • evitar animações não compostas;
  • adiar componentes de terceiros com uma fachada.

2. Para otimizações adicionais, faça os ajustes de “Diagnóstico”

Finalize as otimizações com as recomendações contidas no setor “Diagnóstico” do relatório:

  • evitar enormes cargas de rede;
  • servir ativos estáticos com uma política de cache eficiente;
  • evitar um tamanho excessivo de DOM;
  • evitar encadear solicitações críticas;
  • usar marcas e medidas de tempo do usuário;
  • reduzir o tempo de execução do JavaScript;
  • minimizar o trabalho do thread principal;
  • garantir que o texto permaneça visível durante o carregamento das fontes web.

Conclusão

Uma das maiores dificuldades no desenvolvimento web é criar páginas que sigam todos os padrões do Google. Ainda mais quando tais fatores mudam periodicamente. 

Nesse sentido, o Google Lighthouse é uma ferramenta incrível para realizar testes de desempenho, segurança e usabilidade. 

Assim que o teste é finalizado — baseado nas métricas fundamentais do Google — você recebe um checklist para aprimorar o desempenho do seu site. 

Mesmo precisando melhorar em diversos aspectos, o aplicativo cumpre com seus relatórios e consegue entregar o que promete.

Caso precise de ajuda com o desempenho do seu site, com o software da Google ou se quiser dar algum feedback sobre o artigo, deixe seu comentário!