Chrome 88 junta-se às ferramentas do desenvolvedor Core Web Vitals

Lançado recentemente, o Chrome 88 adiciona recursos para desenvolvedores que desejam o próximo Experiência da página atualização, que adiciona o relativamente novo Web vitals métricas para qualquer sinal de classificação de experiência do usuário pré-existente.

Web Vitals mede várias coisas que são então agrupadas em três pontuações resumidas como Core Web Vitals: Pinte com conteúdo maior, Atraso na primeira entradae Mudança cumulativa de design. Cada um deles deve ser otimizado para atender aos limites de desempenho (tempos) para evitar o sofrimento de colegas de alto desempenho que podem aparecer acima de você nas classificações do Google.

Dois novos destaques

O primeiro novo recurso a destacar é que o Chrome 88 agora oferece suporte a uma propriedade CSS chamada aspect-ratio. As regras de proporção de aspecto permitem que você defina a proporção de aspecto para elementos que, sob certas circunstâncias, podem ajudá-lo otimizar a mudança cumulativa de design. Até o momento, você pode definir um atributo HTML de largura ou altura em uma tag de imagem, e a maioria dos navegadores tentará calcular o atributo ausente.

Um designer faria isso com imagens variáveis, como as fornecidas pelos usuários, para ajustar o resultado a um sistema de design. Esse recurso agora está disponível para você aplicar como regra CSS a imagens e outros tipos de elementos. Entre outros benefícios, esta nova regra pode ajudá-lo a planejar melhor para layouts responsivos sem recorrer a hacking cálculos de dimensão de porcentagem para uma aparência final de design.

Web Vitals Lane no Chrome 88 DevTools

O outro novo recurso interessante é que Web Vitals agora tem sua própria linha de relatórios no Chrome 88 DevTools. Embora os indicadores da faixa de tempo para essas (e algumas outras) métricas estejam disponíveis há algum tempo, há muito espaço reservado na nova faixa Web Vitals para relatórios ainda mais detalhados.

Leia Também:  Como calcular o ROI de SEO usando o Google Analytics

Como está, os sinalizadores na pista Web Vitals são codificados por cores com verde para uma pontuação de aprovação e vermelho para um limite de desempenho insatisfatório. Passar o mouse sobre um determinado sinalizador exibe a abreviação de identificação do nome da métrica e o tempo registrado em milissegundos. As cores das métricas na linha do tempo não são indicativas de uma pontuação.

Layout Shift (pontuação da bandeira vermelha de 748,4 ms) na nova linha de relatórios DevTools Web Vitals.

Há também uma nova área de relatório de tarefa longa que pode ser usada para alinhar com os eventos de thread principal para detectar quais scripts estão sendo avaliados para que você possa solucionar problemas se puder otimizar ou remover o código.

Para adicionar a nova pista Web Vitals ao DevTools, navegue até a guia Performance e selecione a caixa de seleção associada. Você pode fazer isso mesmo depois de coletar os dados do relatório, caso execute um relatório antes de marcar a caixa de seleção, e pode fechar o Chrome, que lembrará como você deixou o estado da caixa de seleção após a última gravação quando eu o reabrir.

Caixa de seleção Web Vitals na guia Desempenho do Chrome DevTools

Lembre-se de que qualquer pontuação específica é um resumo de outras métricas que você precisa procurar para encontrar atividade anterior ou alinhada com um marco de pontuação com falha para descobrir o que poderia estar causando o problema. As faixas de relatórios de rede e CPU podem ajudá-lo a descobrir o que é. Você pode encontrar referências para renderizar scripts de bloqueio para avaliar e eventos de carregamento de imagem, onde você pode descobrir a oportunidade de compactá-los ou redimensioná-los.

Relatórios de desempenho de inicialização a frio

Para que essas métricas sejam mais precisas, você precisará carregar um relatório de desempenho sem os ativos atualmente armazenados em cache em seu navegador. Inicie uma gravação e mantenha pressionada a tecla shift enquanto atualiza a página no navegador, o que deve forçar seu navegador a carregar todos os recursos de rede. Você também pode selecionar o botão recarregar em DevTools na guia Desempenho. No entanto, lembre-se de que o relatório resultante não capturará necessariamente tudo o que você deseja.

Leia Também:  Como usar os recursos SERP para informar sua estratégia de conteúdo

Ambas as abordagens são válidas. Uma inicialização a frio com um processo de gravação aberto permite que você decida quando começar a coletar informações com a atualização round robin e quando processar o resultado no relatório final ao clicar para interromper o processo de gravação. Você tem a capacidade de selecionar para restringir e expandir áreas de interesse em toda a programação de relatórios, uma vez que o relatório é carregado. O Chrome também armazena um histórico de relatórios que você pode limpar quando chega a hora de analisar outra página.

Tal como acontece com todos os sinais de classificação, nenhum fator único vai levar sua pontuação para o número um em toda a linha. Lembre-se de que sites de baixo desempenho podem ter uma boa classificação quando o conteúdo é indexável e de qualidade que atrai usuários de pesquisa. Quanto ao SEO técnico, Core Web Vitals não é uma indicação de que seu conteúdo pode ser indexado. Isso deve servir como um aviso de que pode haver muito mais problemas a serem corrigidos, uma vez que você alcançou grandes pontuações de desempenho.

Por que devemos nos importar

A atualização da Experiência da página em questão de meses é motivo suficiente para nos preocuparmos com nossas pontuações do Core Web Vitals. O Google nos deu tempo suficiente para preparar nossos sites para a mudança. Como profissionais de otimização, buscamos todas as vantagens que podemos usar para melhorar os rankings e o Web Vitals é algo que sem dúvida melhora as coisas tanto para os usuários quanto para os buscadores.


Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: