Core Web Vitals mostra as três métricas nas quais o Google se classifica - LCP, CLS e INP - medidas ao vivo na página que você está visualizando, avaliadas em relação aos limites do Google e rastreadas até o elemento exato por trás de cada número.
Core Web Vitals decide parte da classificação de suas páginas, mas as formas usuais de medi-las são estranhas. As ferramentas de laboratório pontuam uma carga sintética que ninguém experimenta. O Search Console relata usuários reais, com quatro semanas de atraso, agrupados em intervalos de URL. Nenhum dos dois informa qual elemento da página à sua frente é o problema.
Esta ferramenta mede a página que você está realmente visualizando à medida que a utiliza. LCP, CLS e INP recebem, cada um, um bloco com seu valor, uma classificação Bom, Precisa de trabalho ou Ruim em relação aos limites publicados do Google e uma barra mostrando onde você está. FCP e TTFB ficam ao lado deles para fins de contexto, porque um LCP lento causado por um servidor lento é um problema diferente daquele causado por uma imagem pesada.
As definições correspondem ao que o Chrome reporta ao CrUX, o que é importante se você pretende comparar números com o Search Console. O CLS usa janelas de sessão – uma janela termina após um intervalo de um segundo ou cinco segundos, e a pior janela vence – em vez de somar ingenuamente todos os turnos. INP é o percentil 98 das suas latências de interação, que para uma visita normal é simplesmente a interação mais lenta. O LCP para de mudar na sua primeira interação, exatamente como o Chrome faz.
O mais útil é que cada número é atribuído. O painel nomeia o elemento de maior pintura, os elementos que mudaram e as interações mais lentas, e um botão Mostrar rola para qualquer um deles e o descreve na página. Em vez de saber que o CLS é 0,31, você vê o banner que está empurrando seu conteúdo para baixo. O relatório de cópia entrega tudo como texto para um ticket.
As três métricas de classificação são atualizadas conforme você usa a página: rolar move CLS, clicar e digitar move INP. Cada um é classificado como Bom, Precisa de melhorias ou Ruim em relação aos limites do Google.
Nomeia o elemento de maior pintura, os elementos que mudaram e as interações mais lentas. Pressione Mostrar para rolar até qualquer um deles e descrevê-lo diretamente na página.
O CLS usa janelas de sessão com intervalo de 1s e limite de 5s, o INP é o 98º percentil de latências de interação e o LCP congela na primeira interação – para que seus números se alinhem com o Search Console.
First Contentful Paint e Time To First Byte ficam ao lado dos três grandes, para que você possa diferenciar um servidor lento de uma imagem de herói pesada antes de começar a otimizar a coisa errada.
Lista suas interações mais lentas com o tipo de evento e o elemento envolvido, para que um menu suspenso ou filtro lento possa ser encontrado em vez de adivinhado.
Um clique copia cada métrica, classificação e seletor incorreto como texto simples - pronto para colar em um ticket, uma solicitação pull ou um e-mail do cliente.
Confirme se LCP, CLS e INP estão verdes em um novo modelo antes de ele ser lançado, em vez de descobrir no Search Console um mês depois.
O Search Console informa que um grupo de URLs falha no CLS; abra um deles com esta ferramenta e veja exatamente qual elemento muda.
Role a página e observe a subida do CLS e pressione Mostrar para delinear o anúncio, banner ou fonte da web de carregamento tardio que está movendo seu conteúdo.
Clique nos filtros, menus e modais e, em seguida, leia a lista de interação mais lenta para descobrir qual controle está custando centenas de milissegundos.
Registre os números, implante a correção, depois meça a mesma página novamente e compare os dois relatórios lado a lado.
Clique no ícone Core Web Vitals no dock do DevSuite Pro. Os blocos métricos aparecem imediatamente usando tudo o que a página já registrou.
O LCP só é significativo a partir do início do carregamento da página, portanto, recarregue com o painel aberto quando desejar uma leitura confiável.
Percorra a página inteira para exercitar o CLS e clique, toque e digite para gerar medições de INP. Os blocos são atualizados conforme você avança.
Pressione Mostrar próximo ao elemento LCP, uma origem de mudança de layout ou uma interação lenta. A página rola até ele e o descreve para que não haja ambigüidade sobre qual elemento é responsável.
Clique em Copiar relatório para obter um resumo em texto simples de cada métrica, classificação e seletor. Pressione Reset para iniciar o CLS e o INP novamente do zero.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 71 ferramentas de desenvolvedor para seu navegador.
