O que são The Core Web Vitals (e como você pode melhorá-los)?

Os sites estão sob mais pressão do que nunca para ter um bom desempenho. Os usuários não apenas esperam experiências rápidas e responsivas, mas os mecanismos de pesquisa agora estão usando a velocidade da página como um fator de classificação.

Para ajudar os webmasters a otimizar a velocidade de seus sites, o Google introduziu o Core Web Vitals em maio de 2020: um conjunto de métricas que medem o desempenho dos principais aspectos da experiência do usuário. Neste artigo, veremos quais são os Core Web Vitals e como você pode melhorá-los.

Atualização da experiência da página do Google para desktop agora sendo lançada https://t.co/gQn2cwDkiz

— Barry Schwartz (@rustybrick) 22 de fevereiro de 2022

Vamos mergulhar!

Quais são as 3 métricas do Core Web Vitals?

Core Web Vitals é uma iniciativa do Google para ajudar editores e proprietários de sites a medir a qualidade da experiência do usuário (UX) e identificar onde precisam fazer melhorias.

A iniciativa inclui três Core Web Vitals que se concentram no carregamento, interatividade e estabilidade visual: Maior Pintura de Conteúdo, Mudança de Layout Cumulativa e Atraso na Primeira Entrada.

Maior pintura de conteúdo

A maior pintura de conteúdo (LCP) é uma métrica de desempenho que mede quanto tempo leva para o conteúdo principal de uma página da web carregar. O conteúdo principal é normalmente definido como a maior imagem ou elemento de texto na página.

O LCP é uma das várias métricas usadas pelo Google para avaliar o desempenho de uma página da web.

Em geral, as páginas com um tempo de LCP inferior a 2,5 segundos são consideradas com bom desempenho, enquanto aquelas com um tempo de LCP superior a 4 segundos são consideradas com desempenho ruim. As páginas com um tempo de LCP superior a 10 segundos são consideradas com desempenho muito ruim.

Para melhorar o LCP de uma página da Web, designers e desenvolvedores precisam se concentrar em garantir que o conteúdo principal seja carregado com rapidez e eficiência. Isso pode ser alcançado por meio de vários métodos, como o uso de design responsivo, otimização de imagens e redução de código.

Mudança de layout cumulativa

Muitas pessoas experimentaram o fenômeno frustrante de tentar clicar em um link ou botão em um site, apenas para que ele saia do cursor no último segundo.

Esse fenômeno, conhecido como mudança cumulativa de layout (CLS), é uma medida de quanto o conteúdo muda de posição à medida que um usuário interage com uma página. O CLS é um problema porque pode fazer com que os usuários cliquem na coisa errada ou simplesmente desistam e saiam da página completamente.

Existem várias maneiras de otimizar o CLS, mas talvez a mais eficaz seja garantir que todos os elementos da página sejam dimensionados e posicionados corretamente antes que a página seja carregada. Ao fazer isso, você pode ajudar a evitar que o conteúdo mude conforme os usuários interagem com a página.

Atraso da primeira entrada

O atraso da primeira entrada (FID) é uma medida de quanto tempo leva para um usuário interagir pela primeira vez com uma página. É uma métrica importante para medir a capacidade de resposta de uma página e a experiência geral do usuário em um site.

Uma boa pontuação FID indica que os usuários são capazes de interagir rápida e facilmente com a página, enquanto uma pontuação FID ruim sugere que há algum atraso na entrada que está causando frustração.

Existem muitos fatores que podem contribuir para uma pontuação FID ruim, mas a causa mais comum é o tempo de execução do JavaScript. Se o código JavaScript na página estiver demorando muito para ser executado, ele poderá atrasar a entrada do usuário. Isso pode ser frustrante para usuários reais e fazer com que eles saiam da página antes de terem a chance de interagir totalmente com ela.

Para melhorar as pontuações do FID, os desenvolvedores precisam se concentrar na redução do tempo de execução do JavaScript.

Há também alguns Vitais adicionais

• Tempo até o primeiro byte (TTFB) : Tempo até o primeiro byte é a quantidade de tempo que leva para um navegador receber o primeiro byte de dados de um servidor. O tempo que leva pode ser afetado por vários fatores, incluindo a distância entre o navegador e o servidor, o tamanho dos pacotes de dados e a velocidade da conexão.
• First Contentful Paint (FCP) : First Contentful Paint é a quantidade de tempo que leva para um navegador exibir o primeiro conteúdo de uma página. Esse conteúdo pode ser uma imagem, texto ou outro elemento. Em outras palavras, é o tempo de carregamento percebido.
• Tempo Total de Bloqueio (TBT) : O Tempo Total de Bloqueio é a quantidade de tempo que leva para um site ir da Primeira Pintura de Conteúdo para totalmente interativo.
• Tempo para Interação (TTI) : Tempo para Interação é a quantidade de tempo que leva para uma página se tornar totalmente interativa. Isso inclui ser capaz de responder à entrada do usuário e carregar novo conteúdo em resposta à interação do usuário.

O Core Web Vitals está sob o termo abrangente do Google Page Experience, que inclui outros aspectos:

• Otimização para dispositivos móveis: refere-se à facilidade para os usuários interagirem com seu site em dispositivos móveis. Um site que não é compatível com dispositivos móveis pode ser difícil de usar em uma tela menor e pode até impedir que os usuários acessem determinados recursos.
• HTTPS: Refere-se a se o seu site usa uma conexão segura. Sites que usam HTTPS são menos propensos a ter seus dados interceptados por terceiros e, portanto, são considerados mais seguros.
• Intersticiais intrusivos: são pop-ups ou outras formas de publicidade que podem ser intrusivas e disruptivas, especialmente em dispositivos móveis. Muitas vezes, eles podem ser difíceis de fechar e podem impedir que os usuários vejam o conteúdo existente que estavam procurando.

Os Core Web Vitals afetam a classificação?

Sim. Web Core Vitals são um fator de classificação. O que muitas pessoas não percebem é que eles também têm um impacto direto na classificação do seu site, na verdade bem recentemente. A pontuação do Core Web Vitals é apenas uma métrica em si. Ainda assim, é uma métrica muito boa, e as implicações que pode levar você às vezes são mais do que suficientes para corrigir problemas básicos do site.

A atualização da experiência da página agora está sendo lançada lentamente para desktop. Ele será concluído até o final de março de 2022. Saiba mais sobre a atualização: https://t.co/FQvMx3Ymaf

— Central de Pesquisa do Google (@googlesearchc) 22 de fevereiro de 2022

Os Core Web Vitals medem algumas coisas diferentes, que se somam à experiência da página.

Então, por que os Core Web Vitals são importantes?

Mais tráfego orgânico

As pontuações do Core Web Vitals de um site são um dos muitos fatores que o Google leva em consideração ao determinar onde classificar um site em seus resultados de pesquisa. Isso significa que ter uma boa pontuação no Core Web Vital pode levar a mais tráfego do Google. E mais tráfego significa mais leads e mais chances de convertê-los em clientes pagantes.

UX superior

A experiência do usuário (UX) é essencial para o sucesso de qualquer site. É o que determina se os usuários permanecerão em seu site ou clicarão em frustração.

De acordo com o HubSpot, 93% dos clientes saem se o site não carregar rápido o suficiente. E os Core Web Vitals são uma medida direta da velocidade da página e uma indireta do UX. Dada a importância do UX, é essencial garantir que todo o seu site seja rápido e responsivo.

Taxa de conversão melhorada

Não há dúvida de que ter um site que carrega rapidamente e sem problemas é importante para as empresas. Afinal, os usuários provavelmente passarão para outro site se tiverem que esperar muito tempo para que uma página seja carregada. Mas o que muitos proprietários de sites não percebem é que os Core Web Vitals adequados podem realmente melhorar sua taxa de conversão.

Como? Bem, tudo tem a ver com a experiência do usuário. Se um site for carregado de forma rápida e eficiente, é mais provável que os usuários permaneçam e explorem. Eles também são mais propensos a fazer uma compra ou realizar alguma outra ação desejada. Por outro lado, se um site for lento e frustrante de usar, os usuários terão muito menos probabilidade de converter.

Simplificando, os Core Web Vitals adequados são essenciais para fornecer uma experiência de página positiva – e uma experiência de usuário positiva é essencial para gerar conversões.

Como verifico meus Core Web Vitals no Google?

Medir o Core Web Vitals é bem simples.

Primeiro, você pode começar com o Google Search Console:

Google Search Console

Para acessar o Core Web Vitals do GSC, você entra no seu painel e clica aqui:

Você receberá dois relatórios, um para celular:

O outro para desktop:

Esses dois relatórios quase sempre serão diferentes, pois princípios diferentes se aplicam ao design e à funcionalidade de dispositivos móveis e desktops. Abrir o relatório Core Web Vitals mostrará um gráfico detalhado do que está errado:

Ao clicar nos detalhes, você verá quais URLs o Google considera não amigáveis.

Há também uma segunda maneira de medir o Core Web Vitals, que é através do PageSpeed ​​Insights.

Informações do PageSpeed

A diferença aqui é que você pode acessar um relatório de qualquer site, não apenas aqueles aos quais você tem acesso ao GSC. Mas não mostrará quais URLs em um domínio inteiro precisam ser aprimoradas. Você teria que ir um por um, o que é muito tedioso. O PageSpeed ​​Insights oferece a mesma fonte de dados, o Relatório de experiência do usuário do Chrome.

O PageSpeed ​​Insights é usado principalmente para uma análise mais aprofundada de URLs específicos, pois o Google Search Console mostra apenas uma imagem maior de quais páginas precisam ser corrigidas.

O Search Console direcionará você para o PageSpeed ​​Insights:

E aqui está o que aparece depois de entrar no site:

Um relatório completo sobre o que está errado.

Mais abaixo, você encontrará oportunidades:

O PageSpeed ​​Insights estima quanto você pode ganhar ao corrigir os problemas apresentados. Ainda assim, é tudo uma estimativa aproximada com base nas diretrizes para o site médio de acordo com o Google. Ele não reflete totalmente a experiência do usuário, mas pode ser um bom ponto de partida para uma análise.

Mais abaixo estão os diagnósticos:

E aqui, você pode ver qual elemento exato dentro do código está causando problemas.

Agora que você sabe como acessá-los, você pode perguntar como melhorar o Core Web Vitals para o seu site?

Aqui está o que você pode fazer!

O que é a otimização do Core Web Vitals?

A otimização do Core Web Vitals depende inteiramente do site e de seus problemas específicos. Ainda assim, vamos cobrir alguns dos mais comunse corrigíveis .

Maior pintura de conteúdo

Otimização de imagem

As imagens são uma parte essencial de qualquer página da Web, mas também podem ser uma fonte de tempos de carregamento lentos. Uma maneira de corrigir isso é otimizar suas imagens para garantir que elas sejam carregadas com rapidez e eficiência. Um formato que é particularmente bom para imagens de páginas da web é o webp. As imagens Webp geralmente são menores em tamanho do que outros formatos de imagem, portanto, carregam mais rapidamente. Outra opção é usar o formato mp4 para seus recursos de vídeo. Os arquivos de vídeo Mp4 são mais leves do que outros formatos de arquivo de vídeo, então eles carregam mais rápido nas páginas da web.

Plugins WP:

• Optimus
• Smush
• Otimizador de imagem EWWW

Pré-carregando recursos

Uma maneira de melhorar o desempenho de um site é pré-carregar recursos. Isso significa que o código HTML pode instruir o navegador a começar a carregar determinados recursos (como imagens ou scripts) antes que eles sejam necessários. Ao fazer isso, o navegador pode utilizar seu tempo e recursos com mais eficiência, resultando em um site geral mais rápido.

Plugins WP:

• Otimizar automaticamente
• Perfmatters

Bloqueio de renderização

O bloqueio de renderização é um termo usado para descrever as ações de determinados elementos em uma página da Web que impedem que a página seja renderizada corretamente. Esses elementos podem incluir arquivos JavaScript e CSS, entre outros. O problema com o bloqueio de renderização é que ele pode fazer com que a página carregue lentamente ou não carregue.

Existem algumas maneiras de corrigir o bloqueio de renderização.

• Uma é inserir pequenos arquivos JavaScript e CSS. Isso significa adicionar o código diretamente no arquivo HTML, em vez de referenciar arquivos externos.
• Outra maneira de corrigir o bloqueio de renderização é adiar o carregamento de arquivos JavaScript até que a página tenha sido renderizada. Isso pode ser feito usando o atributo async ou defer.
• Finalmente, outra maneira de reduzir o bloqueio de renderização é otimizar a entrega de CSS. Isso significa garantir que apenas o CSS necessário seja carregado para cada página.

Plugins WP:

• Otimizar automaticamente
• WP Foguete
• WP NitroPack

Mudança de layout cumulativa

Espaço para incorporações, iframes e anúncios

Quando um site inclui recursos como vídeos, imagens ou anúncios, é importante alocar espaço suficiente para eles na página. Isso garante que o layout da página não seja interrompido quando o ativo for carregado e ajuda a evitar o que é conhecido como CLS (Deslocamento de Layout Cumulativo). O CLS é uma medida de quanto uma página 'balança' à medida que o conteúdo é carregado e pode ser muito desanimador para os usuários. Ao reservar espaço para ativos antecipadamente, os desenvolvedores da Web podem ajudar a reduzir o CLS e criar uma experiência mais suave e focada no usuário.

Adicionar dimensões às imagens

Simplificando, adicionar dimensões às suas imagens ajuda com o deslocamento de layout cumulativo (CLS). Ao garantir que suas imagens tenham as dimensões corretas de largura e altura, você pode evitar que elas sejam deslocadas conforme o layout da página muda. Isso é especialmente importante para imagens próximas ou acima da dobra, pois são mais propensas a serem afetadas pelo CLS.

Pré-carregar fontes

Mesmo o site mais bem projetado pode sofrer com o CLS (Cumulative Layout Shift). Isso geralmente acontece quando as fontes da Web não são carregadas corretamente, resultando em um 'flash de texto sem estilo' (FOUT) ou um 'flash de texto invisível' (FOIT). Embora o FOUT seja geralmente considerado mais esteticamente perturbador, o FOIT pode realmente ser mais prejudicial à experiência do usuário, pois pode resultar no rearranjo do conteúdo na página. O pré-carregamento de fontes ajuda a evitar FOUT e FOIT, garantindo que as fontes da Web sejam carregadas antes de serem necessárias. Isso não apenas melhora a estabilidade visual da página, mas também reduz as chances de o conteúdo ser deslocado durante o carregamento.

Atraso da primeira entrada

Tarefas assíncronas

Um dos motivos mais importantes para usar tarefas JavaScript assíncronas é evitar o bloqueio da interface do usuário. Se uma tarefa JavaScript demorar muito para ser concluída, ela poderá bloquear a atualização da interface do usuário, resultando em uma experiência ruim para o usuário. As tarefas assíncronas permitem que a interface do usuário permaneça responsiva executando a tarefa em segundo plano.

Carregamento lento

O carregamento lento é uma técnica comum usada para melhorar o desempenho do site carregando conteúdo somente quando necessário. Embora isso possa ser eficaz em alguns casos, também pode aumentar o atraso da primeira entrada, pois o navegador precisa aguardar o carregamento do conteúdo antes de poder ser usado. Isso é particularmente verdadeiro se o conteúdo estiver localizado abaixo da dobra, pois os usuários geralmente precisam rolar para baixo para vê-lo.

Conteúdo do lado do servidor

Ao pré-renderizar o conteúdo no servidor, você garante que o navegador terá as informações necessárias assim que o usuário interagir com a página. Isso pode ajudar a melhorar o FID e o desempenho geral percebido. Além disso, a geração de conteúdo do lado do servidor também pode ajudar a reduzir a latência da rede, melhorando ainda mais o desempenho.

Código de terceiros

O código de terceiros pode ter um impacto significativo no First Input Delay (FID). Isso ocorre porque o código de terceiros geralmente é executado de forma síncrona, o que pode bloquear o thread principal e atrasar o processamento da entrada. Além disso, o código de terceiros pode introduzir novas dependências JavaScript que precisam ser carregadas e analisadas antes de serem executadas. Isso pode atrasar ainda mais o processamento de entrada e aumentar o FID. Por fim, alguns códigos de terceiros podem usar algoritmos ineficientes que consomem muitos recursos e fazem com que o encadeamento principal fique atolado. Isso também pode levar ao aumento do FID. Em vez de recursos de terceiros, sempre priorize os seus próprios.

Conclusão

A otimização da Web sempre foi um ato de equilíbrio entre os três pilares principais do SEO: conteúdo, SEO técnico e experiência do usuário. A nova iniciativa Core Web Vitals do Google traz a experiência do usuário para a frente como um fator chave de classificação.

Os Core Web Vitals são um conjunto de métricas que medem a velocidade e a estabilidade de um site. O Google disse que essas métricas se tornaram um importante fator de classificação em maio de 2021. Enquanto alguns webmasters estão lutando para fazer alterações em seus sites, outros estão adotando uma abordagem mais relaxada.

Afinal, os Core Web Vitals são apenas mais um sinal que o Google está usando para medir a experiência do usuário. E como todos sabemos, a experiência do usuário é algo que sempre pode ser melhorado. Portanto, independentemente da classificação do seu site na escala do Core Web Vitals, sempre há espaço para melhorias.