Categorias do Site

A Revista do Profissional Web

Otimização da web com auditorias do Lighthouse

Melhore o desempenho do seu site usando auditorias do Lighthouse para identificar e resolver problemas de performance.

Desenvolvimento WebTecnologias e Inovações
Logotipo do Google Chrome sobreposto a uma paisagem noturna com um farol iluminado e céu estrelado.

Páginas que carregam lentamente podem resultar de várias causas, tornando-se um dos desafios mais complexos no desenvolvimento web. O Lighthouse (LH) é uma ferramenta gratuita e open-source do Google que pode ajudar a detectar e resolver problemas de desempenho do seu site.

Neste artigo, exploramos o que são as auditorias do Lighthouse, como interpretá-las e como gerá-las de diferentes maneiras. Para os exemplos, usamos a página inicial da Mozilla Developer Network.

O que são auditorias do Lighthouse?

As auditorias do Lighthouse são verificações diagnósticas automatizadas que avaliam diferentes aspectos da experiência do usuário e desempenho de uma página web. Elas fazem parte de um relatório do Lighthouse que você pode gerar executando a ferramenta LH em uma página web. A maneira mais fácil de fazer isso é usar a guia Lighthouse no Chrome DevTools.

Há quatro categorias de auditorias do Lighthouse — Desempenho, Acessibilidade, Melhores Práticas e SEO. Neste artigo, focamos nas auditorias de desempenho do Lighthouse.

Por que as auditorias de desempenho do Lighthouse são importantes?

Atualmente, existem 38 auditorias de desempenho diferentes no Lighthouse. Cada uma aborda o desempenho da web de um ângulo diferente para ajudar a entender as razões por trás de pontuações Web Vitals ruins ou medianas e páginas lentas.

Além da avaliação numérica, cada auditoria LH oferece recomendações práticas sobre como você pode melhorar seu resultado. Ao resolver os problemas de desempenho web identificados pelas auditorias do Lighthouse, você pode melhorar suas pontuações de campo que afetam o ranking SEO.

O Lighthouse mede os Web Vitals (incluindo os Core Web Vitals) e os mostra no topo de cada relatório LH. No entanto, o Lighthouse é uma ferramenta de auditoria de sites em laboratório, o que significa que os testes de desempenho são executados em um ambiente simulado. O Google também mede os Web Vitals usando o Monitoramento Real de Usuários (RUM) e publica os resultados no Relatório de Experiência do Usuário do Chrome (CrUX).

6 maneiras de executar o Lighthouse

Todas as opções são baseadas na mesma API do Lighthouse, o que significa que usam as mesmas fórmulas para os cálculos. A principal diferença entre as opções é o ambiente de teste, que pode causar variação nos resultados.

Lighthouse no Chrome DevTools

A maneira mais fácil de executar o Lighthouse é abrir o Chrome DevTools no modo anônimo. Navegue até a guia Lighthouse e execute um teste de desktop ou móvel.

PageSpeed Insights (PSI)

PageSpeed Insights (PSI) é a ferramenta online de teste de desempenho web do Google que mostra os Web Vitals do relatório CrUX e os relatórios do Lighthouse executados em servidores remotos do Google.

Aproveite ao máximo as auditorias do Lighthouse

Questões de desempenho web são parte da sua dívida técnica. Elas podem surgir de códigos legado, infraestrutura de baixo desempenho, conflitos no código e outros fatores. Auditorias do Lighthouse permitem que você divida sua dívida técnica relacionada ao desempenho web em mudanças pequenas e acionáveis.

Para otimizar o desempenho do seu site, priorize auditorias com os piores resultados e maior impacto de desempenho. A abordagem mais eficaz é integrar verificações de auditoria do Lighthouse ao seu fluxo de trabalho regular de desenvolvimento web.

  • Enfrentando a Complexidade com GraphQL

    Descubra como GraphQL facilita o desenvolvimento de soluções inteligentes com IA.

    Descubra como GraphQL facilita o desenvolvimento de soluções inteligentes com IA.

    Ler notícia completa
    Banner de podcast da UX Magazine intitulado

  • UX: Emoções Além das Telas no Design

    Descubra como o design emocional transforma experiências, indo além das telas e criando conexões humanas.

    Descubra como o design emocional transforma experiências, indo além das telas e criando conexões humanas.

    Ler notícia completa
    Símbolo abstrato em tons de marrom e laranja que se assemelha a uma pessoa estilizada com braços estendidos e uma perna erguida.

  • Como usar CSS line-clamp para limitar texto

    Aprenda a usar a propriedade CSS line-clamp para limitar linhas de texto e melhorar a aparência do layout.

    Aprenda a usar a propriedade CSS line-clamp para limitar linhas de texto e melhorar a aparência do layout.

    Ler notícia completa
    Fundo gradiente em tons de laranja e violeta com o texto

  • Promise.all ainda é relevante em 2025?

    Antes das promises serem introduzidas nativamente no JavaScript, usávamos muitos callbacks para tarefas assíncronas. É comum ver callbacks sendo usados, pois muitos desenvolvedores podem ainda pensar que callbacks e promises são o mesmo, mas não são. Quando promises foram introduzidas, substituíram amplamente os callbacks, tornando a sintaxe mais compreensível. Em 2025, com async/await, Promise.allSettled, Promise.any […]

    Promise.all é crucial para tarefas assíncronas, mas novas alternativas surgem em 2025. Saiba quando usá-lo.

    Ler notícia completa
    Logotipo do JavaScript (JS) em quadrado amarelo sobre fundo com ondas suaves em tons de branco e cinza claro.

  • Equilibrando IA e UX: O Desafio do Design Humanizado

    A IA está sendo integrada aos fluxos de trabalho de design modernos, ajudando na geração de conteúdo, ideação e prototipagem. Isso aumenta a eficiência das equipes de design, aprimorando a forma como criamos, pensamos e resolvemos problemas. No entanto, a IA também traz preocupações ao processo de design, como a possível perda de foco no […]

    Descubra como manter o design UX humanizado enquanto utiliza IA para otimizar processos e aumentar a produtividade.

    Ler notícia completa
    Mão robótica branca tocando a ponta do dedo de uma mão humana contra um fundo colorido em tons de arco-íris.

  • A Revolução dos Navegadores com IA: Impactos e Futuro

    Há uma revolução silenciosa ocorrendo em um software que você usa diariamente, mas raramente pensa sobre: o navegador. Chrome, Safari, Firefox têm sido nossas janelas para a web por décadas. Agora, algo significativo está acontecendo. Uma nova espécie de navegador está surgindo: o navegador com IA. Ele não apenas muda como navegamos, mas redefine o […]

    Navegadores com IA estão mudando a web, impactando a criatividade, economia e verdade online.

    Ler notícia completa
    Tela de interface do Instacart mostrando produtos essenciais para praia à venda, como protetor solar e toalhas, com uma janela de chat com o assistente virtual aberta.

  • As 3 previsões para o futuro do design UX

    A evolução tecnológica moderniza e melhora todas as áreas da tecnologia, incluindo o design de dispositivos digitais, automação, desenvolvimento de software e design UI/UX. Essa evolução e as inovações em HCI (Interação Humano-Computador) impulsionam o design UI/UX para ajudar designers a criar produtos digitais mais amigáveis, usáveis e produtivos para todos os usuários. O design […]

    Confira as três principais previsões para a próxima era do design UX e como elas podem impactar o futuro das interfaces digitais.

    Ler notícia completa
    Ilustração em 3D de um computador desktop moderno com ícones em estilo futurista na tela, sobre fundo roxo com linhas de rede digitais.

  • A Importância do Enquadramento no Design

    No design, o enquadramento do problema está se tornando o cerne do papel humano. À medida que a IA, ou o que chamo de Programa, assume mais o trabalho de solução, nosso ofício muda para como tratamos o problema. “A IA não está substituindo designers; está substituindo designers que focam em saídas automatizáveis.” Citação e […]

    Explorando como o enquadramento de problemas redefine o papel humano no design em tempos de IA.

    Ler notícia completa
    Imagem de rabisco em preto e branco cheia de palavras e desenhos, incluindo cabeças estilizadas, uma palavra

  • Psicologia Ética no E-commerce: Facilite Compras

    A psicologia no e-commerce tem uma má reputação, muitas vezes associada a táticas de manipulação como escassez artificial e cobranças ocultas. No entanto, existe um lado positivo: a facilitação das compras sem manipulação. Trabalhando anos com e-commerce, percebi que a maioria dos problemas de conversão está em facilitar o processo de compra. Vou mostrar quatro […]

    Aprenda como remover barreiras psicológicas no e-commerce, promovendo compras éticas sem manipulação.

    Ler notícia completa
    Ilustração de um trator removendo neve da estrada, com carros vermelhos parcialmente cobertos de neve ao lado. Ambiente frio com árvores ao fundo.