Core Web Vitals visualizer
Temos o orgulho de apresentar o Core Web Vitals visualizer
Temos o orgulho de apresentar o Core Web Vitals visualizer.
Hoje lançamos o Core Web Vitals visualizer gratuito na Chrome Web Store.
O Core Web Vitals visualizer é um plug-in do Chrome que ajuda os usuários a rastrear e visualizar as Core Web Vitals de uma página. Essas métricas incluem o Largest Contentful Paint, First Input Delay, Cumulative Layout Shift, First Contentful Paint, Interaction to Next Paint e Time to First Byte. O plug-in cria uma sobreposição que mostra ao usuário quais elementos são responsáveis pela instabilidade visual e quais eventos causam atraso na entrada. Além disso, o plug-in decompõe as Core Web Vitals nos seus componentes básicos, permitindo que os usuários obtenham uma compreensão mais detalhada do desempenho de uma página. O plug-in está disponível gratuitamente na Chrome Web Store.
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 Core Web Vitals mudam quando alterno para emulação móvel ou desativo o cache do navegador?
Claro que uso rastreamento RUM. Isso me diz, em nível de página específica, quais métricas passam e falham nas Core Web Vitals. Mas por que elas falham? Isso é algo que você realmente só consegue descobrir quando interage com a página.
Para economizar muito tempo, decidi automatizar uma pequena parte de um processo longo e criar um plug-in do Chrome que fará parte do trabalho tedioso por mim. O resultado é o Core Web Vitals visualizer. Decidi disponibilizar este plug-in 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 First Input Delay, o Cumulative Layout Shift, o First Contentful Paint, o Interaction to Next Paint e o Time to First Byte.
Em seguida, ele criará uma sobreposição que visualizará todas essas métricas. Isso dirá qual elemento é o Largest Contentful Paint, quais elementos causam instabilidade visual e, se você interagiu com a página, qual evento causou o First Input Delay.
Por fim, quando você clicar em qualquer uma das métricas, o Core Web Vitals visualizer irá decompor essas métricas nos seus componentes mais básicos.
Por que não usar o Lighthouse?
Segundo: o Lighthouse não fornecerá resultados reais de usuário e interação real. Por exemplo, o Lighthouse não medirá o FID e o INP. Ele não visualizará os diferentes estágios do CLS para mim e também não decompõe o LCP nas suas diferentes subpartes.
Experimente o Core Web Vitals Visualizer!
Acesse a Chrome Store e instale o Core Web Vitals visualizer. E talvez... se você gostar, deixe uma avaliação. Eu agradeceria muito.
I have done this before at your scale.
Complex platforms, large dev teams, legacy code. I join your team as a specialist, run the performance track, and hand it back in a state you can maintain.
Discuss Your Situation
