Como otimizar para o Google Core Web Vitals

Como se preparar para o lançamento do Core Web Vitals

Atualizado em 15.10.2021

A correção de experiências ruins do usuário no site de uma empresa passou para o topo de muitas listas de prioridades.

Uma coisa que já sabemos é que o Google planeja usar e desenvolver seu novo Relatório de Vitais da Web do Google Search Console. Destina-se a ajudar as empresas a fazer mais do que apenas rastrear e indexar suas páginas, é mais sobre torná-las mais valiosas para os usuários.

O que são os Google Core Web Vitals?

O Google Core Web Vitals é um conjunto de relatórios adicionados ao Google Search Console em 2019 que compreende um pequeno conjunto de métricas principais sobre a velocidade de carregamento. Eles ajudam os profissionais de marketing de busca e as equipes de desenvolvimento a saberem quão bem ou mal um site está entregando suas páginas da web. O Google classifica cada página da web de acordo com o desempenho dela ao oferecer uma experiência agradável aos visitantes do site. O relatório Core Web Vitals detalha o desempenho das páginas da Web com base em dados de uso do mundo real, também conhecidos como dados de campo.

Esses novos fatores de classificação estão se aproximando rapidamente. Embora todos os sites se beneficiem da adição de tipos de marcação de esquema essenciais, use o aninhamento e mantenha o que é mais importante para evitar o excesso de código.

Em 5 de outubro de 2021, o Google enviou dicas úteis em uma apresentação do YouTube intitulada Como melhorar a maior pintura de conteúdo para uma melhor experiência de página .

Dicas do Google sobre como obter uma pontuação melhor no Largest Contentful Paint (LCP):

As imagens geralmente são o motivo dos problemas com a maior pintura de conteúdo. Cada mordida salva pode acelerar o carregamento da página. Use formatos de imagem modernos como AVIF e WebP. Existem muitos casos extremos relacionados à forma como sua pontuação LCP é calculada.

O que é a experiência da página do Google?

A experiência da página é um subconjunto da experiência do usuário.

A experiência da página concentra-se nos aspectos técnicos dos produtos da Web que mais frequentemente influenciam a experiência do usuário. Embora não meça e reflita sobre aspectos de design de UX, como qualidade de conteúdo ou design visual, todos os sinais de experiência de página estão basicamente no controle da equipe de desenvolvedores que cria o site. Esses sinais têm um efeito direto na experiência geral do usuário.

A iniciativa intencional do Google de promover a Page Experience pretende impactar positivamente a web. Pense nisso como algo positivo. É útil ter essas métricas de desempenho adicionais que se correlacionam com as métricas de negócios para obter mais facilmente a adesão de membros não técnicos da equipe.

Vamos voltar um pouco e rever como chegamos aqui.

A história da velocidade do site e as principais métricas da Web do Google

Qual é o prazo para o lançamento do Google Page Experience?

Em 10 de novembro de 2020, o Google anunciou: “Os sinais de experiência de página na classificação serão lançados em maio de 2021. Os novos sinais de experiência de página combinam os principais indicadores da Web com nossos sinais de pesquisa existentes, incluindo compatibilidade com dispositivos móveis, navegação segura, segurança HTTPS, e diretrizes intersticiais intrusivas”.

Vamos voltar e obter uma visão geral clara. O ano de 2010 viu o Google começar a usar a rapidez com que uma página da Web é carregada em um computador desktop como um sinal de classificação.

O Google vem promovendo a compatibilidade com dispositivos móveis como um sinal de classificação a partir de 2015. Em 2018, o processo Mobile-First Index foi lançado como oficial. Webmasters e proprietários de sites foram notificados no Search Console quando o Google determina que um site está pronto para indexação mobile-first. Isso ocorre quando o Google avalia a versão móvel do seu site durante o processo de avaliação para fins de pesquisa; você não pode acioná-lo.

No início de 2020, o Google apresentou seu novo conjunto de ferramentas no Google Search Console, chamado Core Web Vitals. Ele disse explicitamente que as métricas nesses relatórios se tornarão sinais de classificação em 2021. O Core Web Vitals expande as métricas de velocidade do site anteriores para ajudar as empresas a abordar como alguns anúncios móveis de páginas da Web e arquivos de suporte são carregados.

A introdução do Web Core Vitals alerta os proprietários de sites que não se preocupam com a compatibilidade com dispositivos móveis que isso claramente importa. Embora a atualização do Mobilegeddon tenha sido um lançamento lento, a importância de tornar um site uma experiência melhor para usuários de dispositivos móveis agora deve ser enfrentada .

O investimento do Google em ferramentas e relatórios sobre velocidade do site e dispositivos móveis são sinais para os proprietários de sites de que eles precisam tornar seus sites mais fáceis de usar ou esperam se tornar apenas um cartão de visitas online. Hoje estamos anunciando que os sinais de experiência da página na classificação serão lançados em maio de 2021.

Quais métricas básicas compõem a experiência da página de pesquisa do Google?

As três principais métricas de experiência da página de pesquisa do Google explicadas:

• Carregamento: o LCP avalia quanto tempo leva para que o maior elemento de conteúdo (como uma imagem em destaque, imagem principal ou texto de título H1) em uma página da Web específica fique visível na janela de visualização de um visitante. Procure ganhar um LCP de 1,2 segundos ou menos.
• Interatividade: FID (primeiro atraso de entrada): O relógio de tempo está funcionando desde quando um usuário interage pela primeira vez com sua página (como quando um link é clicado, um botão acionado etc.) até o momento em que o navegador responde a essa interação. Essa medida é derivada de qualquer elemento interativo em que a pessoa clica pela primeira vez. Isso é importante em páginas onde o visitante precisa fazer alguma coisa porque é quando a página se torna interativa. Também chamados de relatórios TBT (no GTmetrix); ele representa quanto tempo é bloqueado por scripts que são chamados durante o processo de carregamento da página. Procure ganhar um TBT de 150 milissegundos ou menos.
• Estabilidade visual: o CLS indica quanto do layout de uma página muda o visitante experimenta à medida que sua página é carregada. Procure uma pontuação CLS de 0,1 ou menos.

Para auditar seu conteúdo para determinar se ele atende ao limite do Core Web Vitals para ser rotulado com um selo Fast Page, use as ferramentas de desenvolvedor do Google para avaliar a velocidade de carregamento. Para ajudar nessas tarefas de otimização, o GTmetrix ficou mais sofisticado. O GTmetrix Reports adicionou uma nova metodologia de pontuação. Os antigos relatórios PageSpeed ​​e YSlow foram atualizados para um GTmetrix Grade geral. Desenvolvido pelo Lighthouse, os usuários do GTmetrix agora obtêm uma pontuação de desempenho e estrutura.

O que é o atraso da primeira entrada (FID)?

O FID é uma pontuação que avalia quanto tempo o navegador levou para gerenciar outras tarefas antes de poder lidar com uma pessoa realizando uma ação, como um toque ou clique. Isso sinaliza o quão responsiva a experiência da interface do usuário é para um usuário e mede a carga da CPU com o processamento de JavaScript.

A forma como uma página executa JavaScript, tanto no carregamento da página quanto durante o ciclo de vida da página, afeta diretamente o FID. O tempo que leva para o JavaScript ser completamente executado é importante se os visitantes tentarem concluir uma ação antes que o aplicativo esteja completamente pronto.

Maneiras de melhorar o atraso da primeira entrada:

• Atrasar ou eliminar arquivos de terceiros ou pixels de rastreamento.
• Adie todos os scripts não essenciais.
• Melhore a execução do JavaScript.

GTmetric e outras cascatas fazem um ótimo rastreamento de desempenho para divulgar onde o tempo de carregamento é consumido excessivamente. Uma vez identificados, eles podem ser investigados e resolvidos.

O que é o novo indicador de experiência na página do Google?

O Google mostrará aos usuários a qualidade do Core Web Vitals de uma página da web com seu novo indicador de experiência de página. Isso já está sendo exibido em alguns SERPS. É semelhante em tamanho e forma ao ícone AMP que indica o status de uma página móvel acelerada. Como o Google é ótimo em testar e fazer interações, isso pode parecer diferente, pois é mais amplamente adotado.

Embora as métricas do Core Web Vitals forneçam informações mais detalhadas do que tínhamos antes nos relatórios do Google Search Console, é provável que muitos falsos positivos apareçam após o lançamento completo.

Como determinar as tarefas vitais da Web principais mais importantes

Concentre-se nas métricas de velocidade de carregamento mais impactantes antes de realizar otimizações mais profundas de desempenho do site.

1. Resolva primeiro tudo o que está rotulado como “ruim”.

2. Em seguida, priorize sua lista de tarefas por quais problemas afetam negativamente a maioria dos URLs ou por problemas que estão prejudicando seus URLs mais geradores de receita.

3. As questões “Precisa de melhorias” são agora as próximas da lista de prioridades.

A necessidade de uma melhoria drástica na Mudança de Conteúdo de Layout me surpreendeu bastante, mas isso claramente contribui para obter os melhores resultados de SEO. A página não tem anúncios de carregamento tardio acima do conteúdo, nenhum intersticial intrusivo e todas as imagens tiveram sua largura e altura devidamente definidas. No entanto, o tamanho da imagem em destaque original era de 1280 por 860 pixels. Isso estava causando um problema de redimensionamento da imagem; quando os navegadores o carregavam, eles o redimensionavam para 1200 por 800 pixels. Isso causa uma mudança de layout e um consequente atraso no carregamento. Certifique-se de que suas imagens estejam dimensionadas corretamente para a marcação do esquema JASON-LD.

Depois de corrigir um problema específico em todos os seus URLs, você pode confirmar se corrigiu o problema para todos os URLs. Clique em Iniciar rastreamento para iniciar uma sessão de monitoramento de 28 dias para verificar se há instâncias desse problema em seu site. Se esse problema não estiver presente em nenhum URL do seu site durante o período de 28 dias, o problema será considerado corrigido. A presença desse problema em qualquer URL é suficiente para marcar o problema como não corrigido; no entanto, o status de URLs individuais permanece em avaliação por 28 dias completos, independentemente do status do problema.

PERGUNTAS COMUNS SOBRE A CVW

Pode levar muito tempo para aprender, solucionar problemas e testar/ajustar muitas opções para melhorar as pontuações do CWV. Aqui estão as respostas:

Como calcular a pontuação CLS?

A pontuação CLS de uma página é calculada multiplicando a proporção da tela do usuário que mudou inesperadamente ao carregar pela distância percorrida. Às vezes, os sites até enfrentam metade da tela afetada pela mudança de conteúdo. Isso incomoda os telespectadores. Simultaneamente, a distância que o conteúdo teve que percorrer na tela influencia. Portanto, para calcular a pontuação CLS, multiplique a área da tela impactada (0,5) pela distância percorrida (0,15) e você pode obter uma pontuação útil.

Quais são as causas comuns que criam problemas de mudança de layout de conteúdo?

• Remova as margens da imagem em destaque : Executando a ferramenta Lighthouse junto com o Chrome Dev Tools, em um site, o código figure class=”featured-media” provou ser um problema. Adicionando este código CSS adicional .featured-media { img display: none; } .featured-media { img display: none; } , a pontuação de desempenho da área de trabalho melhorou imediatamente dois pontos completos.
• Resolva quaisquer problemas com a forma como as fontes são carregadas : alguns web designers preferem a aparência de fontes da web de título extravagantes; no entanto, muitas vezes a forma como eles são carregados causa uma mudança de layout. Teste para descobrir se há problemas potenciais de diluição de cache a serem resolvidos, bem como como o tamanho geral das fontes é fornecido. Descobrimos que, especificando a exibição de fonte de fallback, adicionando { font-display: fallback;} , podemos melhorar o comportamento de renderização de elementos usando a instrução de face de fonte.
• Conteúdo injetado dinamicamente : Isso geralmente ocorre quando banners ou formulários estão sendo adicionados a uma página dinamicamente. Além disso, os usuários que não conseguem ver um “x” para desativar um pop-up podem ficar frustrados. Além disso, quando os elementos na página são utilizáveis, eles ainda são os culpados por que a página está sendo reorganizada e “deslocada”.
• Falta de especificações de imagem : Quando as imagens de uma página têm dimensões erradas, ruins ou nenhuma imagem especificada, os navegadores adicionam trabalho e tempo para carregar a página sem essas informações e depois precisam mudar para calculá-las.
• Incorporações na página, anúncios e iframes sem dimensões : ao informar os navegadores sobre o espaço de layout necessário para esses elementos visuais na página, você pode evitar que o navegador precise mudar quando cada um deles estiver visualmente no lugar.

Depois de seguir as estratégias de melhoria do CLS acima, a pontuação de Mudança de layout cumulativa do mesmo site agora é 0,01. Isso ajuda bastante a melhorar os resultados de pesquisa para celular de um site.

Quais métricas principais do Web Vitals podem ser aprimoradas ao carregar CSS assíncrono?

Como é o que as pessoas veem primeiro, as métricas calculadas na seção acima da dobra significam garantir que o conteúdo principal visível para o usuário seja visto rapidamente. Alguns arquivos de conteúdo e suporte podem ser carregados em segundo plano até chegar ao “tempo de carregamento total”.

De acordo com Koray Tugberk GUBUR, proprietário da Holistic SEO, “Na relação entre carregar arquivos CSS como Async e abrir páginas da web mais cedo para o usuário, algumas métricas de velocidade de página são afetadas mais positivamente do que outras. O carregamento mais rápido de arquivos CSS melhora especialmente as métricas de primeira pintura, primeira pintura de conteúdo, maior pintura de conteúdo e índice de velocidade”.

Coloque seu conteúdo principal acima da dobra, onde possa ser facilmente visto para corresponder à intenção dos pesquisadores. Não faça os visitantes do site esperarem para encontrar respostas para suas perguntas.

Como o Google mede a velocidade de carregamento?

As sugestões de melhorias e diagnósticos encontradas no PageSpeed ​​Insights são geradas a partir de testes de laboratório; as métricas de desempenho são mais precisas quando obtidas dos resultados de campo. Uma vez que você tenha uma ideia geral de como melhorar o PageSpeed, a lógica de como o Google pontua isso pode impactar positivamente seus resultados vitais da web.

Três novas métricas de desempenho abrangem esse mundo de desempenho na web. Eles são suportados por meio de uma API no Chrome, Chrome no Android, navegadores Chromium Edge. Os dados com os quais o Google se baseia para medir a experiência da página são derivados do Chrome UX Report (CRUX). Ele é composto por estatísticas de desempenho anônimas que os carregamentos de páginas reais nos navegadores Chrome em todo o mundo fornecem.

Sendo independente do estado do cache, o CRUX avalia todas as cargas de página regulares, incluindo páginas da web de destino e de meio de sessão. Ele ignora as navegações suaves, também chamadas de alterações de rota, em aplicativos de página única. As navegações suaves têm o potencial de serem penalizadas. Pontuações de CLS e valores de LCP mais baixos sinalizam uma mudança reduzida de usuários que experimentam mudanças inesperadas de layout.

Qual a importância da compactação de imagem para uma pontuação CWV?

Você não precisa comprometer a qualidade da imagem para obter uma boa pontuação CWV.

Os navegadores atuais podem gerenciar imagens de alta resolução quando fornecidas; enquanto você ainda deseja comprimi-los, use apenas o tamanho que você precisa para ter uma ótima aparência em telas de alta resolução. Você pode usar um CND e pensar em começar com uma imagem ou plano de fundo menos complexo. Aprenda e siga as Diretrizes de imagem do Google.

@Jamsession18 perguntou a John Mueller do Google em 26 de março de 2021:

“Você pode responder minha pergunta sobre a qualidade das imagens usadas? Eu trabalho para um site de notícias que atualmente está otimizando para CWV e, para isso, nossa tecnologia está comprimindo as imagens a um nível extremo ao custo da qualidade da imagem (imagens borradas agora). Vale a pena o custo?"

“Isso soa como uma má ideia. A experiência na página é apenas uma das muitas coisas que analisamos para classificação, mas se os usuários não gostarem do seu conteúdo, é improvável que eles convertam (por mais que você queira) e é improvável que queiram voltar.” -???? João ???? @JohnMu

Como os dados de campo e de laboratório são diferentes?

Uma diferença é que os dados de laboratório são úteis para testes, os dados de campo são melhores para classificação.

Os dados de laboratório são sobre os dados de desempenho encontrados em um ambiente exclusivo. Ferramentas de desenvolvimento do Chrome e ferramentas webpagetest.org são comumente usadas para obter dados de laboratório. Dados de campo abrangem dados coletados da coleção de usuários que visitam as páginas do seu site usando o navegador Chrome. Dados de campo são o que preenche seus relatórios do Google Search Console, bem como o Google Page Speed ​​Insights (que depende de dados de laboratório e de campo para seus relatórios de página).

Os dados de campo podem ser obtidos usando a automação por meio do BigQuery. Para sites ou páginas mais recentes que não recebem muito tráfego orgânico, você pode descobrir que não há dados de campo disponíveis.

Por que é importante melhorar todas as três métricas do Web Core Vitals?

Todos os três benchmarks Core Web Vitals (CWV) sinalizam um componente-chave do que é necessário para fornecer uma boa experiência do usuário. Cada uma das 3 métricas deve ser atendida para se qualificar para o aumento do sinal de classificação do Google relacionado, lançado em maio de 2021. O Google nos oferece 6 maneiras de medir esses Principais Vitais da Web. Como aprendemos com John Mueller, analista sênior de tendências para webmasters do Google, todos os requisitos mínimos devem ser atendidos para se beneficiar dessa atualização de algoritmo que está prestes a chegar.

“Meu entendimento é que vemos se está no verde e então isso conta como está tudo bem ou não. Então, se estiver em amarelo, não estará no verde, mas não sei qual será a abordagem final.

Há vários fatores que se juntam e acho que a ideia geral é que, se pudermos reconhecer que uma página corresponde a todos esses critérios, gostaríamos de usá-los adequadamente na classificação de pesquisa.

Eu não sei qual seria a abordagem onde há algumas coisas que estão bem e algumas coisas que não estão perfeitamente bem, como como isso se equilibraria.” – John Mueller

Isso torna a percepção de uma página de carregamento rápido versus um carregamento lento de grande importância. Atingir todas as três métricas é uma oportunidade; pequenas empresas podem melhorar seu SEO e obter uma vantagem competitiva para ajudá-las a conquistar novos negócios. O foco de cada site deve ser melhorar os resultados de pesquisa em dispositivos móveis em relação à experiência de desktop, pois isso é mais importante para o maior volume de pesquisadores.

Como muito do marketing de busca, uma abordagem holística é a melhor. É fácil focar demais em uma área de desempenho do site para descartar outras que precisam de atenção. Um exemplo disso é adicionar toda a marcação de esquema em que você pode pensar quando pode estar apenas adicionando código de pouco valor. Leia nosso Guia completo para marcação de esquema de comércio eletrônico para ampliar melhor a visibilidade de seus produtos em SERPs.

Uma pessoa realizando uma pesquisa será capaz de dizer quais sites passam no teste Core Web Vitals?

As pessoas que desejam um sinal de que a velocidade da página, a capacidade de resposta da página e os fatores de estabilidade visual da página foram contabilizados por uma empresa antes de clicar em uma página verão um selo.

John Mueller indicou que o Google pode introduzir um selo nos resultados de pesquisa para páginas que passam no Core Web Vitals do Google. O emblema funcionará como uma espécie de filtro. Ele afirma a uma pessoa que usa a Pesquisa do Google que, se clicar em uma página da Web com esse selo CWV, pode esperar uma experiência positiva.

Ferramentas principais de teste do Web Vitals

Ao testar seus Core Web Vitals, use uma janela anônima para contornar problemas indesejados.

Existem várias ferramentas agora disponíveis; nós preferimos Farol. Ao usar muitos, você pode ter uma perspectiva mais geral. No entanto, eles diferem consideravelmente em suas aplicações, níveis de habilidade necessários para proficiência técnica e relatórios. O Search Console é muito útil por ser o painel Core Web Vitals de cada site. Obter uma visão panorâmica de um site inteiro – de acordo com o Google – é vital para o sucesso. A extensão do Chrome e o PageSpeed ​​Insights são melhores para essas avaliações rápidas de página. Adicionaremos mais aqui ao longo do tempo.

Quando esse trabalho estiver pronto, cobriremos seus relatórios de progresso de marketing de pesquisa pessoalmente. Queremos que você entenda e aproveite os benefícios.

Melhorar os aspectos técnicos de SEO sempre exigiu recursos necessários de buy-in e desenvolvedor para ser feito. Os profissionais de marketing de pesquisa que trabalham com empresas de todos os tamanhos lutam para sempre com aprovações de orçamento. Hoje, o desempenho de cada site agora tem uma pontuação de crucialidade clara. Se alguém não levou isso a sério no passado, agora é uma dura realidade. Por que esperar até ser penalizado nos rankings?

O Google testemunhou essas lutas e ouviu os SEOs perguntarem como obter buy-in por anos. A gigante da tecnologia está destacando de forma inteligente a importância do desempenho, tornando-o transparente em seus relatórios do Google Search Console e estabelecendo-o como um sinal de classificação adicional. A Google Page Experience é melhor descrita como um conjunto de fatores que medem o quão satisfatório é para uma pessoa interagir com uma página da web. Concentre-se em seus clientes e visitantes do site e em como tornar a experiência deles em seu site a melhor possível para eles.

RESUMO

A otimização para as métricas de desempenho do Core Web Vital, conforme medido pelo Google no CRUX, pode ser um grande impulso no futuro. Mas mesmo antes que esses elementos vitais da web se tornem um fator de classificação, eles terão um impacto positivo na experiência do usuário do seu site. Os consumidores querem experiências mais rápidas. Melhorar os problemas de velocidade de carregamento leva a uma menor taxa de rejeição, maior duração da sessão da página, melhores pontuações de satisfação do usuário, melhor classificação de conversão, aumento do tráfego de SEO. Em última análise, tudo isso leva ao aumento da receita.

O melhor das otimizações de desempenho da página é que muitas vezes são alcançadas com melhorias de código relativamente pequenas.

A Hill Web Creations pode liderar seus esforços de otimização começando com uma auditoria técnica abrangente de SEO .