Em maio de 2020, o Google anunciou que lançaria um novo fator de classificação relacionado à experiência geral da página (a velocidade de carregamento das páginas, compatibilidade com dispositivos móveis, etc ...). Incluído nos sinais de classificação de experiência da página existente está um conjunto de métricas chamado Core Web Vitals.


O principal objetivo do Core Web Vitals é garantir que os sites proporcionem uma ótima experiência ao usuário. Não é realmente nada novo.


Isso é algo que devemos sempre fazer (e tem feito). Você deseja que alguém tenha uma ótima experiência ao acessar uma página do seu site.


Lembre-se de que muitas das métricas de “Experiência da Página” já estão sendo usadas para determinar as classificações há muito tempo.


Em 2015, o Google anunciou que a compatibilidade com dispositivos móveis se tornaria um sinal de classificação. Eles fizeram isso porque mais pessoas estão usando seus telefones. Para fornecer uma ótima experiência ao usuário, um site deve ser compatível com dispositivos móveis.


O que é Core Web Vitals?


Core Web Vitals é um conjunto de métricas de experiência de página relacionadas à velocidade da página, capacidade de resposta e estabilidade visual.


Ou, como diz John Muller, do Google:  “Os vitais essenciais da Web incluem métricas de carregamento, interação e aborrecimento (?).



São métricas de experiência do usuário como:

  • Quão rápido uma página carrega?
  • O conteúdo de uma página muda inesperadamente?
  • O conteúdo principal da página é carregado primeiro?
  • Existem pop-ups intrusivos?


Eles fazem parte de um grupo existente de métricas de experiência de página que incluem:

  • Otimização para celular
  • Segurança - Https em vez de Http
  • Pop-ups intrusivos
  • Navegação segura


O que afeta o Core Web Vitals?


O Core Web Vitals consiste em três métricas: a maior tinta com conteúdo, o primeiro atraso de entrada e o layout de mudança dinâmica. Vamos revisar cada métrica, o que afeta cada métrica e como otimizar para Core Web Vitals.


  1. Largest Contentful Paint (LCP) : mede a velocidade com que o conteúdo principal de uma página é carregado e exibido na tela. Basicamente, a velocidade de carregamento da página. Isso é afetado pelo tempo de renderização, imagens grandes, vídeo de fundo e texto na janela de visualização (a parte visível da página da web para o visitante).
  2. Atraso na primeira entrada (FID) : mede a velocidade na qual os usuários são capazes de interagir com uma página depois de acessá-la. Isso é afetado por JavaScript, código de terceiros, scripts de rastreamento, etc ... 
  3. Mudança cumulativa de layout (CLS) : mede a frequência com que os usuários experimentam mudanças inesperadas de layout (também conhecida como métrica de “aborrecimento”). O conteúdo da página (botões, CTAs, etc ...) muda inesperadamente? Isso geralmente é afetado pelo tamanho da imagem, animações ou fontes múltiplas.


Esta é a métrica que está recebendo mais atenção porque não era uma métrica que podíamos medir antes. Mas todos nós já visitamos um site (especialmente no celular) onde você quer clicar em uma coisa e acabar clicando em outra, como um anúncio.


Como faço para otimizar meu site para Core Web Vitals?


Entrei em contato com nossa desenvolvedora líder da web, Jessica Larsen , para obter alguns insights sobre a melhor forma de otimizar seu site para elementos vitais da web e experiência geral da página. 


Aqui estão os elementos mais comuns que causam velocidade lenta da página e pontuações baixas do PageSpeed ​​Insight:


1. Formatos e tamanho das imagens


As imagens geralmente são as maiores culpadas por pontuações baixas. Isso inclui imagens de herói (aquelas imagens grandes no topo da página), imagens in-line, imagens de fundo, etc ... Para corrigir isso, você deseja compactar as imagens, usar dimensões e tamanhos corretos, implementar carregamento lento e definir a altura e atributos de largura para tags de imagem.


2. Vídeos


Em vez de incorporar grandes arquivos de vídeo diretamente em seu site, use um serviço de hospedagem de vídeo de terceiros, como Vimeo, Wistia ou YouTube para servir vídeos aos seus visitantes. Isso reduzirá a largura de banda em seu servidor e fornecerá a qualidade de vídeo apropriada ao ambiente do visitante. O carregamento lento de vídeos ou o adiamento da renderização do vídeo até que seja clicado tirará parte do carregamento do vídeo do carregamento inicial da página.


3. Scripts de rastreamento


Evite usar scripts de rastreamento de terceiros que não sejam relevantes para o seu negócio ou marketing. Revise os scripts incluídos em seu site. Vá até o Gerenciador de tags do Google e analise todas as tags e, em seguida, pergunte-se o seguinte:

  • Eles são necessários em todas as páginas? Caso contrário, use-os apenas nas páginas apropriadas.
  • Qual é o custo-benefício dessas tags em comparação com a velocidade da página? Remova todos os scripts de rastreamento desnecessários.
  • Você precisa deles? Se não, economize algum dinheiro e livre-se deles.


4. Fontes


Recomendamos não usar mais de 8 variantes de fontes personalizadas no total em seu site. Isso inclui famílias de fontes, espessuras de fontes e versões em itálico da fonte.


O pré-carregamento dos recursos de fonte necessários para esta página instruirá o navegador a carregá-lo imediatamente. Armazenar suas fontes localmente também reduzirá o número de solicitações HTTP e pesquisas DNS.


5. Anúncios, pop-ups, banners promocionais, etc ...


Qualquer mudança de layout que ocorra sem a intervenção prévia do usuário causará uma mudança inesperada de layout. Isso produzirá uma pontuação CLS ruim e, o mais importante, será muito irritante para o visitante.


A solução seria pré-determinar a altura e a largura do espaço alocado para o anúncio ou banner, para que o layout da página não mude quando o anúncio for carregado. Evite colocar anúncios acima de outro conteúdo para que, quando a página da web estiver totalmente carregada, não desloque todo o conteúdo abaixo dela.


6. CSS e Javascript


A rapidez com que uma página é carregada pode ser retida no carregamento de CSS e Javascript grandes. Otimize o CSS e o Javascript reduzindo e combinando. Experimente e elimine chamadas CSS e Javascript para páginas que não precisam deles ou apenas adie-as quando necessário.


Observação: é altamente recomendável que você converse com seus desenvolvedores da web ao otimizar seu site. Há muito conhecimento técnico envolvido em cada parte da atualização da experiência da página.


O Core Web Vitals afetará minhas classificações?


O Google tem um novo fator de classificação. Minhas classificações vão cair?


Isso é provavelmente o que preocupa a maioria dos profissionais de marketing. É a pergunta que mais nos perguntam.


É improvável que Core Web Vitals tenha impacto nas classificações.

Recentemente, o Google atualizou sua documentação e disse que o lançamento será gradual e que os sites “geralmente não devem esperar mudanças drásticas”.


Se o seu site oferece uma ótima experiência do usuário e você tem conteúdo de qualidade, as classificações provavelmente não serão afetadas. Lembre-se de que a maioria das métricas de experiência da página são fatores de classificação há anos. 


Você pode ter uma pontuação melhor do core web vitals, mas ainda não ultrapassar alguém que tem uma pontuação mais baixa. O Google tem mais de 200 fatores de classificação. A experiência da página é apenas uma parte dos fatores gerais de classificação.


“Uma boa experiência de página não substitui ter um conteúdo excelente e relevante.” Google .


 

A velocidade da página é um fator de classificação?


Fiz um relatório do PageSpeed ​​e o site teve uma pontuação ruim. O site está quebrado!


O site da Nike está quebrado?



Não, não está quebrado. Mas pode ser otimizado para fornecer uma experiência de usuário melhor (e mais rápida).


Para se divertir, vamos verificar a página da própria loja Pixel Bud do Google e ver como eles estão.



Estás a ver? Sempre há espaço para melhorias, mas sua pontuação de velocidade da página não é o único fator no qual você deve se concentrar.

A rapidez com que sua página carrega é uma métrica na experiência geral da página. A velocidade da página por si só não é um fator de classificação com grande peso. (Fonte: Google )


Por que a velocidade da página é importante?


A velocidade da página é importante porque alivia a frustração envolvida em esperar o carregamento dos sites. Ele cria uma melhor experiência do usuário que afeta o engajamento do usuário (como as pessoas interagem com seu site) e as conversões (vendas e leads).


À medida que o tempo de carregamento da página aumenta, a probabilidade de alguém ficar na sua página diminui.


Qual é a pontuação de velocidade de página ideal?


Não se concentre muito nas pontuações reais de velocidade da página. 


Sim, há coisas que você pode fazer para otimizar seu site para melhorar essas pontuações, mas o próprio Google disse que não há uma pontuação típica que você deva buscar.


Eu recomendo fortemente assistir a este vídeo de Martin Splitt e John Muller do Google enquanto eles respondem a perguntas sobre velocidade de página.


“Apenas torne os sites mais rápidos para os usuários.” [1:17] Martin Splitt, analista de tendências para webmasters do Google. “Você nunca terá uma pontuação que otimizará e acabará com ela.” 




Conclusão


No geral, a atualização da experiência da página é uma coisa boa! Mas não vamos nos concentrar muito nos números reais.


Remover um pop-up do seu site ou reduzir alguns tamanhos de imagem não afetará a experiência da página ou as classificações. Otimize seu site, continue criando ótimos conteúdos, economize dinheiro removendo ferramentas de marketing desnecessárias e vamos todos fazer a nossa parte para tornar a Internet um lugar melhor.


Alguma pergunta, comentário, preocupação? Solte-os nos comentários abaixo.