Core Web Vitals Visualizer: Extensão Gratuita do Chrome para Depuração de CWV

Uma extensão gratuita do Chrome para depurar Core Web Vitals

A Core Web Vitals Visualizer é uma extensão gratuita do Chrome que eu criei para depurar as Core Web Vitals sem abrir o DevTools. Ela cria uma sobreposição em tempo real em qualquer página, mostrando exatamente quais elementos afetam seu LCP, CLS e INP. Mais de 14.000 desenvolvedores a utilizam.

Última revisão por Arjen Karel em março de 2026

Como um especialista em Core Web Vitals, eu passo muito tempo verificando como uma página reage e responde quando interajo com ela. O que isso faz com as Core Web Vitals e como as métricas mudam quando eu alterno para a emulação móvel ou desativo o cache do navegador?

Claro que eu uso o rastreamento RUM. Isso me diz em um nível de página quais métricas passam e falham. Mas por que elas falham? Isso é algo que você só consegue descobrir realmente quando interage com a página.

Para economizar muito tempo, decidi automatizar uma pequena parte de um processo longo e criar uma extensão do Chrome que faz parte desse trabalho tedioso por mim. O resultado é a Core Web Vitals Visualizer. Eu decidi torná-la disponível para todos, então vá em frente e confira na Chrome Web Store.

O que a Core Web Vitals Visualizer faz?

Primeiro, ela registra as Core Web Vitals com base na sua interação com a página. Ela rastreia o Largest Contentful Paint, a Interaction to Next Paint, o Cumulative Layout Shift, o First Contentful Paint e o Time to First Byte.

Em seguida, ela cria uma sobreposição que visualiza todas essas métricas. Isso informa qual elemento é o Largest Contentful Paint, quais elementos causam instabilidade visual e, se você interagiu com a página, qual evento causou o pior atraso de entrada.

Quando você clica em qualquer uma das métricas, a Core Web Vitals Visualizer as divide em seus componentes mais básicos. Para o LCP, isso significa que você vê o atraso no carregamento do recurso, duração do carregamento e atraso na renderização do elemento. Para a INP, você obtém o atraso de entrada, tempo de processamento e atraso de apresentação.

Por que não usar o Lighthouse?

Eu recebo muito essa pergunta. Minha resposta é sempre: "Eu nunca disse que não uso o Lighthouse" (embora eu não use o Lighthouse com tanta frequência). O Lighthouse é uma ótima ferramenta e você deve se familiarizar com ela.

Mas existem diferenças importantes. O Lighthouse é um teste de laboratório e os dados podem não ser representativos da vida real. É por isso que minha extensão usa os dados reais do seu navegador. O Lighthouse também não fornece resultados reais de interação. Ele não pode medir a INP porque não há um usuário real interagindo com a página. Em vez disso, ele usa o Total Blocking Time como um proxy. Minha extensão visualiza o CLS real conforme ele acontece e divide o LCP e a INP em suas subpartes para que você possa ver exatamente para onde o tempo vai.

E quanto à extensão Web Vitals do Google?

O Google descontinuou sua extensão Web Vitals do Chrome em janeiro de 2025. Agora, eles recomendam o uso do painel Performance do DevTools. O DevTools é poderoso, mas às vezes você só quer uma sobreposição rápida sem abrir uma sessão completa de profiling. É exatamente isso que a Core Web Vitals Visualizer faz. Ela também fornece as divisões das subpartes das métricas que o DevTools não mostra em uma única visualização.

Instale a Core Web Vitals Visualizer

Acesse a Chrome Web Store e instale a Core Web Vitals Visualizer. E talvez, se você gostar, deixe uma avaliação. Eu agradeceria.