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.

  • Design Neumórfico: O Que é e Como Usar

    Entenda o design neumórfico, suas origens e princípios para criar interfaces modernas e minimalistas.

    Entenda o design neumórfico, suas origens e princípios para criar interfaces modernas e minimalistas.

    Ler notícia completa
    Ilustração de um smartphone vertical e um monitor de computador, ambos exibindo gráficos e dados, sobre um fundo verde claro.

  • Design não está morto: entenda o cenário atual

    Design não morreu. Entenda os desafios e a evolução da área em meio à ascensão da IA e a necessidade de colaboração estratégica.

    Design não morreu. Entenda os desafios e a evolução da área em meio à ascensão da IA e a necessidade de colaboração estratégica.

    Ler notícia completa
    Ilustração de um homem de óculos, expressão preocupada, com as mãos na cabeça. Texto:

  • Centro de lucro vs. custo: impacto nas engenharias

    Descubra como centros de lucro e custo afetam equipes de engenharia e escolha o melhor para sua carreira.

    Descubra como centros de lucro e custo afetam equipes de engenharia e escolha o melhor para sua carreira.

    Ler notícia completa
    Ícones roxos de uma engrenagem e de um círculo com um símbolo de dólar em fundo rosa com textura de nuvem.

  • Documentação de API com Docusaurus: Guia Prático

    A documentação de API é crucial para o sucesso de interfaces de programação modernas. Segundo o guia da Merge sobre critérios de avaliação de API, dados abrangentes são fundamentais para uma API eficiente, logo após a consistência no formato dos dados. Documentação clara é essencial para a usabilidade de uma API. Neste tutorial, exploramos a […]

    Aprenda a criar documentação de API eficiente e moderna usando Docusaurus. Tutorial passo a passo para desenvolvedores.

    Ler notícia completa
    Pilha de cadernos espiral com folhas amarelas, em fundo azul, com um desenho animado de dinossauro verde segurando um lápis.

  • Wix lança Wixel: ferramenta de design com IA

    Wix, conhecida pelo seu construtor de sites drag-and-drop, está entrando no mercado de ferramentas de design com o lançamento do Wixel — uma nova plataforma independente movida por IA, destinada a ajudar qualquer pessoa a criar conteúdo visual sem habilidades tradicionais de design. O conceito do Wixel é promissor: combinar edição de imagens, design de […]

    Wix apresenta Wixel, plataforma de design com IA que promete simplificar a criação de conteúdo visual para não designers.

    Ler notícia completa
    Colagem com interfaces de aplicativos mostrando produtos, edição de foto e posts sociais, incluindo tênis, homem sorrindo, filtros de foto e objetos decorativos.

  • Princípio Aberto-Fechado: Guia Completo de OCP

    Os princípios SOLID são diretrizes fundamentais para o design de software, comparáveis a um edifício. Cada andar apoia o próximo, garantindo estabilidade e adaptabilidade. SOLID é um acrônimo para cinco princípios: S — Princípio da Responsabilidade ÚnicaO — Princípio Aberto-FechadoL — Princípio da Substituição de LiskovI — Princípio da Segregação de InterfaceD — Princípio da […]

    Conheça o Princípio Aberto-Fechado (OCP), seus benefícios, críticas e aplicações em diferentes linguagens de programação.

    Ler notícia completa
    Tomada elétrica branca em forma de rosto sorridente montada em uma parede azul com listras diagonais claras e escuras.

  • Como Designers UX Podem Influenciar o Comportamento da IA

    Este artigo analisa como a IA generativa está transformando o design UX, mudando o foco de elementos detalhados para o comportamento holístico do sistema. Com essa mudança, os designers precisam compreender o funcionamento da IA para influenciar sua entrada e saída de maneira eficaz. Entender conceitos como micro e macrostados ajuda os designers a criar […]

    Designers UX devem entender IA para moldar comportamentos eficazes, focando na experiência do usuário e ética.

    Ler notícia completa
    Ilustração estilizada de um robô branco interagindo com gráficos e fórmulas em interfaces digitais flutuantes, sobre fundo de grade tecnológica verde.

  • Como líderes de produto adaptam o método 5 Porquês

    Como líder de produto, seu trabalho envolve solucionar problemas, mas é essencial ir além de tratar sintomas e focar nas causas dos problemas. Muitos líderes de produto utilizam o método 5 Porquês para descobrir a causa raiz dos problemas. Vamos explorar como líderes de destaque aplicam essa metodologia e como você pode usá-la em sua […]

    Descubra como líderes de produto usam o método 5 Porquês para resolver problemas e promover colaboração.

    Ler notícia completa
    Fundo abstrato em tons de cinza com um logotipo cúbico roxo em sobreposição central.

  • Melhores Mockups de Cena Heroica Grátis para 2025

    Se você deseja criar uma imagem heroica ou cabeçalho para seu site, campanha de mídia social ou outros materiais de marketing, os modelos de cena heroica e o Photoshop são ferramentas essenciais. Esses modelos permitem criar uma foto profissional combinando vários elementos estáticos, como fundos, objetos e texto, para qualquer apresentação de design fotorrealista que […]

    Descubra os melhores modelos de mockup de cena heroica gratuitos para Photoshop em 2025 e crie imagens impressionantes.

    Ler notícia completa
    Mesa criativa com itens de design, incluindo uma caixa de madeira com rolos, canetas em um copo, envelopes pretos, uma lâmpada, uma grande letra