Core Web Vitals Visualizer: Extensão gratuita do Chrome para depurar CWV

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

O Core Web Vitals Visualizer é uma extensão gratuita do Chrome que construí para depurar Core Web Vitals sem abrir o DevTools. Ele 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 o utilizam.

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

Como especialista em Core Web Vitals, 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 mudo para a emulação móvel ou desativo o cache do navegador?

Claro que utilizo o rastreamento RUM. Isso me diz no nível da página quais métricas passam e falham. Mas por que elas falham? Isso é algo que você só pode descobrir de verdade quando interage com a página.

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

O que o Core Web Vitals Visualizer faz?

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

Em seguida, ele cria uma sobreposição que visualiza todas essas métricas. Isso diz a você 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.

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

Por que não usar o Lighthouse?

Recebo muito essa pergunta. Minha resposta é sempre: "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 o 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 o INP em suas subpartes para que você possa ver exatamente para onde o tempo vai.

E a extensão Web Vitals do Google?

O Google descontinuou sua extensão Web Vitals para Chrome em janeiro de 2025. Agora, eles recomendam usar o painel Performance do DevTools em vez disso. O DevTools é poderoso, mas às vezes você só quer uma sobreposição rápida sem abrir uma sessão de criação de perfil completa. É exatamente isso que o Core Web Vitals Visualizer faz. Ele também fornece os detalhamentos das subpartes das métricas que o DevTools não mostra em uma única visualização.

Instale o Core Web Vitals Visualizer

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